Shadows & Elevation
Tokens de sombra para criar hierarquia visual e níveis de elevação na interface. Definidos em globals.css.
Custom Tokens
Sombras específicas do design system, extraídas do Figma.
Aa
shadow-glowAvatar rings, category circles
Aa
shadow-pillSearch pill, badges elevados
Aa
shadow-cardProduct cards, info cards
Aa
shadow-elevatedDropdowns, drawers, modals
shadow-glowBrilho suave ao redor de avatares e círculos de categoria
0 0 15px rgba(0, 0, 0, 0.1)shadow-pillSombra compacta para elementos pill-shaped
0 2px 4px rgba(0, 0, 0, 0.15)shadow-cardSombra sutil para cards de conteúdo
0 1px 3px rgba(0, 0, 0, 0.08)shadow-elevatedSombra para elementos flutuantes e elevados
0 4px 12px rgba(0, 0, 0, 0.12)Tailwind Built-in
Sombras padrão do Tailwind, disponíveis em todos os componentes.
Aa
shadow-smAa
shadow-mdAa
shadow-lgGuia de Elevação
| Nível | Token | Quando usar |
|---|---|---|
| 0 - Base | nenhum | Elementos no nível do background (cards flat, seções) |
| 1 - Sutil | shadow-card | Cards com interatividade, hover states |
| 2 - Médio | shadow-pill | Elementos em destaque, pills, floating buttons |
| 3 - Alto | shadow-elevated | Dropdowns, modals, drawers, overlays |
| Especial | shadow-glow | Efeito decorativo (avatares, category nav) |
Como usar
{/* Sombras customizadas */}
<div className="shadow-glow" /> {/* Avatar ring glow */}
<div className="shadow-pill" /> {/* Search pill */}
<div className="shadow-card" /> {/* Product card */}
<div className="shadow-elevated" /> {/* Dropdown */}
{/* Tailwind built-in */}
<div className="shadow-sm" />
<div className="shadow-md" />
<div className="shadow-lg" />