1905449 - [Grid System] Implenent the initial spacing and sizing token system

Status: RESOLVED FIXED

(Fenix :: Design System and Theming, task, P1)

Description

[Noah Bond [:007]]

As part of this ticket:

• Implement the spacing and sizing token system.
• Add them to the FirefoxTheme API.
• Create a compose preview which allows the user to toggle between and preview the different window size breakpoints.

Requirements and notes can be found here.

There will be two systems of tokens:

1. Spacing
2. Sizing

We will support three window size breakpoints to match an Android API (see in the Notes; this is from WindowSizeClass):
- Small - <600
- Medium - 600-840
- Large - 840+

Spacing tokens will define the whitespace and arrangement between visual elements.
- There will be a scale for each window size breakpoint.
- The scale will be tee-shirt sizes (XXS - XXL), and it will derived from a base value unique to each window size breakpoint.
- Small would hypothetically use 8dp as its base value and Medium would use 16dp.
- The XXS - XXL scale would then be mathematically calculated from these values.

Sizing tokens will define the height and/or width of visual elements with static dimensions.
- One tee-shirt scale will be used for all window sizes (XXXS - XXXL)

Comment 1

[Noah Bond [:007]]

Attachment: Bug 1905449 - Implement the first iteration of the size and space tokens

Comment 2

[Gabriel Luong [:gl] (ΦωΦ)]

The stuff in the patch is based off of:

• This original proposal from Rahul
• How we handle colors
• How desktop handles sizing and spacing

Notes from our first meeting
Notes from our second meeting
Notes from our third meeting

Other inspirations:

• https://spectrum.adobe.com/page/design-tokens/#Size-tokens

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b3727b89d194
Implement the first iteration of the size and space tokens r=android-reviewers,gl,calu

Comment 4

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/b3727b89d194