Elevação
Os tokens de elevação são utilizados para indicar o posicionamento dos diversos elementos da interface no eixo Z, dividindo os componentes em camadas. Por padrão todos os componentes estão dispostos na mesma camada.
Recomendações
- Os tokens de elevação foram criados imaginando o seu uso em componentes de referência (backdrop, toolbar, modal, etc.). Evite utilizar os tokens em "classes de componente" muito distintas daquelas pras quais foram projetados.
Observações
- Ao passar o mouse sobre a ilustração de exemplo na tabela, será mostrada a comparação dos tokens e seus níveis de elevação.
Tokens
Os tokens de elevação são variáveis scss e estão descritos abaixo.
Token | Valor | Exemplo |
|---|---|---|
$z-index-sunk | -1000 | - toast - tooltip - modal - sidesheet - backdrop - base - sunk |
$z-index-base | 0 | - toast - tooltip - modal - sidesheet - backdrop - base - sunk |
$z-index-backdrop | 1000 | - toast - tooltip - modal - sidesheet - backdrop - base - sunk |
$z-index-toolbar | 2000 | - toast - tooltip - modal - sidesheet - backdrop - base - sunk |
$z-index-sidesheet | 2500 | - toast - tooltip - modal - sidesheet - backdrop - base - sunk |
$z-index-modal | 3000 | - toast - tooltip - modal - sidesheet - backdrop - base - sunk |
$z-index-tooltip | 4000 | - toast - tooltip - modal - sidesheet - backdrop - base - sunk |
$z-index-toast | 5000 | - toast - tooltip - modal - sidesheet - backdrop - base - sunk |