Tokens
Spacing
Spacing scale tokens
Scale
| Token | Value |
|---|---|
--hui-spacing-0 | 0px |
--hui-spacing-1 | 0.25rem (4px) |
--hui-spacing-2 | 0.5rem (8px) |
--hui-spacing-3 | 0.75rem (12px) |
--hui-spacing-4 | 1rem (16px) |
--hui-spacing-5 | 1.25rem (20px) |
--hui-spacing-6 | 1.5rem (24px) |
--hui-spacing-8 | 2rem (32px) |
--hui-spacing-10 | 2.5rem (40px) |
--hui-spacing-12 | 3rem (48px) |
--hui-spacing-16 | 4rem (64px) |
Usage
.my-element {
padding: var(--hui-spacing-4);
margin-bottom: var(--hui-spacing-6);
gap: var(--hui-spacing-2);
}Spacing tokens are shared between light and dark themes.