Componentsv2.189.0
Iconsv1.19.0
MCPv0.8.61
Tokensv0.34.3
Spacing
Space, border width, and border radius tokens.
Space
| Name | Underlying Value | |
|---|---|---|
space-0 themeVars.space['0'] | 0px | |
space-025 themeVars.space['025'] | 2px | |
space-050 themeVars.space['050'] | 4px | |
space-075 themeVars.space['075'] | 6px | |
space-100 themeVars.space['100'] | 8px | |
space-125 themeVars.space['125'] | 10px | |
space-150 themeVars.space['150'] | 12px | |
space-175 themeVars.space['175'] | 14px | |
space-200 themeVars.space['200'] | 16px | |
space-225 themeVars.space['225'] | 18px | |
space-250 themeVars.space['250'] | 20px | |
space-275 themeVars.space['275'] | 22px | |
space-300 themeVars.space['300'] | 24px | |
space-350 themeVars.space['350'] | 28px | |
space-400 themeVars.space['400'] | 32px | |
space-450 themeVars.space['450'] | 36px | |
space-500 themeVars.space['500'] | 40px | |
space-600 themeVars.space['600'] | 48px | |
space-800 themeVars.space['800'] | 64px | |
space-900 themeVars.space['900'] | 72px | |
space-1000 themeVars.space['1000'] | 80px | |
space-1200 themeVars.space['1200'] | 96px | |
space-1600 themeVars.space['1600'] | 128px | |
space-2000 themeVars.space['2000'] | 160px | |
space-2400 themeVars.space['2400'] | 192px | |
space-2800 themeVars.space['2800'] | 224px | |
space-3200 themeVars.space['3200'] | 256px | |
space-icon-lg themeVars.space['icon-lg'] | space-40032px | |
space-icon-md themeVars.space['icon-md'] | space-30024px | |
space-icon-sm themeVars.space['icon-sm'] | space-20016px | |
space-icon-v2-lg themeVars.space['icon-v2-lg'] | space-30024px | |
space-icon-v2-md themeVars.space['icon-v2-md'] | space-25020px | |
space-icon-v2-sm themeVars.space['icon-v2-sm'] | space-20016px | |
space-icon-v2-xl themeVars.space['icon-v2-xl'] | space-40032px | |
space-icon-xl themeVars.space['icon-xl'] | space-60048px | |
space-icon-xs themeVars.space['icon-xs'] | space-17514px | |
space-icon-xxs themeVars.space['icon-xxs'] | space-15012px | |
space-padding-button-medium themeVars.space['padding-button-medium'] | space-15012px | |
space-padding-button-small themeVars.space['padding-button-small'] | space-1008px | |
space-padding-header themeVars.space['padding-header'] | space-25020px |
Border
| Name | Underlying Value | |
|---|---|---|
border-0 themeVars.border['0'] | 0px | |
border-width-0125 themeVars.border['width-0125'] | 1px | |
border-width-025 themeVars.border['width-025'] | 2px | |
border-width-050 themeVars.border['width-050'] | 3px |
Border radius
| Name | Underlying Value | |
|---|---|---|
radius-2 themeVars.radius['2'] | 2px | |
radius-3 themeVars.radius['3'] | 3px | |
radius-4 themeVars.radius['4'] | 4px | |
radius-6 themeVars.radius['6'] | 6px | |
radius-8 themeVars.radius['8'] | 8px | |
radius-10 themeVars.radius['10'] | 10px | |
radius-full themeVars.radius['full'] | 9999px | |
radius-button-medium themeVars.radius['button-medium'] | radius-44px | |
radius-button-small themeVars.radius['button-small'] | radius-33px | |
radius-dropdown themeVars.radius['dropdown'] | radius-66px | |
radius-labels themeVars.radius['labels'] | radius-33px |