Background
With T394722: Font modes: Introduce a unitless "line-height-content" token in, we also have to make use of it.
Goal
- Ensure that Vector's content area (.vector-body) is using a unitless line-height token in order to prevent running into issues like T394305: 1.45.0-wmf.1: When setting font size to "small", line-height is absolute, making lines with larger font-size cramped again, while also containing being overly prescriptive on font-size/line-height settings to development teams
- Ensure that there's only intended visual change before/after and only in Vector content area, as it's currently the only selector relying on CSS custom properties.
Dev notes
Jon Robson mentioned that .vector-body was born out of a compromise to ensure Editing software is not affected by the font modes. We might be able to revisit this compromise and generalize the approach better in near future.
| Vector 2022 .vector-body | line-height before | after |
|---|---|---|
| font size small ~=14px | 1.5714285 (22px) | 1.5714285 (22px) |
| font size medium ~=16px | 1.6 (25.6px) | 1.625 (26px) |
| font size large ~=20px | 1.5 (30px) | 1.55 (31px) |
Acceptance criteria for done
- Implement line-height-content on .vector-body
- Ensure in testing that there are no unintended side-effects