1890266 - [meta] Implement Grid System to support large screens

Status: RESOLVED FIXED

(Firefox for Android :: Design System and Theming, enhancement, P2)

Description

[Rahul Sainani [:rsainani]]

Figma spec

The goal is to create a token based grid system that makes it easier for us to design screens and develop features that looks good on different screen sizes.

We want to start by:

1. Create a scale similar to the figma spec and see if it works.
2. Choose one arbitrary “primary” screen that will use the tokens for flexible device support.
3. Tweak values for optimal experience.
4. When that works well, choose a secondary screen and apply the same tokens to see if it successfully “automatically” updates it to support the agreed-upon sizes without additional designer guidance.

Comment 1

[Noah Bond [:007]]

Adding notes from today's token checkpoint.

The notes from the previous checkpoints can be found here https://bugzilla.mozilla.org/show_bug.cgi?id=1905449#c2

Comment 2

[Noah Bond [:007]]

Closing this meta as the major milestone of work with the Grid system (turned size & space tokens) has been completed. The new tokens will be updated to 1.0 over in Bug 1931986 and Bug 1931988.

For any future acorn updates, please file a ticket under the relevant sub meta in Bug 1927631