Page MenuHomePhabricator

[OOUI] Fix font size inconsistencies across skins with `rem` based sizing
Closed, DeclinedPublic5 Estimated Story Points

Description

Background

In order to get rem enabled in OOUI, we will rely on Codex design tokens v1.4.0+ as part of T363857. With that we are surfacing an issue that would be disruptive to users, the "shrinking" of now 14px equivalent OOUI widgets and layouts in rem based OOUI in a skin like MinervaNeue.

Goal

Find a measurement to make the interfaces in wide majority of use cases equivalent to before rems in order to not disrupt our users.
We might come back to redefine some interaces in 16px equivalent base font size skins like MinervaNeue, but that will need strong design and possibly community liasons support. For now enabling dark mode, which the rem based token dependency change is a precursor, is the major objective.

Technical notes

We think of introducing a temporary Codex design token, basically a font size multiplier and add it in the normal release cycle to mediawiki.skin.variables.less and to the skins in quest, here MinervaNeue

Acceptance criteria

  • Add temporary Codex design token
    • Release Codex and
    • Add token with specific multiplier to MinervaNeue
  • Ensure interface equivalent before/after in MN OOUI AMC interfaces, Timeless and Vector skin

Related Objects

StatusSubtypeAssignedTask
OpenJdrewniak
OpenJdrewniak
Openovasileva
ResolvedJdlrobson
Openovasileva
Openovasileva
ResolvedJScherer-WMF
Resolvedovasileva
ResolvedSpikeSToyofuku-WMF
Openovasileva
Openovasileva
OpenNone
OpenBUG REPORTNone
Resolvedovasileva
Openovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedFeatureNone
OpenNone
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Openovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedBUG REPORTovasileva
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedNone
ResolvedJdrewniak
Resolvedovasileva
ResolvedBUG REPORTovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedJdlrobson
ResolvedJdlrobson
Resolvedovasileva
ResolvedJdrewniak
ResolvedJScherer-WMF
Resolvedovasileva
Resolvedovasileva
ResolvedBUG REPORTovasileva
ResolvedBUG REPORTovasileva
Stalledbwang
OpenNone
OpenGMikesell-WMF
OpenNone
OpenNone
OpenNone
OpenBUG REPORTNone
OpenNone
OpenBUG REPORTNone
In ProgressDTorsani-WMF
ResolvedVolker_E
OpenNone
OpenBUG REPORTNone
OpenNone
OpenNone
DeclinedVolker_E

Event Timeline

Volker_E renamed this task from [Placeholder][OOUI] Font size (Vector/Minerva): fix inconsistencies to [OOUI] Font size (Vector/Minerva): fix inconsistencies.Thu, May 30, 9:32 PM
Volker_E edited projects, added MinervaNeue; removed Epic.
Volker_E updated the task description. (Show Details)
Volker_E edited subscribers, added: matmarex; removed: Ebrahim.
Volker_E renamed this task from [OOUI] Font size (Vector/Minerva): fix inconsistencies to [OOUI] Fix font size inconsistencies across skins with `rem` based sizing.Wed, Jun 5, 10:00 AM

Change #1041239 had a related patch set uploaded (by Catrope; author: Catrope):

[oojs/ui@master] Make the root font size customizable with a CSS custom property

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

Change #1041251 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/skins/MinervaNeue@master] styles, mediawiki.less: Introduce OOUI sizing multiplier

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

Change #1041253 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/skins/Timeless@master] styles, mediawiki.less: Introduce OOUI sizing custom property

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

Change #1041239 abandoned by Eric Gardner:

[oojs/ui@master] Make the root font size customizable with a CSS custom property

Reason:

Abandoning this approach in favor of https://gerrit.wikimedia.org/r/c/oojs/ui/+/1041265

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

Change #1041251 abandoned by Eric Gardner:

[mediawiki/skins/MinervaNeue@master] styles, mediawiki.less: Introduce OOUI sizing custom property

Reason:

Abandoned in favor of https://gerrit.wikimedia.org/r/c/oojs/ui/+/1041265

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