1838939 - Add typography design tokens

Status: RESOLVED FIXED

(Toolkit :: Themes, enhancement)

Description

[Jules Simplicio [:jules] - out of office December 7–29]

We should add our remaining font sizes, and our font weights under in-content typography tokens in design-tokens-brand.css.

We've had teams ask for our standard type scale, so we should host the remaining source of truth in tokens so that everyone can have access to our type scale, and avoid unique type styling decisions in-content.

Since there are a few inconsistencies in heading size application between preferences.css, common-shared.css, activity-stream.css, firefoxview.css, protections.css, and therefore no standard, we've been following the in-content type scale set by preferences.css:

Heading 1: 1.46rem (~22px)
Heading 2: 1.14rem (~17px)

Font weights needed:
Heading 1 styling uses 300, Heading 2 uses 600, and our default font weight is 400.

Comment 1

[Jules Simplicio [:jules] - out of office December 7–29]

Attachment: Bug 1838939 - Part 1: Add typography design tokens r?hjones,mstriemer,tgiles

Comment 2

[Jules Simplicio [:jules] - out of office December 7–29]

Attachment: Bug 1838939 - Part 2: Use typography helpers in about:logins r?#credential-management-reviewers

Depends on D182115

Comment 3

[Jules Simplicio [:jules] - out of office December 7–29]

Attachment: Bug 1838939 - Part 3: Use headings in various about pages r?#desktop-theme-reviewers

Depends on D186031

Comment 4

[Jules Simplicio [:jules] - out of office December 7–29]

Attachment: Bug 1838939 - Part 4: Use design system typography in preferences r?#settings-reviewers

Depends on D186032

Comment 5

[Jules Simplicio [:jules] - out of office December 7–29]

Attachment: Bug 1838939 - Part 5: Use design system typography in addons r?#extension-reviewers

Depends on D186033

Comment 6

[Jules Simplicio [:jules] - out of office December 7–29]

Attachment: Bug 1838939 - Part 6: Use design system typography in protection and panels r?#desktop-theme-reviewers

Depends on D186034

Comment 7

[Jules Simplicio [:jules] - out of office December 7–29]

Attachment: Bug 1838939 - Part 7: Use design system typography in moz-toggle r?#recomp-reviewers

Depends on D186035

Comment 8

[Jules Simplicio [:jules] - out of office December 7–29]

Attachment: Bug 1838939 - Part 8: Tweak message bar css due to typography and small button changes r?mstriemer

In part 1, I am helping standardize our line heights, and this has affected our text based inputs and buttons. I am proposing we stick to a standard of 28px for the min-height of small buttons. Both the line height and min-height changes has affected how buttons display on the Infobar, per Tim's review in part 1. In this change I do some small tweaks to make sure the Infobar supports a 28px tall small button. The button changes are a consequence of the line height typography tokens. Since we have a few different heights going on that slightly fluctuate between values, I figured I'd help standardize our button and small button heights. The small button min-height change, which is applicable to this part, improves the accessibility of our buttons due to28px being a bigger hit target than the button on the Infobar today, 24.5px

Depends on D186036

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b67f33657dc4
Part 1: Add typography design tokens r=hjones,mstriemer,desktop-theme-reviewers,dao,reusable-components-reviewers
https://hg.mozilla.org/integration/autoland/rev/221a4fc5492e
Part 2: Use typography helpers in about:logins r=credential-management-reviewers,desktop-theme-reviewers,dao,mtigley
https://hg.mozilla.org/integration/autoland/rev/6fb9170b1bc5
Part 3: Use headings in various about pages r=desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/c0ba65d79200
Part 4: Use design system typography in preferences r=settings-reviewers,desktop-theme-reviewers,mconley,dao
https://hg.mozilla.org/integration/autoland/rev/8e69b0238271
Part 5: Use design system typography in addons r=extension-reviewers,desktop-theme-reviewers,robwu,dao
https://hg.mozilla.org/integration/autoland/rev/a296d5def7c8
Part 6: Use design system typography in protection and panels r=desktop-theme-reviewers,reusable-components-reviewers,dao,hjones
https://hg.mozilla.org/integration/autoland/rev/94174e2d7373
Part 7: Use design system typography in moz-toggle r=reusable-components-reviewers,desktop-theme-reviewers,dao,hjones
https://hg.mozilla.org/integration/autoland/rev/bfb8bcb267c5
Part 8: Tweak message bar css due to typography and small button changes r=desktop-theme-reviewers,reusable-components-reviewers,dao,hjones

Comment 10

[Narcis Beleuzu [:NarcisB]]

Backed out for dt failure on browser_styleeditor_fission_switch_target.js

Backout link: https://hg.mozilla.org/integration/autoland/rev/feb01960f7e10a66b10928129bf6e623142eee16
Log link: https://treeherder.mozilla.org/logviewer?job_id=429684668&repo=autoland&lineNumber=6550

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3e70bbbc530d
Part 1: Add typography design tokens r=hjones,mstriemer,desktop-theme-reviewers,dao,reusable-components-reviewers
https://hg.mozilla.org/integration/autoland/rev/12661dcdb47e
Part 2: Use typography helpers in about:logins r=credential-management-reviewers,desktop-theme-reviewers,dao,mtigley
https://hg.mozilla.org/integration/autoland/rev/bace4dd5c836
Part 3: Use headings in various about pages r=desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/8709a5dc0358
Part 4: Use design system typography in preferences r=settings-reviewers,desktop-theme-reviewers,mconley,dao
https://hg.mozilla.org/integration/autoland/rev/db2a07894d25
Part 5: Use design system typography in addons r=extension-reviewers,desktop-theme-reviewers,robwu,dao
https://hg.mozilla.org/integration/autoland/rev/d7c87724e11c
Part 6: Use design system typography in protection and panels r=desktop-theme-reviewers,reusable-components-reviewers,dao,hjones
https://hg.mozilla.org/integration/autoland/rev/776274de26bb
Part 7: Use design system typography in moz-toggle r=reusable-components-reviewers,desktop-theme-reviewers,dao,hjones
https://hg.mozilla.org/integration/autoland/rev/77fcb77e6acc
Part 8: Tweak message bar css due to typography and small button changes r=desktop-theme-reviewers,reusable-components-reviewers,dao,hjones

Comment 12

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/3e70bbbc530d
https://hg.mozilla.org/mozilla-central/rev/12661dcdb47e
https://hg.mozilla.org/mozilla-central/rev/bace4dd5c836
https://hg.mozilla.org/mozilla-central/rev/8709a5dc0358
https://hg.mozilla.org/mozilla-central/rev/db2a07894d25
https://hg.mozilla.org/mozilla-central/rev/d7c87724e11c
https://hg.mozilla.org/mozilla-central/rev/776274de26bb
https://hg.mozilla.org/mozilla-central/rev/77fcb77e6acc