Pular para o conteúdo principal

Tokens de Design​

Os Design Tokens são valores abstratos que representam decisões de design em elementos fundamentais do sistema, como cores, tipografia, espaçamentos e sombras.

Eles garantem consistência visual e melhor experiência do usuário em toda a aplicação. Além disso, centralizam as definições de estilo, facilitando manutenção, escalabilidade e adaptação a diferentes plataformas e contextos.

O que é um Token de Design?​

Um Token de Design é uma unidade mínima que define uma propriedade de design (ex.: cor, tipografia ou espaçamento).

A vantagem de usá-los está na centralização e automação: ao modificar o valor de um token, todos os componentes que o utilizam são atualizados automaticamente, promovendo padronização e agilidade.

Anatomia de um Token de Design​

Anatomia de um Design Token

Um token de design segue uma nomenclatura padronizada, que facilita sua identificação:

  1. Namespace (Sistema): Identificação do design system.
    • No caso do Opala DS: opl.
  2. Categoria: Agrupamento de tokens com características semelhantes.
    • Ex.: color, font, spacing.
  3. Propriedade: Elemento da UI ao qual o token é aplicado.
    • Ex.: border, background, shadow.
  4. Modificadores: Detalhes adicionais sobre finalidade ou estado.
    • Ex.: hover, active, emphasis.
    • Nem todo token possui modificador.

Tipos de Dados em Tokens​

🔤 String (Texto)​

Armazena valores textuais.
Exemplo: font-family: "Roboto", sans-serif.

🔢 Número (Number)​

Valores numéricos simples.
Exemplo: font-size: 16, line-height: 1.5.

📐 Medida (Dimension)​

Valores numéricos com unidade de medida.
Exemplo: padding: 16px, border-radius: 4px, spacing: 1.5rem.

🎨 Cor (Color)​

Valores de cor em formatos como hex, rgb, rgba ou hsl.
Exemplo: primary-color: #FF5733, secondary-color: rgba(255, 87, 51, 0.8).

✅ Booleano (Boolean)​

Valores verdadeiro/falso para propriedades binárias.
Exemplo: is-rounded: true.

🔗 Links Úteis​