Tokens de design

Design tokens é uma estratégia para gerenciar sistemas de design.

Ela abstrai todos os elementos reutilizáveis em um sistema de design (como cores, fontes, espaçamentos, etc.) em variáveis independentes, permitindo gerenciamento e aplicação uniformes em todo o sistema de design.

O mdui usa propriedades CSS personalizadas globais para implementar design tokens. Isso significa que você pode modificar globalmente a aparência de todos os componentes do mdui simplesmente alterando as propriedades CSS personalizadas. Além disso, para seus próprios estilos, é recomendado priorizar a referência às propriedades CSS personalizadas para garantir que seus estilos estejam alinhados com os componentes do mdui e também para que seus estilos sejam atualizados junto com a cor dinâmica.

Cores

O mdui fornece um conjunto de propriedades CSS personalizadas para o modo claro e outro para o modo escuro. No modo claro, o nome da propriedade CSS personalizada é --mdui-color-{name}-light, onde {name} é o nome da cor; no modo escuro, é --mdui-color-{name}-dark.

Além disso, o mdui fornece um conjunto de propriedades CSS personalizadas chamadas --mdui-color-{name}. Essas propriedades referenciam --mdui-color-{name}-light no modo claro e --mdui-color-{name}-dark no modo escuro, portanto, alternam automaticamente de acordo com o modo claro ou escuro atual.

Se você precisar modificar os valores de algumas propriedades CSS personalizadas de cor, precisará modificar ambas as propriedades --mdui-color-{name}-light e --mdui-color-{name}-dark. Ao ler as propriedades CSS personalizadas, use diretamente a propriedade --mdui-color-{name}.

O valor da propriedade CSS personalizada são os três valores RGB separados por ,. O exemplo a seguir demonstra o uso das propriedades CSS personalizadas de cor:

/* Modificar o valor da cor primary */
:root {
  --mdui-color-primary-light: 103, 80, 164;
  --mdui-color-primary-dark: 208, 188, 255;
}

/* Definir o fundo do elemento foo como primary */
.foo {
  background-color: rgb(var(--mdui-color-primary));
}

/* Definir o fundo do elemento bar como primary com 0.8 de opacidade */
.bar {
  background-color: rgba(var(--mdui-color-primary), 0.8);
}

Se você precisar criar um esquema de cores totalmente novo, é recomendado usar a função setColorScheme, que gera um esquema de cores completo a partir de um valor de cor fornecido.

Cantos arredondados

O mdui fornece 7 tamanhos diferentes de cantos arredondados. O exemplo a seguir demonstra como usar essas propriedades CSS personalizadas de cantos arredondados:

/* Modificar o tamanho do canto extra-small */
:root {
  --mdui-shape-corner-extra-small: 0.3rem;
}

/* Definir o canto do elemento foo como extra-small */
.foo {
  border-radius: var(--mdui-shape-corner-extra-small);
}

Tipografia

O mdui fornece 15 estilos de texto diferentes, incluindo Display large, Display medium, Display small, Headline large, Headline medium, Headline small, Title large, Title medium, Title small, Label large, Label medium, Label small, Body large, Body medium, Body small.

Exemplo de uso:

/* Modificar o estilo de texto Body large */
:root {
  --mdui-typescale-body-large-line-height: 1.6rem;
  --mdui-typescale-body-large-size: 1.2rem;
  --mdui-typescale-body-large-tracking: 0.01rem;
  --mdui-typescale-body-large-weight: 400;
}

/* Definir o estilo de texto do elemento foo como Body large */
.foo {
  line-height: var(--mdui-typescale-body-large-line-height);
  font-size: var(--mdui-typescale-body-large-size);
  letter-spacing: var(--mdui-typescale-body-large-tracking);
  font-weight: var(--mdui-typescale-body-large-weight);
}

Opacidade da camada de estado

Alguns componentes mdui adicionam uma camada semitransparente sobre eles durante a interação. Por exemplo, o componente <mdui-button> exibe uma camada semitransparente quando o mouse está sobre ele, quando está focado, pressionado ou arrastado. Você pode modificar as propriedades CSS personalizadas para ajustar a opacidade dessas camadas.

Exemplo de uso:

/* Modificar a opacidade das camadas de estado */
:root {
  --mdui-state-layer-hover: 0.08;
  --mdui-state-layer-focus: 0.12;
  --mdui-state-layer-pressed: 0.12;
  --mdui-state-layer-dragged: 0.16;
}

Elevação (sombras)

Alguns componentes mdui têm efeitos de sombra para simular uma sensação de elevação na página. Você pode modificar as propriedades CSS personalizadas para ajustar os efeitos de sombra dos componentes.

Exemplo de uso:

/* Modificar a sombra de nível 1 */
:root {
  --mdui-elevation-level1:
    0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%),
    0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%);
}

/* Definir a sombra do elemento foo como nível 1 */
.foo {
  box-shadow: var(--mdui-elevation-level1);
}

Animações

As curvas de easing e durações das animações nos componentes mdui podem ser configuradas por meio de propriedades CSS personalizadas.

Exemplo de uso:

/* Modificar a curva de easing standard e a duração short1 */
:root {
  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mdui-motion-duration-short1: 40ms;
}

/* Definir a transição do elemento foo para usar a curva de easing standard e a duração short1 */
.foo {
  transition: all var(--mdui-motion-duration-short1)
    var(--mdui-motion-easing-standard);
}

Pontos de quebra responsivos

O mdui fornece uma série de pontos de quebra responsivos que podem ser configurados por meio de propriedades CSS personalizadas. Exemplo de uso:

/* Modificar o valor do ponto de quebra sm */
:root {
  --mdui-breakpoint-sm: 560px;
}

É importante notar que essas propriedades CSS personalizadas não podem ser usadas em media queries CSS. O exemplo a seguir está incorreto:

/* Uso incorreto. Não é possível usar propriedades CSS personalizadas em media queries */
@media (min-width: var(--mdui-breakpoint-sm)) {
}

Se você precisar fazer verificações de pontos de quebra em JavaScript, use a função breakpoint.