Page MenuHomePhabricator

Implement initial CSS Custom properties in Vector
Closed, ResolvedPublic1 Estimated Story Points

Description

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

ACStatusDetails
1T348984#9288185
2T348984#9288185

QA Results - Prod

ACStatusDetails
1T348984#9325228
2T348984#9325228

Event Timeline

Change 960116 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Introduce CSS custom properties under font-size feature flag

https://gerrit.wikimedia.org/r/960116

Change 960116 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Introduce CSS custom properties under font-size feature flag

https://gerrit.wikimedia.org/r/960116

Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: No visual changes
✅ AC2: The font-size feature flag continues to increase the font-size to 16px

screenshot 181.png (964×1 px, 317 KB)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: No visual changes
✅ AC2: The font-size feature flag continues to increase the font-size to 16px

screenshot 112.mov.gif (1×1 px, 687 KB)