Configuração Multitema em Design Systems: Suportando Variações Visuais com Tokens

Introdução

Seu produto precisa de um modo escuro? Sua empresa possui múltiplas marcas com identidades visuais distintas, mas que compartilham a mesma funcionalidade? Construir interfaces separadas para cada variação visual é ineficiente e difícil de manter. A solução elegante oferecida pelos Design Systems modernos é a Configuração Multitema (Theming). Através de uma arquitetura inteligente de Design Tokens, podemos desacoplar a aparência visual da estrutura e comportamento dos componentes, permitindo que a mesma interface se adapte a diferentes temas com a troca de um conjunto de variáveis. Como implementar essa capacidade poderosa em nosso Design System?

O que é Configuração Multitema?

Configuração Multitema é a arquitetura e o processo que permitem a um Design System suportar e aplicar múltiplos temas visuais a um conjunto único de componentes de UI. Um tema é essencialmente uma coleção de valores de Design Tokens que definem uma aparência específica.

Os principais conceitos são:

Arquitetura de Tokens: Utilizar uma estrutura de tokens em camadas (global, alias, componente) é fundamental. Os temas geralmente são aplicados alterando os valores dos tokens de alias ou semânticos (ex: color.background.primary, color.text.accent), que por sua vez mapeiam para tokens globais (ex: color.blue.500).
Conjuntos de Tokens (Token Sets): Definir coleções separadas de valores de tokens para cada tema suportado (ex: theme-light.json, theme-dark.json, theme-brand-a.json). Ferramentas como Tokens Studio permitem gerenciar esses conjuntos facilmente.
Mecanismo de Troca: Implementar uma forma na aplicação front-end para carregar e aplicar o conjunto de tokens do tema selecionado. Isso pode envolver:
- Carregar diferentes arquivos CSS com variáveis de tema.
- Aplicar classes CSS no elemento raiz ( ou ) que ativam variáveis CSS específicas do tema.
- Utilizar provedores de tema em frameworks como React (ex: ThemeProvider do Styled Components ou Material UI).
Componentes Agnósticos ao Tema: Os componentes do Design System devem ser construídos para consumir os tokens semânticos (ex: color.background.primary), sem ter conhecimento direto de qual tema está ativo. A troca de tema altera o valor do token, e o componente reflete a mudança automaticamente.

O resultado é a capacidade de mudar drasticamente a aparência de uma interface sem tocar na lógica ou estrutura dos componentes.

Por que é importante?

Suportar múltiplos temas oferece diversas vantagens:

Flexibilidade de Marca (Branding): Permite que o mesmo DS sirva a múltiplas marcas ou produtos com identidades visuais distintas (white-labeling).
Modo Escuro (Dark Mode): Facilita a implementação de temas claro e escuro, uma preferência comum dos usuários e importante para acessibilidade e conforto visual.
Acessibilidade: Possibilita a criação de temas de alto contraste para usuários com baixa visão.
Consistência Estrutural: Mantém a consistência na funcionalidade, layout e comportamento dos componentes, mesmo com aparências diferentes.
Eficiência de Manutenção: Evita a duplicação de componentes para cada variação visual. Uma correção no componente base beneficia todos os temas.
Experiência do Usuário Personalizada: Permite que os usuários escolham o tema de sua preferência (quando aplicável).
Escalabilidade: Facilita a adição de novos temas no futuro.

Como aplicar na prática?

Implementar a configuração multitema envolve design, ferramentas e código:

Planejar a Arquitetura de Tokens: Definir uma estrutura de tokens semânticos robusta que possa ser mapeada para diferentes valores em cada tema. Evitar usar tokens globais diretamente nos componentes.
Usar Ferramentas Adequadas:
- Tokens Studio (Figma): Usar o recurso “Themes” para definir múltiplos conjuntos de tokens (ex: global, light, dark) e mapeá-los. Sincronizar esses conjuntos com um repositório ou exportá-los como JSONs separados.
- Style Dictionary: Configurar o build para processar os diferentes conjuntos de tokens e gerar saídas específicas para cada tema ou uma saída que suporte a troca de temas (ex: variáveis CSS dentro de seletores de tema).
Definir os Temas: Criar os conjuntos de tokens para cada tema desejado (claro, escuro, marca A, etc.), definindo os valores específicos para cores, tipografia, etc.
Implementar a Troca de Tema no Front-end: Escolher uma estratégia:
- Variáveis CSS com Seletor: Gerar variáveis CSS para cada tema dentro de um seletor específico (ex: [data-theme="dark"]). Trocar o tema aplicando o atributo data-theme ao elemento ou .
- Arquivos CSS Separados: Gerar um arquivo CSS por tema e carregá-lo dinamicamente.
- ThemeProvider (Frameworks): Usar os mecanismos de tematização nativos de bibliotecas como Styled Components, Emotion, Material UI, Chakra UI, passando o objeto de tema apropriado.
Construir Componentes Agnósticos: Garantir que os componentes consumam os tokens semânticos (ex: var(--color-background-primary) ou theme.colors.background.primary) e não valores fixos ou tokens globais.
Testar Todos os Temas: Verificar se todos os componentes funcionam e parecem corretos em cada tema suportado.
Documentar os Temas: Documentar os temas disponíveis, como ativá-los e como os tokens se mapeiam em cada um.

Exemplo (CSS Variables com Seletor):

/* tokens-light.css (gerado pelo Style Dictionary) */
:root {
  --color-background-primary: #ffffff;
  --color-text-primary: #000000;
}

/* tokens-dark.css (gerado pelo Style Dictionary) */
[data-theme="dark"] {
  --color-background-primary: #121212;
  --color-text-primary: #ffffff;
}

/* Uso no componente */
.my-component {
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
}

// Troca de tema
document.documentElement.setAttribute("data-theme", "dark");

Ferramentas ou frameworks relacionados

Tokens Studio (Figma Tokens): Ferramenta chave para gerenciar múltiplos conjuntos de tokens e temas no Figma.
Style Dictionary: Essencial para transformar os conjuntos de tokens em código específico para cada tema/plataforma.
CSS Custom Properties (Variáveis CSS): Mecanismo fundamental para implementar a troca de temas na web.
Frameworks de UI com Suporte a Theming (Material UI, Chakra UI, Styled Components, Emotion): Oferecem componentes ThemeProvider e utilitários para facilitar a aplicação de temas em aplicações React/Vue.
PostCSS: Pode ser usado no processo de build para manipular CSS, potencialmente auxiliando na geração de temas.

Erros comuns

Arquitetura de Tokens Inadequada: Não usar tokens semânticos (alias), tornando a tematização difícil ou impossível sem refatoração.
Valores Fixos no Componente: Componentes usando cores ou fontes fixas em vez de consumir tokens.
Vazamento de Estilos entre Temas: Estilos de um tema afetando outro devido a má configuração ou encapsulamento.
Não Testar Todos os Temas: Lançar um novo componente ou mudança sem verificar sua aparência e funcionalidade em todos os temas suportados.
Complexidade Excessiva: Criar uma estrutura de temas muito complexa ou granular demais para as necessidades reais.
Falta de Documentação: Não documentar claramente como os temas funcionam, como alternar entre eles ou quais tokens são afetados.
Inconsistência na Aplicação: Diferentes partes da aplicação usando mecanismos diferentes para aplicar o tema.

Conclusão

A configuração multitema é uma capacidade avançada e poderosa dos Design Systems modernos, possibilitada por uma arquitetura de tokens bem planejada e ferramentas de automação como Tokens Studio e Style Dictionary. Ao permitir que a aparência visual seja alterada dinamicamente sem modificar a estrutura dos componentes, o theming oferece flexibilidade incomparável para suportar modos escuros, múltiplas marcas ou outras variações visuais. Implementar theming requer um investimento inicial em planejamento e configuração, mas os benefícios a longo prazo em termos de consistência, eficiência de manutenção e capacidade de adaptação tornam essa uma estratégia valiosa para muitos produtos e organizações.

Referências

Tokens Studio Docs. Themes Overview. Recuperado de https://docs.tokens.studio/manage-themes/themes-overview
Tokens Studio Docs. Themes that switch. Recuperado de https://docs.tokens.studio/manage-themes/simple-switch-guide
Style Dictionary. Homepage. Recuperado de https://amzn.github.io/style-dictionary/
Banks, Danny. (2021). Dark Mode with Style Dictionary. dbanks.design. Recuperado de https://dbanks.design/blog/dark-mode-with-style-dictionary/
Twisted, Always. (2025). Creating Multiple Themes with Style Dictionary. Recuperado de https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-10.html
W3C Design Tokens Community Group. Homepage. Recuperado de https://design-tokens.github.io/community-group/ (Referência sobre padronização de tokens, relevante para theming)