Create spacing tokens

[vnys]

Create spacing tokens in core tokens set

• Create component level spacing tokens for default density #2912
• Create container spacing tokens for default density #2910
• Create UI Shell spacing tokens for default density #2909
• Write spacing tokens documentation #2911

[vnys]

Since we’re using a hard grid in EDS 2.0, that means that to achieve an optical vertical margin of 16px for example, we sometimes have to use odd numbers like 9 or 11 depending on the line-height and font-size of the text. To make this easier to work with, my initial idea was to use compound tokens with every possible combination of horisontal and vertical padding value, as well as variants that ensure that the baseline is snapped to the nearest grid line and vertically centered text. After generating sets for tight, compressed, comfortable and relaxed line-heights, I ended up with roughly 24.000 lines of tokens 😁 So that obviously won’t work. Back to the drawing board.

[vnys]

Revisiting after the Behind the System presentation from Tokens Studio last week. In the presentation Eric Singhartinger mentions an article by Nathan Curtis where he uses the following terminology:

• Inset (inside component)
• Inset squish (larger horizontal inset than vertical, button for example)
• Inset stretch (smaller horizontal inset than vertical, input field for example)
• Inline (horizontal space between nested components)
• Stack (vertical space between nested components, called “block” in CSS)

[marinalinn]

In order to can join into this task I broke it into the following items. Im currently working in the "Typography" item:

Research: compared how 6 different design system are measuring their spacing and naming it.
Spacing structure: collect all the information related to spacing that we have now.
Structure: divided this in their "minimum" unit to clarify different typologies, definitions and ways to measure. This ended up in Scale, Direction, Position, Sizes, Proportions and Surfaces.
Surfaces:

• Grid: created definitions for Mobile, Tablets and Desktops.
• Components: collected the top-bottom and right-left margins in components and how they behave inline and stack.
• Typography: collecting all the relations we have between font-size and line-height to luckily find a pattern and create a guideline for it 💃

Naming: after figure it out typography guidelines we will be able to name tokens.

[marinalinn]

Figma file: https://www.figma.com/file/B0fimAoET7GXevflKt64o1/Spacing?type=design&node-id=0%3A1&mode=design&t=4JFZT02GbIjWZSHD-1

[vnys]

Update: We’re waiting for feedback from Figma about an estimated time of delivery for typography variables

[marinalinn]

This task is in Todo while we work on the Typography component