Spacing
| Token | Value | |
|---|
--px-spacing-xs | 4px | |
--px-spacing-sm | 8px | |
--px-spacing-md | 12px | |
--px-spacing-lg | 16px | |
--px-spacing-xl | 20px | |
--px-spacing-2xl | 24px | |
--px-spacing-3xl | 28px | |
--px-spacing-4xl | 32px | |
--px-spacing-5xl | 36px | |
--px-spacing-6xl | 40px | |
--px-spacing-7xl | 44px | |
--px-spacing-8xl | 48px | |
Radius
none0px
xs2px
sm4px
md8px
lg12px
xl16px
2xl20px
3xl24px
full999px
Shadow
--px-shadow-xs
--px-shadow-sm
--px-shadow-md
--px-shadow-lg
--px-shadow-xl
--px-shadow-2xl
Control heights
| Token | Default | Compact | Comfortable |
|---|
--px-control-height-sm | 32px | 28px | 36px |
--px-control-height-md | 40px | 32px | 44px |
--px-control-height-lg | 48px | 40px | 52px |
--px-control-padding-x-sm | 12px | 8px | 16px |
--px-control-padding-x-md | 16px | 12px | 20px |
--px-control-padding-x-lg | 20px | 16px | 24px |
--px-control-gap | 8px | 4px | 12px |
--px-size-touch-target-min | 44px | 44px | 44px |
--px-control-height-xl | 56px | 48px | 60px |
--px-control-padding-x-xl | 24px | 20px | 28px |