Page MenuHomePhabricator

Font modes: remove line-height workaround
Open, Needs TriagePublic

Description

In T389900, we added hard-coded values for line-height-xx-small and line-height-medium in Vector 2022, Vector, MinervaNeue, and Monobook to avoid breaking layouts with the Codex 2.0 release.

In T391014, we will update all uses of line height tokens to work with the new scale created as part of the font modes work.

This task covers removing the hard-coded line-height tokens in skins.

Working with the text size switcher

The font modes work will change the Less variable @line-height-medium from pointing to a raw, unitless value to pointing to a CSS custom property, var( --line-height-medium ). This conflicts with the --line-height-medium custom property in Vector that is used to change the line height when text size changes (see CSSCustomProperties.less). Without the overrides in skin variables, --line-height-medium becomes self-referential and therefore nothing. You can see this by viewing the text on the main page of this patchdemo when you select the "standard" text size - the text loses its line height and becomes squished.

When we remove the workarounds from skin variables, we will need to update CSSCustomProperties.less in Vector to account for this and ensure the font-size and line-height for all text sizes work properly. We may be able to simply remove the lines that assign --font-size-medium: @font-size-medium and --line-height-medium: @line-height-medium, since those CSS custom properties will already be set to the correct values by Codex.

Acceptance criteria

  • Remove the hard-coded values for line-height-xx-small and line-height-medium from skin variables in Vector 2022, Vector, MinervaNeue, and Monobook
  • Ensure line-height-medium works properly with text size switching in Vector 2022