Fundamentos
Sombra
betaQuatro degraus de elevação, com valores próprios em cada tema.
Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
Elevação
Quatro degraus. A sombra separa camadas — não decora superfície parada. Se dois elementos não se sobrepõem, provavelmente nenhum dos dois precisa de sombra.
xs
sm
md
lg
Valores no tema claro
Camadas de azul-ardósia com opacidade baixa, empilhadas para dar profundidade sem sujar a cor.
| Token | Valor |
|---|---|
| --shadow-xs | 0 1px 2px rgba(15, 23, 42, 0.04) |
| --shadow-sm | 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06) |
| --shadow-md | 0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 8px rgba(15, 23, 42, 0.06) |
| --shadow-lg | 0 4px 8px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08) |
Valores no tema escuro
No escuro a sombra precisa ser preta e muito mais opaca: o mesmo valor do tema claro simplesmente desaparece.
| Token | Valor |
|---|---|
| --shadow-xs | 0 1px 2px rgba(0, 0, 0, 0.24) |
| --shadow-sm | 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.28) |
| --shadow-md | 0 2px 4px rgba(0, 0, 0, 0.28), 0 4px 8px rgba(0, 0, 0, 0.32) |
| --shadow-lg | 0 4px 8px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.4) |