Page MenuHomePhabricator

Use the system's typographic scale tokens (font size and line-heights)
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

With T305947: Define the system's typographic scale (font sizes and line-heights) specified and T324367: Enable Codex tokens to work with different font sizes enabling relative font-size outputs, we have to bring the tokens to Codex repo life.

Goal

Apply the typographic scale tokens consistently in Codex codebase.

Acceptance criteria for done

  • Implement font-size tokens
    • Apply them everywhere
    • Update Codex components from design-sign off review
  • Implement line-height tokens
    • Apply them everywhere

Related Objects

StatusSubtypeAssignedTask
Duplicate STH
InvalidNone
ResolvedVolker_E
ResolvedNone
Resolvedbmartinezcalvo
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
Resolvedldelench_wmf
ResolvedVolker_E
Resolved EUdoh-WMF
ResolvedSarai-WMDE
ResolvedDAbad
ResolvedVolker_E
Resolvedbmartinezcalvo
ResolvedSarai-WMDE
ResolvedCatrope
OpenNone
Resolvedovasileva
ResolvedBUG REPORTVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedSarai-WMDE
ResolvedVolker_E
Resolvedbmartinezcalvo
ResolvedCatrope
ResolvedDAbad
ResolvedVolker_E

Event Timeline

ldelench_wmf set the point value for this task to 3.Oct 24 2022, 3:34 PM

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

[design/codex@main] [WIP] Apply `line-height` design-first tokens

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

Change 848923 merged by jenkins-bot:

[design/codex@main] Apply `line-height` design-first tokens

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

Change 859597 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.2.2 to v0.3.0

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

Change 859597 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.2.2 to v0.3.0

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

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

[design/codex@main] tokens, styles: Introduce design-first `font-size` tokens

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

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

[design/codex@main] docs, tokens: Apply `line-height` tokens everywhere

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

Change 871238 merged by jenkins-bot:

[design/codex@main] docs, tokens: Apply `line-height` tokens everywhere

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

Change 878213 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

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

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

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

Change 878213 merged by jenkins-bot:

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

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

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

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

Change 871022 merged by jenkins-bot:

[design/codex@main] tokens, styles: Introduce design-first `font-size` tokens

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

Volker_E updated the task description. (Show Details)

Note, the remaining @font-size SFCs are just helpers for scaling other elements relatively in pending state, binary input and ToggleSwitch. There are already patches provided to replace all of those. Fine to move this task towards resolving.

Change 869852 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/869852

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

(Removed myself as reviewer to prevent blocking this while away. Will re-assign it again in case the sign-off is still pending in two weeks)

Design sign-off done. I've found some things to fix in the following components:

1. Card
In the Figma spec the supporting text is 14px on both desktop and mobile. Supporting text in the Codex demo should be 14px instead (now it's 16px).

Captura de Pantalla 2023-02-27 a las 17.13.13.png (474×1 px, 254 KB)

2. Dialog
The Figma spec is using the following text sizes:

  • Desktop: Title 16px and Body 14px
  • Mobile: Title 18px and Body 16px (since Codex is using the mobile values, the dialog title in Codex should be 18px size)

Captura de Pantalla 2023-02-27 a las 17.13.51.png (860×1 px, 629 KB)

@Volker_E should we create separate tasks to update these text sizes or do we want to fix them in this task?

@bmartinezcalvo I'd fix those two in this task.
Please for clarification, as we're going for 16px base for readability, having the Card applying 14px is making me curious:
Related articles supporting text is using 12.8px on mobile. Upping that seems like a good idea

image.png (268×2 px, 156 KB)

Going smaller on these cards doesn't feel like a good idea:
image.png (604×1 px, 88 KB)

@Volker_E the 14px text size should be applied just for the supporting text (on both mobile and desktop). The description will be 16px on mobile (and 14px on desktop now unless we update desktop base font to 16px)

Captura de Pantalla 2023-02-27 a las 17.39.07.png (442×2 px, 306 KB)

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

[design/codex@main] Card, styles: Use correct token on supporting text

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

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

[design/codex@main] Dialog, styles: Update title font-size

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

Change 892493 merged by jenkins-bot:

[design/codex@main] Card, styles: Use correct token on supporting text

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

Change 892494 merged by jenkins-bot:

[design/codex@main] Dialog, styles: Update title font-size

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

Catrope updated the task description. (Show Details)

Change 898895 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v0.6.2 to v0.7.0

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