Themes
Por que importa
Temas adaptam o produto à identidade visual da marca, garantindo contraste adequado e experiência consistente em todas as telas. Ajustar tokens core evita intervenção manual em cada componente.
Forma canônica (sintaxe mínima)
Tema customizado no bloco de estilos
Por quê: define cores principais e de texto, base para qualquer variação temática.
Padrões de uso
Paleta da marca aplicada a planos de assinatura
Quando usar: alinhar botões, cards e raio às diretrizes da marca. Por quê: assegura que elementos críticos sigam o branding aprovado.
Tema escuro com contraste garantido
Quando usar: oferecer modo escuro ou alto contraste sem alterar cada componente. Por quê: melhora acessibilidade e cansaço visual com poucas mudanças.
Tokens customizados combinados com componentes
Quando usar: criar tokens específicos e referenciá-los dentro de componentes compostos. Por quê: facilita reaproveitamento dos mesmos valores em diferentes blocos.
Erros comuns (Do/Don’t)
❌ Errado — Estilo local sem tema
✅ Correto — Token global aplicado
Por quê: tokens globais evitam divergências entre telas.
❌ Errado — Baixo contraste
✅ Correto — Contraste forte
Por quê: contraste insuficiente compromete leitura e acessibilidade.
Referências cruzadas
Relacionados
Styles Block: local onde os tokens são declarados.Button: responde diretamente às variáveis de cor.Card: utiliza tokens de fundo e raio do tema.Dashboard: demonstra a aplicação de temas em telas analíticas.
Composições recomendadas
- Themes + Styles Block → separa tokens padrão e variações específicas.
- Themes + Component Composition → garante consistência em componentes complexos.
- Themes + Modal → controla contraste em overlays.
Tema aplicado junto com componente composto
Por quê: o tema global define aparência enquanto o componente compõe conteúdo reutilizável.