Tokens
Referência completa dos tokens semânticos que componentes consomem via utilitários Tailwind. Para paletas primitivas, veja /estilos/cores.
Arquitetura
Duas camadas
Camada 1
Primitivas
Paleta crua do Figma com escala numérica 50-950 e valores para claro e escuro. Não usar diretamente em componentes. Documentadas em /estilos/cores.
--itps-primary-900: #EB5E57Camada 2
Semânticos e compatibilidade shadcn
Intenção de interface. Mapeia primitivas a papéis do sistema como
brand,
background,
foreground,
primary e
card.
É o contrato dos componentes via utilitários Tailwind.
--brand: var(--itps-primary-900)
--primary: var(--itps-secondary-900)Vocabulário ≠ intenção
#EB5E57 é cor.
--brand é intenção visual de marca.
Trocar primitiva sem tocar componente concentra a mudança em uma linha.
Modo escuro = primitivas por estado
A classe .dark troca os valores de
--itps-*; semânticos só sobrescrevem pares de contraste.
Sem camada extra de estado
Estados como hover, foco e ativo usam modificadores de opacidade
(bg-primary/90) ou regra local documentada.
Superfícies
Fundos da aplicação. Pares `-foreground` definem o texto que vai sobre cada superfície e preservam contraste WCAG AA contra o fundo correspondente.
--background
→ --itps-base-0 Canvas raiz da aplicação (body e layout)
--foreground
→ --itps-base-950 Texto principal sobre background
--card
→ --itps-base-50 Canvas elevado para cards e painéis
--card-foreground
→ --itps-base-950 Texto sobre card
--popover
→ --itps-base-0 Fundo de popover, dropdown e tooltip
--popover-foreground
→ --itps-base-950 Texto sobre popover
--muted
→ --itps-base-100 Contêiner sutil para chip, tag e estado hover
--muted-foreground
→ --itps-base-800 Texto secundário: label, ajuda e metadado
Marca
`brand` é o coral de identidade visual Sinapse. `primary` permanece azul para compatibilidade shadcn em ações principais de bibliotecas externas.
--brand
→ --itps-primary-900 Acentos visuais de marca, títulos editoriais e detalhes Sinapse
--brand-foreground
→ --itps-base-0 Texto sobre brand
--primary
→ --itps-secondary-900 Ações principais em shadcn/ui, shadcn-vue e ports compatíveis
--primary-foreground
→ --itps-base-0 Texto sobre primary azul
--secondary
→ --itps-secondary-50 / --itps-secondary-25 Superfície azul institucional sutil
--secondary-foreground
→ --itps-secondary-900 Texto sobre secondary
--accent
→ --itps-terciary-100 Superfície neutra esverdeada para destaques sutis
--accent-foreground
→ --itps-base-950 Texto sobre accent
--destructive
→ --itps-primary-900 Botões e áreas de ação destrutiva
--destructive-foreground
→ --itps-base-950 / --itps-base-0 Texto sobre destructive
Feedback
Cores semânticas de status. Em modo escuro, foregrounds críticos usam base-0 para preservar contraste. Warning usa base-0 sobre amarelo em modo escuro.
--danger
→ --itps-primary-900 Alias de destructive para feedback negativo crítico
--danger-foreground
→ --itps-base-950 / --itps-base-0 Texto sobre danger
--success
→ --itps-success-900 Estado de sucesso (verde)
--success-foreground
→ --itps-base-0 Texto sobre success
--warning
→ --itps-alert-900 Atenção / não-crítico (amarelo)
--warning-foreground
→ --itps-base-950 / --itps-base-0 Texto sobre warning (11.85:1 AAA em light)
--info
→ --itps-secondary-900 Mensagens informativas (azul)
--info-foreground
→ --itps-base-0 Texto sobre info
Bordas e campos
Tokens estruturais para separação visual e estados de foco. `ring` é o anel de foco acessível e usa o azul institucional.
--border
→ --itps-base-100 Bordas padrão: cards, divisores e separadores
--input
→ --itps-base-200 Borda de inputs e form controls
--ring
→ --itps-secondary-900 Focus ring acessível em azul institucional
Gráficos
Cinco slots categóricos para dashboards epidemiológicos: vírus, regiões e períodos. Mapeados a primitivas e refináveis quando os dashboards forem implementados.
--chart-1
→ --itps-secondary-900 Série 1 — azul institucional
--chart-2
→ --itps-success-800 Série 2 — verde
--chart-3
→ --itps-alert-900 Série 3 — amarelo
--chart-4
→ --itps-primary-900 Série 4 — coral
--chart-5
→ --itps-secondary-500 Série 5 — azul claro
Radius
Curvaturas semânticas por uso. `radius` é o alias shadcn de 8px. Tokens `rounded-*` são por contexto: card 12px, form pílula e circle pílula.
--radius Alias shadcn — 8px (default genérico)
--rounded-card Cards, painéis e contêineres — 12px
--rounded-form Botões e controles em formato pílula
--rounded-circle Avatares, badges circulares e pontos de status
Efeitos
Sombras tintadas por `secondary/opacity/950-10%` em claro e escuro. Composição em duas camadas: próxima nítida e distante suave.
--shadow-medium Cards e dropdowns pequenos
--shadow-large Overlays, painéis laterais e modais
--shadow-extra-large Pop-ups e elementos flutuantes críticos
--blur-small Desfoque de fundo em overlays e drawers