Page MenuHomePhabricator

Define the design system's sizing and spacing scale
Open, In Progress, HighPublic

Description

Background/Goal

Codex components and layouts will be sized and spaced following a predefined scale derived from the system's base spacing unit (please see previous discussions in T288026).
Once defined, the system's spacing and sizing scale will be translated into size tokens, which will ensure the application of system-compliant dimensions.

This Figma file contains the latest design version of size and spacing tokens.

User stories

As a designer, I need to have access to the system's spacing and sizing scale, so I'm aware of which spaces and sizes I can apply when creating system compliant designs.

Acceptance criteria (or Done)

The size scale (or scales) should provide us with a set of tokens that allow design contributors to:

  • Space elements/components internally
  • Define the space around or between elements
  • Shape the element's heights and widths

In Figma, spacing and sizing tokens will be documented as components that designers will be able to reuse for specification.

Event Timeline

bmartinezcalvo changed the task status from Open to In Progress.Dec 22 2021, 4:32 PM
bmartinezcalvo claimed this task.

As I have been working this last month in the tokens definition and documentation, I prepared this Figma file with all my explorations in the spacing and sizing. We should decide which scale work better for us (A or B) and what nomenclature (nomenclature A/B/C).

https://www.figma.com/file/hcCHhevNA5aHo2D1Gajydc/%F0%9F%8C%88Spacing---Tokens?node-id=0%3A1

Officially requesting feedback on the early proposed approaches to the creation of spacing and sizing tokens for Codex.

Here's an introduction to what spacing and sizing tokens are and how they can be used.

What’s clear is that all Codex’s spacing and sizing tokens should use values from a single scale based on our spacing unit. What’s unclear is which default or combination of spacing CSS units (px, rem, em) would be most suitable.

At the moment, there are two approaches that held up after the first catch-ups:

  • A. Create a token scale that only uses pixel values, and provide a conversion utility that allows Codex developers and token users to adjust units and values in context – Read more
  • B. Create a scale in which each value is provided in all three units of most frequent use (px, em, rem) – Read more

Please note that percentages would be captured in a separate section of the meta scale in all cases.

It is perfectly possible that the proposals fail to take into consideration essential constrains, or to take advantage of better technical approaches. Therefore, this request for comments.

Hey @Sarai-WMDE great work defining the spec sheets, you got hat all global and decision tokens are easy to understand when you read the spec sheets. I've leave you some Figma comments about small things but in general both spec sheets are in my opinion well defined and clear.

About proposals, I think that option B is more complete and will help any user to understand the correlation between px-em-rem if needed.

Regarding nomenclature, we decided to use numerical nomenclature for global tokens but for decision tokens we use names that further define the use of that token (view how we defined the global and decision tokens for colors, shadows or border). Therefore, even if we use this scale for global tokens we should use another nomenclature for decisions (x1, x2, x3.... / XS, S, M, L...).

I'd love to stick with a px token scale, I think the decisive moment here is the documentation though. Most folks think in pixel and will continue to do so. With the decision tokens we can aim for a translation depending on which property between original px and aimed for unit.

STH renamed this task from Define the system's sizing and spacing scale to Define the design system's sizing and spacing scale.Apr 15 2022, 7:04 PM
STH triaged this task as High priority.

Spacing tokens are ready to move to code iteration. Feel free to assign the task to yourself any time @Volker_E

STH renamed this task from Define the design system's sizing and spacing scale to [Ready for Development] Define the design system's sizing and spacing scale.Sun, May 1, 12:44 PM

hei @Volker_E if you give me some guidance on the dev expectation and naming I can help you here.

Change 791479 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] tokens: Add size and spacing design-first tokens

https://gerrit.wikimedia.org/r/791479

Hey @SimoneThisDot I've just stumbled on your message. Would appreciate closer look on patch review and possibly also at latest Figma from you or other devs now that we're coming close.

Assuming that a few sequential patches where we apply the tokens might surface possible issues even better.

Volker_E renamed this task from [Ready for Development] Define the design system's sizing and spacing scale to Define the design system's sizing and spacing scale.Mon, May 16, 4:58 PM