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
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedJdlrobson
Resolvedovasileva
Resolvedovasileva
ResolvedJScherer-WMF
Resolvedovasileva
ResolvedSpikeSToyofuku-WMF
Resolvedovasileva
Resolvedovasileva
ResolvedJdlrobson
Resolvedovasileva
ResolvedBUG REPORTJdlrobson
ResolvedBUG REPORTJScherer-WMF
ResolvedJdlrobson
DuplicateFeatureNone
ResolvedSpikeJdlrobson
ResolvedJdlrobson
Resolvedovasileva
ResolvedFeatureJdlrobson
DuplicateNone
ResolvedJdlrobson
Resolvedovasileva
DuplicateJdlrobson
ResolvedJdlrobson
DuplicateNone
ResolvedJdlrobson
ResolvedBUG REPORTovasileva
Resolvedovasileva
InvalidNone
InvalidJdlrobson
DuplicateNone
DuplicateNone
DuplicateNone
DuplicateNone
Resolvedovasileva
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedJdlrobson
DuplicateJdlrobson
ResolvedJdlrobson
ResolvedJdlrobson
DeclinedJdlrobson
ResolvedSToyofuku-WMF
ResolvedJdlrobson
ResolvedKSarabia-WMF
ResolvedNone
OpenNone
Resolvedovasileva
ResolvedJdlrobson
ResolvedBUG REPORTJdlrobson
DuplicateBUG REPORTNone
ResolvedBUG REPORTovasileva
Openovasileva
ResolvedBUG REPORTovasileva
ResolvedBUG REPORTabi_
ResolvedBUG REPORT Nikerabbit
ResolvedBUG REPORTovasileva
ResolvedJdlrobson
ResolvedBUG REPORTJdlrobson
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedFeatureNone
OpenNone
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
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
OpenNone
Openovasileva
Resolvedovasileva
Openovasileva
Resolvedovasileva
Resolvedovasileva
InvalidBUG REPORTNone
OpenNone
ResolvedBUG REPORTovasileva
In ProgressDTorsani-WMF
ResolvedVolker_E
Resolvedovasileva
OpenBUG REPORTovasileva
DuplicateBUG REPORTNone
Resolvedovasileva
ResolvedJdlrobson
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.May 30 2024, 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.Jun 5 2024, 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