Capítulo 04 · Sistema de temas
Tokens semânticos
Todos os componentes consomem variáveis CSS semânticas (não cores literais). OapplyTheme()injeta os valores em runtime e o Tailwind v4 resolve via @theme inline.
Modo atual: system · resolvido para light
Trocar de marca em runtime
Cada botão chama applyTheme() com um BrandTheme distinto. O tema "Derivada" valida que a paleta institucional Uttara não está hardcoded no pacote.
Pares semânticos
background / foreground
Texto sobre superfície tokenizada. Funciona em light e dark sem ajuste manual.
card / card-foreground
Texto sobre superfície tokenizada. Funciona em light e dark sem ajuste manual.
primary / primary-foreground
Texto sobre superfície tokenizada. Funciona em light e dark sem ajuste manual.
secondary / secondary-foreground
Texto sobre superfície tokenizada. Funciona em light e dark sem ajuste manual.
muted / muted-foreground
Texto sobre superfície tokenizada. Funciona em light e dark sem ajuste manual.
accent / accent-foreground
Texto sobre superfície tokenizada. Funciona em light e dark sem ajuste manual.
destructive / destructive-foreground
Texto sobre superfície tokenizada. Funciona em light e dark sem ajuste manual.
Accent contexts
Mecanismo genérico que substitui as antigas "Visions". Aplique a classe.accent-<id>num escopo da árvore para que os tokens --accent-*sejam sobrescritos.
.accent-infra
Superfície de destaque contextual
.accent-institutional
Superfície de destaque contextual
.accent-commercial
Superfície de destaque contextual
.accent-operations
Superfície de destaque contextual
.accent-tools
Superfície de destaque contextual