== 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.
| [[ https://www.figma.com/file/hcCHhevNA5aHo2D1Gajydc/Spacing---Tokens?node-id=616%3A3591 | 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.
=== Developer notes
We try to achieve three different success criteria at once here:
- A clear and expandable scale nomenclature for DX
- A way to provide themers with a way to have control over the scale and at the same time the units used in one place. Expected were in web:
-- All `rem`
-- A mix of `px` and `em`
-- A mix of `px` and `rem`
-- (not aimed for to advertise for in regards to a11y, but possible: all `px`)
- A full text-zoom able interface the Wikimedia way – font-sizes and scaled font size box impacting relatively sized properties, like width, height, max-width, max-height.
=== 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.