Tokens
Source: packages/shared/tokens/primitives.css
Border Radius
| Token | Value |
|---|---|
--radius-none | 0px |
--radius-base-sm | 4px |
--radius-base-md | 8px |
--radius-base-lg | 12px |
--radius-base-xl | 16px |
Semantic aliases (from semantic.css)
| Alias | Maps to |
|---|---|
--radius / --radius-sm | --radius-base-sm (4px) |
--radius-md | --radius-base-md (8px) |
--radius-lg | --radius-base-lg (12px) |
--radius-xl | --radius-base-xl (16px) |
Border Width
| Token | Value |
|---|---|
--border-width-0 | 0px |
--border-width-1 | 1px |
--border-width-2 | 2px |
--border-width-4 | 4px |
Shadows
| Token | Value |
|---|---|
--shadow-none | none |
--shadow-sm | 0px 1px 2px 0px rgba(0,0,0,0.05) |
--shadow-md | 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1) |
--shadow-lg | 0px 4px 6px -1px rgba(0,0,0,0.1), 0px 2px 4px -2px rgba(0,0,0,0.1) |
--shadow-xl | 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1) |
--shadow-card | 0px 0px 0px 1px gray-200, 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1) |
Semantic shadow aliases
| Alias | Maps to |
|---|---|
--shadow-card | Card outer border + shadow |
--shadow-dropdown | --shadow-lg |
--shadow-dialog | --shadow-xl |
Blur
| Token | Value |
|---|---|
--blur-none | 0px |
--blur-sm | 2px |
--blur-md | 10px |
--blur-lg | 16px |
--blur-xl | 24px |
Transitions
Duration
| Token | Value |
|---|---|
--duration-fast | 100ms |
--duration-normal | 200ms |
--duration-slow | 300ms |
--duration-slower | 500ms |
Easing
| Token | Value |
|---|---|
--ease-in | cubic-bezier(0.4, 0, 1, 1) |
--ease-out | cubic-bezier(0, 0, 0.2, 1) |
--ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) |
Z-Index
| Token | Value | Usage |
|---|---|---|
--z-0 | 0 | Default stacking |
--z-10 | 10 | Slightly elevated content |
--z-20 | 20 | Navigation, hero content |
--z-30 | 30 | Sticky elements |
--z-40 | 40 | Overlays |
--z-50 | 50 | Modals, dialogs |
--z-100 | 100 | Toast notifications |