Page MenuHomePhabricator
Create Task
Maniphest T321470

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

Assigned To
bmartinezcalvo
Authored By
Volker_E
Oct 24 2022, 7:58 AM
Tags
Referenced Files
F36874885: Captura de Pantalla 2023-02-27 a las 17.39.07.png
Feb 27 2023, 4:41 PM
F36874874: image.png
Feb 27 2023, 4:32 PM
F36874864: image.png
Feb 27 2023, 4:32 PM
F36874820: Captura de Pantalla 2023-02-27 a las 17.13.51.png
Feb 27 2023, 4:25 PM
F36874816: Captura de Pantalla 2023-02-27 a las 17.13.13.png
Feb 27 2023, 4:25 PM
Subscribers
Aklapper
bmartinezcalvo
Sarai-WMDE
Volker_E

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

Details

SubjectRepoBranchLines +/-
tokens, styles: Introduce design-first `font-size` tokensdesign/codexmain+73 -15
Dialog, styles: Update title font-sizedesign/codexmain+1 -6
Card, styles: Use correct token on supporting textdesign/codexmain+9 -2
Update Codex from v0.4.3 to v0.5.0mediawiki/coremaster+1 K -1 K
Update Codex from v0.4.2 to v0.4.3mediawiki/coremaster+30 -25
docs, tokens: Apply `line-height` tokens everywheredesign/codexmain+22 -14
Update Codex from v0.2.2 to v0.3.0mediawiki/coremaster+2 K -1 K
Apply `line-height` design-first tokensdesign/codexmain+10 -19
Customize query in gerrit

Related Objects
Search...

StatusSubtypeAssignedTask
 Duplicate• STHT302348 <Platform Initiative> Release Codex in Beta (Limited Production Release)
 InvalidNoneT302025 Upgrade Codex to Beta version
 ResolvedVolker_ET293127 [EPIC] Design System Foundation: Design and define design tokens
 ResolvedNoneT314086 Design System Foundation: Define & Implement Critical "Global" Visual Styles
 ResolvedbmartinezcalvoT295991 Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma
 ResolvedVolker_ET296995 Define the system's color palette
 ResolvedVolker_ET297584 [Spike] Design System: Re-evaluate color palette nomenclature and numerals
 ResolvedVolker_ET305236 Create visited red link color token
 ResolvedVolker_ET313502 Tokens: Color subtle features different color than WikimediaUI Base's and evaluate 'accessory'
 Resolvedldelench_wmfT322833 Update Yellow 600 for warning color
 ResolvedVolker_ET324449 Add new colors used in Message component and update border colors to the darkest tone
 Resolved• EUdoh-WMFT322960 Define `accent-color` design token
 ResolvedSarai-WMDET296998 [Epic] Define the system's typographic styles and scale
 Resolved• DAbadT305920 Define the system's sans, serif and monospace typefaces
 ResolvedVolker_ET305947 Define the system's typographic scale (font sizes and line-heights)
 ResolvedbmartinezcalvoT321470 Use the system's typographic scale tokens (font size and line-heights)
 ResolvedSarai-WMDET297000 Define the design system's size and spacing scale
 ResolvedCatropeT324367 Enable Codex tokens to work with different font sizes
 OpenNoneT326900 Vertical centering issues of text/multiline text and icons in several components
ResolvedovasilevaT328053 Verify impact of Design Systems Team's Codex Update on Web properties
 ResolvedBUG REPORTVolker_ET329287 TypeaheadSearch: Search footer icon shrinks at 14px base font size
 ResolvedVolker_ET297001 Define the system's opacities
 ResolvedVolker_ET305084 Add 0.3 opacity
 ResolvedVolker_ET297003 Define the system's box shadow styles
 ResolvedVolker_ET310409 Button: Simplify focus styles application including `box-shadow`
 ResolvedSarai-WMDET297007 Define the system's iconography
 ResolvedVolker_ET300562 Define Border tokens
 ResolvedbmartinezcalvoT302181 Define the system's cursors
 ResolvedCatropeT304443 Document Motion tokens (animations and transitions)
Resolved• DAbadT303522 Decide on CSS breakpoints for the design system
 ResolvedVolker_ET322712 tokens: Add `background-position` option and decision token with value `center`

Event Timeline

Volker_E created this task.Oct 24 2022, 7:58 AM
Restricted Application removed a project: Patch-For-Review. · View Herald TranscriptOct 24 2022, 7:58 AM
ldelench_wmf set the point value for this task to 3.Oct 24 2022, 3:34 PM
gerritbot added a comment.Oct 25 2022, 5:53 AM

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

gerritbot added a project: Patch-For-Review.Oct 25 2022, 5:53 AM
gerritbot added a comment.Oct 31 2022, 6:02 PM

Change 848923 merged by jenkins-bot:

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

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

Sarai-WMDE removed Sarai-WMDE as the assignee of this task.Nov 7 2022, 3:15 PM
gerritbot added a comment.Nov 22 2022, 6:58 PM

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

gerritbot added a comment.Nov 22 2022, 7:24 PM

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

gerritbot added a comment.Dec 23 2022, 7:39 AM

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

Volker_E updated the task description. (Show Details)Dec 23 2022, 6:00 PM
Volker_E updated the task description. (Show Details)Dec 23 2022, 6:28 PM
gerritbot added a comment.Dec 23 2022, 9:15 PM

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

Volker_E moved this task from Committed to Code Review on the Design-System-Team (Design-System-Sprint) board.Jan 4 2023, 9:13 PM
gerritbot added a comment.Jan 5 2023, 10:11 PM

Change 871238 merged by jenkins-bot:

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

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

Volker_E updated the task description. (Show Details)Jan 5 2023, 10:23 PM
gerritbot added a comment.Jan 10 2023, 11:05 PM

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

PatchDemoBot added a comment.Jan 10 2023, 11:13 PM

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

gerritbot added a comment.Jan 10 2023, 11:44 PM

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

PatchDemoBot added a comment.Jan 12 2023, 7:08 PM

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

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

Volker_E claimed this task.Jan 23 2023, 7:18 AM
gerritbot added a comment.Jan 23 2023, 9:21 PM

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)Jan 23 2023, 10:23 PM
ldelench_wmf triaged this task as High priority.Jan 27 2023, 4:21 PM
Volker_E removed a project: Patch-For-Review.Jan 31 2023, 7:25 AM
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.

Volker_E reassigned this task from Volker_E to bmartinezcalvo.Jan 31 2023, 7:26 AM
Volker_E moved this task from Code Review to Design Sign-Off on the Design-System-Team (Design-System-Sprint) board.
gerritbot added a comment.Jan 31 2023, 11:42 PM

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

gerritbot added a project: Patch-For-Review.Jan 31 2023, 11:42 PM
gerritbot added a comment.Feb 1 2023, 2:16 AM

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

gerritbot added a comment.Feb 1 2023, 4:12 AM

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

Sarai-WMDE claimed this task.Feb 9 2023, 2:09 PM
Volker_E removed a project: Patch-For-Review.Feb 11 2023, 5:02 PM
Sarai-WMDE removed Sarai-WMDE as the assignee of this task.Feb 17 2023, 6:48 PM
Sarai-WMDE added a comment.Feb 17 2023, 6:51 PM

(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)

Volker_E mentioned this in T296998: [Epic] Define the system's typographic styles and scale.Feb 23 2023, 6:35 PM
bmartinezcalvo claimed this task.Feb 27 2023, 4:04 PM
bmartinezcalvo added a comment.EditedFeb 27 2023, 4:25 PM

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?

Volker_E updated the task description. (Show Details)Feb 27 2023, 4:27 PM
Volker_E added a comment.Feb 27 2023, 4:32 PM

@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)

bmartinezcalvo added a comment.EditedFeb 27 2023, 4:41 PM

@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)

gerritbot added a comment.Feb 27 2023, 4:48 PM

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

gerritbot added a project: Patch-For-Review.Feb 27 2023, 4:48 PM
gerritbot added a comment.Feb 27 2023, 4:58 PM

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

Volker_E moved this task from Design Sign-Off to Code Review on the Design-System-Team (Design-System-Sprint) board.Feb 27 2023, 5:17 PM
bmartinezcalvo mentioned this in T330782: Update Card component: supporting icon size.Feb 28 2023, 6:08 PM
gerritbot added a comment.Mar 6 2023, 8:05 PM

Change 892493 merged by jenkins-bot:

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

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

gerritbot added a comment.Mar 6 2023, 8:06 PM

Change 892494 merged by jenkins-bot:

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

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

Catrope closed this task as Resolved.Mar 9 2023, 7:48 PM
Catrope updated the task description. (Show Details)
gerritbot added a comment.Mar 14 2023, 11:41 PM

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

Volker_E moved this task from Code Review to Pending Release on the Design-System-Team (Design-System-Sprint) board.Mar 15 2023, 11:19 AM
Volker_E removed a project: Patch-For-Review.
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL