Closed Bug 1838939 Opened 2 years ago Closed 1 years ago

Add typography design tokens

Categories

(Toolkit :: Themes, enhancement)

Product:
Toolkit
Component:
Themes
Type:
enhancement

Tracking

()

Status:
RESOLVED FIXED
Milestone:
119 Branch
Tracking Flags:
Tracking Status
firefox119 --- fixed

People

(Reporter: jules, Assigned: jules)

References

(Blocks 1 open bug)

Details

(Whiteboard: [recomp])

Attachments

(8 files)

Bug 1838939 - Part 1: Add typography design tokens r?hjones,mstriemer,tgiles
48 bytes, text/x-phabricator-request
Details | Review
Bug 1838939 - Part 2: Use typography helpers in about:logins r?#credential-management-reviewers
48 bytes, text/x-phabricator-request
Details | Review
Bug 1838939 - Part 3: Use headings in various about pages r?#desktop-theme-reviewers
48 bytes, text/x-phabricator-request
Details | Review
Bug 1838939 - Part 4: Use design system typography in preferences r?#settings-reviewers
48 bytes, text/x-phabricator-request
Details | Review
Bug 1838939 - Part 5: Use design system typography in addons r?#extension-reviewers
48 bytes, text/x-phabricator-request
Details | Review
Bug 1838939 - Part 6: Use design system typography in protection and panels r?#desktop-theme-reviewers
48 bytes, text/x-phabricator-request
Details | Review
Bug 1838939 - Part 7: Use design system typography in moz-toggle r?#recomp-reviewers
48 bytes, text/x-phabricator-request
Details | Review
Bug 1838939 - Part 8: Tweak message bar css due to typography and small button changes r?mstriemer
48 bytes, text/x-phabricator-request
Details | Review

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.

Whiteboard: fidefe-reusable-components
Whiteboard: fidefe-reusable-components → [fidefe-reusable-components]
Attachment #9341138 - Attachment description: WIP: Bug 1838939 - Putting up this patch to get remaining typography in-content design tokens added. I also set up the utility typography classes as a point for discussion. → WIP: Bug 1838939 - Add in-content heading font-size design tokens and font-weight design tokens
Attachment #9341138 - Attachment description: WIP: Bug 1838939 - Add in-content heading font-size design tokens and font-weight design tokens → WIP: Bug 1838939 - Add typography design tokens r?hjones,mstriemer,tgiles
Summary: Add in-content heading font-size design tokens and font-weight design tokens → Add typography design tokens
Attachment #9341138 - Attachment description: WIP: Bug 1838939 - Add typography design tokens r?hjones,mstriemer,tgiles → Bug 1838939 - Add typography design tokens r?hjones,mstriemer,tgiles
Attachment #9341138 - Attachment description: Bug 1838939 - Add typography design tokens r?hjones,mstriemer,tgiles → Bug 1838939 - Part 1: Add typography design tokens r?hjones,mstriemer,tgiles

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

Pushed by mstriemer@mozilla.com: 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

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

Flags: needinfo?(jules)
Pushed by mstriemer@mozilla.com: 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
Flags: needinfo?(jules)
Regressions: 1854551
Regressions: 1854930
Depends on: 1872788
Regressions: 1879564
Whiteboard: [fidefe-reusable-components] → [recomp]
Regressions: 1884672
No longer regressions: 1884672
Regressions: 1921128
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: