The font modes work changed font-size and line-height tokens from pointing to raw values to point to CSS custom properties. Vector also has a text size changer, which uses --font-size-medium and --line-height-medium CSS custom properties that are set to new values depending on the selected text size.

This means that, when the text size changes, Codex components that use @font-size-medium (which is set to var( --font-size-medium ) and @line-height-medium (which is set to var( --line-height-medium ) will shift when the text size changes. You can see this in this patchdemo - the input text and button text in TypeaheadSearch scale, along with the language selector button text and the radios in the appearance menu. The text size switcher is only meant to impact article text, so we need to prevent any changes in Codex components in other parts of the site.

Possible solutions

1. Use the existing exclusion class. The CSS class .vector-feature-custom-font-size-clientpref--excluded is used to reset --font-size-medium and --line-height-medium to their default values in places where the text size should not be respected. We could use this in the Vector 2022 header and sidebar as well.
2. Create vector-specific variables: Instead of setting --font-size-medium and --line-height-medium in Vector, set up Vector-specific CSS custom properties (e.g. --vector-font-size-medium) that are changed per text size and used for article text. This solution would have the added benefit of preventing the collision between Vector's --line-height-medium and Codex's --line-height-medium defined in this task under the heading "Working with the text size switcher".
3. Use specific Codex components and CSS-only component exclusions. We have no control over what's used in the Vector header(s)/sidebar in different projects, resulting in unpredictable extension issues downstream. Therefore it seems more reasonable to exclude just Codex components et al. from font mode scaling in the Vector header/sidebar.
4. A variant of 3. could be to rely on Codex mode reset() mixin class instead of putting selector on Vector's selector combination.

Accepted solution

We've decided to go for option 1 since we intend to eventually replace the code in Vector that manually updates font-size and line-height CSS variables to use the Codex font modes directly. The exclusion class workaround is fine for the time being and limits code changes and risk.

Acceptance criteria

• Discuss with Web to determine the best solution for preventing scaling of Codex components in the Vector 2022 header/sidebar
• Implement the change before the font modes work is deployed