1882122 - Add remaining space tokens

Status: RESOLVED FIXED

(Toolkit :: Themes, task)

Description

[Jules Simplicio [:jules]]

We've been adding space (margin, padding, gap) design tokens to capture existing patterns. Folks have been relying on these tokens so let's add some remaining patterns.

A reminder that since space tokens are in relative units. The patterns I am listing below apply to in-content only whereas the browser chrome will have slightly different values depending on font size.

• 2px: we have this today in rems as --space-xxsmall
• 4px: we have this today in rems as --space-xsmall
• 8px: we have this today in rems as --space-small
• 32px: we have this today in rems as --space-xlarge

Proposal of more patterns to capture and tweaks:

• 12px (potentially --space-medium) is being used in Shopping, Firefox View, New Tab, panel, Preferences, and more
• 16px (potentially --space-large) is such a common pattern that is pretty much all over the codebase
• 24px (potentially --space-xlarge) is being used in Add-ons and New Tab
• Rename the current --space-xlarge to --space-xxlarge since 24px is taking over xlarge

Comment 1

[Jules Simplicio [:jules]]

Attachment: Bug 1882122 - Add remaining space design tokens r?#desktop-theme-reviewers,#reusable-components-reviewers,#settings-reviewers

Added

• --space-medium
• --space-large

Changed

• --space-xlarge has a new value and the old one is now --space-xxlarge

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/05cc50cadbef
Add remaining space design tokens r=desktop-theme-reviewers,reusable-components-reviewers,settings-reviewers,mstriemer,emilio

Comment 3

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/05cc50cadbef