Page MenuHomePhabricator

Enable Codex tokens to work with different font sizes
Open, HighPublic

Description

As part of T297000, we decided to transform certain categories of tokens from pixels to relative units (em or rem). This transformation depends on the base font size, meaning the exported values of these tokens assume a certain base font size, and aren't appropriate for use in a context where the base font size is different.
Token categories for relative unit sizing all are aiming to enable users to text zoom font size capability in browsers to enable readability without limitations: width, height, max-width, max-height, font-size.
We're going for unit-less line-height already which enables scaling inherently. Other possible future categories would include clip-path, tab-size, text-indent, word-spacing.

In the MediaWiki context, we have to support two different base font sizes:

  • The Vector skin (default skin on desktop) uses 14px
  • The MinervaNeue skin (default skin on mobile) uses 16px

In Codex, we want to default to a base font size of 16px, but the output of the token transform also needs to support environments where the base font size is 14px. To that end, we'll need to create two themes: a default theme (using 16px) and a legacy theme (using 14px). We don't need a full theming system for this yet, nor do we need to change the values of the dimension/size/spacing tokens to fit in better in the 14px environment (yet), for now we just need to get the px->em calculations right, and produce two sets of CSS/LESS/SCSS files, one with the calculations done for 16px (so e.g. 8px becomes 0.5em) and one with the calculations done for 14px (so e.g. 8px becomes 0.5714em).

  • Add the ability to transform tokens from absolute (px) to relative (em/rem) units
  • Build two versions of the tokens output files (theme-wikimedia-ui.less etc), one for a 16px base font size and one for 14px base font size
  • Build two versions of the Codex styles (codex.style.css and codex.style-rtl.css), one for 16px and one for 14px (see T296689#7825357 for implementation ideas)
  • Enable unit transformation for the relevant current token categories
    • size (but not size.viewport; for completion also not min-size, and 0 and percentage carrying sizes are excluded)
    • max-width (but not max-width.breakpoint)
    • font-size
  • Configure MediaWiki so that Vector uses the 14px version and MinervaNeue uses the 16px version (For completion, Monobook uses 12.8px, Timeless 15.2px)

Related Objects

StatusSubtypeAssignedTask
Resolvedegardner
ResolvedNone
OpenNone
OpenNone
Duplicate STH
InvalidNone
In ProgressVolker_E
OpenNone
In ProgressVolker_E
In ProgressNone
Resolvedbmartinezcalvo
In ProgressVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
Resolvedldelench_wmf
OpenNone
Resolved EUdoh-WMF
OpenSarai-WMDE
ResolvedDAbad
In ProgressDAbad
Openbmartinezcalvo
In ProgressKieranMcCann
OpenNone
ResolvedVolker_E
ResolvedDAbad
ResolvedVolker_E
ResolvedDAbad
In ProgressDAbad
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedSarai-WMDE
ResolvedVolker_E
Resolvedbmartinezcalvo
ResolvedCatrope
ResolvedDAbad
OpenNone
OpenNone
OpenCatrope
OpenNone
Openbwang

Event Timeline

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

[design/codex@main] tokens: Add basic theme system

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

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

[design/codex@main] tokens: Add automatic unit transform based on font size

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

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

[design/codex@main] tokens: Allow themes to extend other themes

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

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

[design/codex@main] [WIP] tokens: Demonstrate extending a theme

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

Catrope updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)

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

[design/codex@main] [WIP] Simpler version of unit transform

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

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

[design/codex@main] build: Build legacy versions of the Codex styles

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

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

[mediawiki/core@master] [WIP] resourceloader: Use Codex legacy CSS in Vector

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

Test wiki created on Patch demo by Roan Kattouw (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/c24ec6b808/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/c24ec6b808/w/build/codex/docs

Test wiki created on Patch demo by Roan Kattouw (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/e0e97d5e6f/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/e0e97d5e6f/w/build/codex/docs

Test wiki on Patch demo by Roan Kattouw (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/c24ec6b808/w/

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/8c88aa07e6/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/8c88aa07e6/w/build/codex/docs

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/8c88aa07e6/w/

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/bf2faf093a/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/bf2faf093a/w/build/codex/docs

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/bf2faf093a/w/

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/595f8966a0/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/595f8966a0/w/build/codex/docs

Quick heads-up @Edtadros @ovasileva @Jdlrobson @Jdrewniak @alexhollender_WMF This relative sizing is touching TahS and will cause minimal visible changes with next Codex release, for example in T312582 Thumbnail following design spec and now feature 40x40px instead of 42x42px in current Vector.
It will also finally allow us all the fanciness from task description and provide a scalable and accessible foundation for Codex, like the text zoomability of icons and thumbs or adding relative font size tokens.
We plan on merging it tomorrow so we've got another week of testing in patch demos and QTE being able to put eyes on.

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/595f8966a0/w/

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/71dd00c269/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/71dd00c269/w/build/codex/docs

Test wiki created on Patch demo by Roan Kattouw (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/9c7b8d9c84/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/9c7b8d9c84/w/build/codex/docs

Test wiki created on Patch demo by Roan Kattouw (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/9662bcf716/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/9662bcf716/w/build/codex/docs

Test wiki created on Patch demo by Roan Kattouw (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/c3e401a1d5/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/c3e401a1d5/w/build/codex/docs

Change 869274 merged by jenkins-bot:

[design/codex@main] build, tokens, styles: Introduce simple stylesheet unit transform

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

Change 869808 merged by jenkins-bot:

[design/codex@main] build: Build legacy versions of the Codex styles

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

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/71dd00c269/w/

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

[mediawiki/core@master] Update Codex from v0.4.3 to v0.5.0

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

Change 885450 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.4.3 to v0.5.0

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

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

[mediawiki/skins/Vector@master] Use the wikimedia-ui-legacy theme for Codex

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