design tokens

sombras

Sombra é a propriedade usada para representar profundidade por meio do bloqueio da luz.

índice

Sombra

Sombra é a propriedade usada para representar profundidade através do bloqueio da luz por algum objeto opaco. Simular sombra no design da interface ajuda a criar um aspecto material aos elementos da tela e a fornecer indícios da elevação em que eles se encontram.

base tokens

Os base tokens de sombra estão divididos em diferentes propriedades, listadas a seguir.

shadow position

O token shadow position define a direção da sombra no espaço.

shadow opacity

O token shadow opacity define a opacidade da sombra.

shadow blur

O token shadow blur define difusão, ou borrão, da sombra.

shadow color

O token shadow color define a cor da sombra.

theme tokens

Os themes tokens de sombra são formados pela combinação de vários base tokens, criando uma aparência realista de elevação aos objetos.

uso

A sombra $shadow-low é usada para representar objetos mais próximos as superfícies, enquanto a $shadow-higher é usada para elementos mais afastados. Além disso, para destacar que um objeto é interativo, ao passar o mouse por ele, o elemento sofrerá uma elevação de um nível em sua sombra.

Modal simples com título e dois campos de texto. Um dos campos está em foco
com uma lista suspensa aberta. No canto direito estão dois botões, um deles no
seu estado de descanso e o outro elevado pela presença do cursor em cima dele.
Os elementos estão númerados e explicação segue na legenda da imagem.
  1. Uso do token $shadow-high em uma lista suspensa.
  2. Botão no estado de descanso não utiliza sombra.
  3. Botão com cursor por cima utiliza o token $shadow-low.
  4. Modal utiliza o token $shadow-higher.