Foundations
Shadows
The shadow system creates visual hierarchy using elevation levels.
Elevation Scale
0
shadow-none Flat elements 1
shadow-sm Cards, panels 2
shadow-md Dropdowns 3
shadow-lg Modals 4
shadow-xl Toasts Usage by Component
| Component | Default | Hover |
|---|---|---|
| Card | shadow-sm | shadow-md |
| Button | none | shadow-sm |
| Dropdown | shadow-md | - |
| Modal | shadow-lg | - |
| Toast | shadow-xl | - |
CSS Variables
shadows.css css
:root {
--shadow-none: none;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1);
}