Pular para o conteúdo principal

Estrutura Geral dos Tokens​

No Opala DS, os tokens são organizados de forma modular e hierárquica, permitindo gerenciar múltiplas marcas, temas e variações de design com flexibilidade.
Abaixo, estão descritas as principais categorias e como os sets se relacionam.

G_BASE​

O nível mais fundamental do design system. Contém os sets que servem de base para todas as configurações, independentemente da marca ou tema.

  • Primitives: Valores básicos e universais (cores, tamanhos, tipografia fundamental). Servem como referência para todos os outros sets.
  • Foundations: Derivados dos Primitives. Definem tamanhos, espaçamentos, margens e preenchimentos, garantindo uma estrutura padronizada e consistente.

BRANDS​

Organiza os tokens específicos para cada marca. Atualmente, apenas a marca OPALA está configurada, mas a estrutura suporta múltiplas marcas.

Dentro de cada marca, temos:

  • BASE: Define a identidade visual da marca.

    • Colors: Paleta principal e secundária da marca.
    • Typeset: Configurações tipográficas da marca (famílias de fonte, pesos e estilos).

  • THEMES: Permite criar variações visuais (ex.: claro e escuro) sem duplicar configurações.

    • LIGHT (Opala): Tema atual configurado, subdividido em:
      • SCHEME: Definições de cor específicas do tema.
        • Backgrounds: Cores de fundo para superfícies e componentes.
        • Foregrounds: Cores de primeiro plano (textos, ícones, etc.).

PATTERNS​

Dentro de BRANDS, o grupo Patterns reúne estilos e interações compartilhados entre todas as marcas.
Funciona como uma biblioteca de padrões comuns, garantindo uma experiência consistente.

  • States: Modificadores de estado (hover, focus, selected).
  • Backgrounds: Padrões de cores de fundo aplicáveis globalmente.
  • Contents: Estilos para elementos de primeiro plano (ícones, textos), garantindo contraste e acessibilidade.
  • Typography: Estilos tipográficos reutilizáveis em múltiplas marcas e temas.

Estrutura de tokens no Tokens Studio

Resumo Visual da Hierarquia​

Hierarquia de Tokens

cuidado

Uso dos Patterns

Os valores definidos em Patterns (States, Backgrounds, Contents, Typography) devem ser aplicados exclusivamente aos componentes.
Esses valores derivam diretamente de Primitives, Foundations ou Themes, garantindo que qualquer mudança na base seja automaticamente propagada.

✅ Vantagem: evita ajustes manuais e assegura consistência global.
⚠️ Recomendação: sempre utilize os tokens de Patterns ao aplicar estilos e estados nos componentes.