Shape

Esses tokens garantem consistência na forma dos elementos em todas as interfaces. São compostos por espaçamentos, sombras, opacidades e o eixo Z (z-index).

Exemplos

API

Z-Index

Temos as seguintes classes de z-index disponíveis:

$z-indexes: (
  'base': 1,
  /* Qualquer tipo de overlay que pegue a tela toda */
  'overlay': 5000,
  /* Menus, dropdowns, popup - todos os elementos que ocupam um pedaço pequeno da tela */
  'popup': 6000,
  /* Modals, Dialogs, Confirmações, Drawers */
  'modal': 8000,
  /* Notificações, alertas, toasts */
  'toast': 9000
);

Z-Index: Classes

Formato: .c-z-{nome}

<div class="c-z-modal">
  Minha Modal
</div>

Z-Index: Variáveis CSS

Formato: z-index: var(--c-z-index-{nome});

.modal {
  z-index: var(--c-z-index-modal);
}