Foundations
Border Radius
Corner-radius tokens. Semantic radii (xs…4xl, full) reference the core radius ramp.
Core
| Token | Value | Preview |
|---|---|---|
--moments-core-border-radius-0 | 0rem = 0px | |
--moments-core-border-radius-25 | 0.125rem = 2px | |
--moments-core-border-radius-50 | 0.25rem = 4px | |
--moments-core-border-radius-75 | 0.375rem = 6px | |
--moments-core-border-radius-100 | 0.5rem = 8px | |
--moments-core-border-radius-150 | 0.75rem = 12px | |
--moments-core-border-radius-200 | 1rem = 16px | |
--moments-core-border-radius-300 | 1.5rem = 24px | |
--moments-core-border-radius-400 | 2rem = 32px | |
--moments-core-border-radius-full | 62500rem = 1000000px |
Semantic → core
| Semantic token | Points to (core) | Resolved value | Preview |
|---|---|---|---|
--moments-semantic-border-radius-0 | --moments-core-border-radius-0 | 0rem = 0px | |
--moments-semantic-border-radius-xs | --moments-core-border-radius-25 | 0.125rem = 2px | |
--moments-semantic-border-radius-sm | --moments-core-border-radius-50 | 0.25rem = 4px | |
--moments-semantic-border-radius-md | --moments-core-border-radius-75 | 0.375rem = 6px | |
--moments-semantic-border-radius-lg | --moments-core-border-radius-100 | 0.5rem = 8px | |
--moments-semantic-border-radius-xl | --moments-core-border-radius-150 | 0.75rem = 12px | |
--moments-semantic-border-radius-2xl | --moments-core-border-radius-200 | 1rem = 16px | |
--moments-semantic-border-radius-3xl | --moments-core-border-radius-300 | 1.5rem = 24px | |
--moments-semantic-border-radius-full | --moments-core-border-radius-full | 62500rem = 1000000px | |
--moments-semantic-border-radius-4xl | --moments-core-border-radius-400 | 2rem = 32px |