Foundations
Sizing
Sizing tokens set component and element dimensions. Semantic sizing (general/*, icon/*) references the core sizing ramp.
Core
| Token | Value | Preview |
|---|---|---|
--moments-core-sizing-0 | 0rem = 0px | |
--moments-core-sizing-25 | 0.063rem = 1.01px | |
--moments-core-sizing-50 | 0.125rem = 2px | |
--moments-core-sizing-100 | 0.25rem = 4px | |
--moments-core-sizing-150 | 0.375rem = 6px | |
--moments-core-sizing-200 | 0.5rem = 8px | |
--moments-core-sizing-250 | 0.625rem = 10px | |
--moments-core-sizing-300 | 0.75rem = 12px | |
--moments-core-sizing-350 | 0.875rem = 14px | |
--moments-core-sizing-400 | 1rem = 16px | |
--moments-core-sizing-500 | 1.25rem = 20px | |
--moments-core-sizing-600 | 1.5rem = 24px | |
--moments-core-sizing-700 | 1.75rem = 28px | |
--moments-core-sizing-800 | 2rem = 32px | |
--moments-core-sizing-900 | 2.25rem = 36px | |
--moments-core-sizing-1000 | 2.5rem = 40px | |
--moments-core-sizing-1100 | 2.75rem = 44px | |
--moments-core-sizing-1200 | 3rem = 48px | |
--moments-core-sizing-1400 | 3.5rem = 56px | |
--moments-core-sizing-1600 | 4rem = 64px | |
--moments-core-sizing-2000 | 5rem = 80px | |
--moments-core-sizing-2400 | 6rem = 96px | |
--moments-core-sizing-2800 | 7rem = 112px | |
--moments-core-sizing-3200 | 8rem = 128px | |
--moments-core-sizing-3600 | 9rem = 144px | |
--moments-core-sizing-4000 | 10rem = 160px | |
--moments-core-sizing-4400 | 11rem = 176px | |
--moments-core-sizing-4800 | 12rem = 192px | |
--moments-core-sizing-5200 | 13rem = 208px | |
--moments-core-sizing-5600 | 14rem = 224px | |
--moments-core-sizing-6000 | 15rem = 240px | |
--moments-core-sizing-6400 | 16rem = 256px | |
--moments-core-sizing-7200 | 18rem = 288px | |
--moments-core-sizing-8000 | 20rem = 320px | |
--moments-core-sizing-9600 | 24rem = 384px |
Semantic → core
Icon
| Semantic token | Points to (core) | Resolved value | Preview |
|---|---|---|---|
--moments-semantic-sizing-icon-sm | --moments-core-spacing-300 | 0.75rem = 12px | |
--moments-semantic-sizing-icon-md | --moments-core-spacing-400 | 1rem = 16px | |
--moments-semantic-sizing-icon-lg | --moments-core-spacing-500 | 1.25rem = 20px | |
--moments-semantic-sizing-icon-xl | --moments-core-spacing-600 | 1.5rem = 24px | |
--moments-semantic-sizing-icon-2xl | --moments-core-spacing-800 | 2rem = 32px |
General
| Semantic token | Points to (core) | Resolved value | Preview |
|---|---|---|---|
--moments-semantic-sizing-general-4xs | --moments-core-sizing-100 | 0.25rem = 4px | |
--moments-semantic-sizing-general-3xs | --moments-core-sizing-200 | 0.5rem = 8px | |
--moments-semantic-sizing-general-xs | --moments-core-sizing-300 | 0.75rem = 12px | |
--moments-semantic-sizing-general-md | --moments-core-sizing-400 | 1rem = 16px | |
--moments-semantic-sizing-general-lg | --moments-core-sizing-500 | 1.25rem = 20px | |
--moments-semantic-sizing-general-xl | --moments-core-sizing-600 | 1.5rem = 24px | |
--moments-semantic-sizing-general-2xl | --moments-core-sizing-700 | 1.75rem = 28px | |
--moments-semantic-sizing-general-3xl | --moments-core-sizing-800 | 2rem = 32px | |
--moments-semantic-sizing-general-4xl | --moments-core-sizing-900 | 2.25rem = 36px | |
--moments-semantic-sizing-general-5xl | --moments-core-sizing-1000 | 2.5rem = 40px | |
--moments-semantic-sizing-general-6xl | --moments-core-sizing-1200 | 3rem = 48px |