Elevation
Sistema de sombras que comunica profundidade e hierarquia visual entre os elementos da interface. Usa o prefixo --db1-shadow-*.
O sistema de elevação do Makuco comunica profundidade e hierarquia visual por meio de sombras CSS. Quanto maior a sombra, mais alto o elemento aparece em relação ao fundo. Cada nível é expresso pela variável CSS --db1-shadow-{N}dp e é composto por três camadas de sombra sobrepostas que criam profundidade realista.
Visão Geral
A elevação segue uma escala de 10 níveis nomeados em dp (density-independent pixels), do mais sutil (1dp) ao mais pronunciado (24dp). Use elevação para comunicar hierarquia — não como decoração. Um elemento com elevação maior atrai mais atenção e deve ter uma razão visual e de interação para isso.
Não pule níveis sem motivo. Uma diferença de elevação muito brusca entre elementos adjacentes gera sensação de inconsistência.
Escala visual
Quando usar
| Nível | Token CSS | Contexto típico de uso |
|---|---|---|
| 1dp | --db1-shadow-1dp | Sombra quase imperceptível. Cards informativos, painéis de conteúdo e listas em estado de repouso. |
| 2dp | --db1-shadow-2dp | Elevação padrão para cards. Ponto de partida para a maioria dos componentes de superfície. |
| 3dp | --db1-shadow-3dp | Estado hover de cards e itens de lista — sinaliza interatividade sem mudança de cor. |
| 4dp | --db1-shadow-4dp | Tooltips, popovers e menus dropdown leves. Separação visual clara sem ser intrusivo. |
| 6dp | --db1-shadow-6dp | Elemento flutuante de média importância — botões flutuantes menores, painéis recolhíveis. |
| 8dp | --db1-shadow-8dp | Sidebars, menus de contexto e painéis que coexistem com o conteúdo da página. |
| 9dp | --db1-shadow-9dp | Diferenciação sutil entre dois elementos sobrepostos no mesmo nível hierárquico. |
| 12dp | --db1-shadow-12dp | Diálogos e modais secundários. Elemento claramente domina a hierarquia visual da tela. |
| 16dp | --db1-shadow-16dp | Painéis flutuantes e drawers laterais. Conteúdo sobreposto com peso significativo na navegação. |
| 24dp | --db1-shadow-24dp | Elevação máxima. Modais críticos, overlays de bloqueio, componentes com ação obrigatória antes de qualquer outra interação. |
Acessibilidade
Elevação é um recurso puramente visual — usuários com baixa visão ou que utilizam modo de alto contraste podem não perceber as diferenças de sombra. Por isso, nunca use elevação como único meio de comunicar hierarquia ou separação entre elementos. Complemente sempre com cor de fundo, borda ou espaçamento.
Para elementos sobrepostos (modais, drawers, menus), certifique-se de que o conteúdo por baixo perde foco visual e de teclado — a sombra sozinha não impede a interação com elementos abaixo na camada.