Spacing Tokens
Which tokens do we use for layout?
- Spacing
- Z-index
- etc etc
Spacing Tokens
Spacing tokens are used to provide consistent spacing between content in your app.
| Token | Value | Example |
|---|---|---|
--dsds-spacing-3x-small | 0.125rem (2px) | |
--dsds-spacing-2x-small | 0.25rem (4px) | |
--dsds-spacing-x-small | 0.5rem (8px) | |
--dsds-spacing-small | 0.75rem (12px) | |
--dsds-spacing-medium | 1rem (16px) | |
--dsds-spacing-large | 1.25rem (20px) | |
--dsds-spacing-x-large | 1.75rem (28px) | |
--dsds-spacing-2x-large | 2.25rem (36px) | |
--dsds-spacing-3x-large | 3rem (48px) | |
--dsds-spacing-4x-large | 4.5rem (72px) |
Z-Index Tokens
Z-indexes are used to stack components in a logical manner.
| Token | Value |
|---|---|
--dsds-z-index-drawer | 700 |
--dsds-z-index-dialog | 800 |
--dsds-z-index-dropdown | 900 |
--dsds-z-index-toast | 950 |
--dsds-z-index-tooltip | 1000 |