Estilos
Tokens
Reference completa dos semantic tokens (Layer 2) que componentes consomem via utility Tailwind. Para a paleta primitive (--itps-*), veja /estilos/cores.
Arquitetura
Duas camadas
Camada 1
Primitives
Paleta crua OKLCH com escala numérica 50–950. Sem semântica, sem estado. Não usar diretamente em componentes. Documentadas em /estilos/cores.
--itps-primary-900: oklch(0.66 0.18 25.9)
Camada 2
Semantic shadcn
Intenção. Mapeia primitives a roles do sistema (background, foreground, primary, card, popover, etc). Único contrato pra componentes via utility Tailwind.
--primary: var(--itps-primary-900)
Vocabulário ≠ intenção
#EB5E57 é cor.
--primary é intenção.
Trocar primitive sem tocar componente = refactor de 1 linha.
Dark mode = redefinir Layer 2
Semantic redefinida dentro de .dark{...}.
Primitives --itps-* ficam fixos.
Sem state Layer
Hover/focus/active resolvidos via opacity modifier
(bg-primary/90) ou redefinição local.
Reference
Tokens semantic
Cada token tem valor para light e dark mode lado a lado. Quando o valor de dark é omitido (badge inherits light), o token mantém o mesmo valor em ambos os modos — comum para cores de identidade (primary coral, ring).
Surfaces
Backgrounds da aplicação. Pares foreground definem o texto que vai sobre cada superfície. Tokens com `-foreground` sempre passam contraste WCAG AA contra a superfície correspondente.
--background
→ --itps-base-0 / --itps-base-900 Canvas raiz da aplicação (body, layout)
--foreground
→ --itps-base-950 / --itps-base-50 Texto principal sobre background
--card
→ --itps-base-50 / --itps-base-800 Canvas elevado para cards e painéis
--card-foreground
→ --itps-base-950 / --itps-base-50 Texto sobre card
--popover
→ --itps-base-0 / --itps-base-800 Background de popover, dropdown, tooltip
--popover-foreground
→ --itps-base-950 / --itps-base-50 Texto sobre popover
--muted
→ --itps-base-100 / --itps-base-800 Container interativo subtle (chip, tag, hover state)
--muted-foreground
→ --itps-base-700 / --itps-base-300 Texto secundário (label, helper text, timestamp)
Brand
Cores de identidade Sinapse. Primary = coral (CTA principal). Secondary = azul institucional. Accent = neutro esverdeado. Destructive = mesmo coral do primary (single source pra danger).
--primary
→ --itps-primary-900 CTA principal, botões primary, links de destaque
--primary-foreground
→ --itps-base-950 Texto sobre primary (preto = 6.27:1 AA sobre coral)
--secondary
→ --itps-secondary-100 (light) Tinted surface azul institucional
--secondary-foreground
→ --itps-secondary-950 / --itps-secondary-300 Texto sobre secondary
--accent
→ --itps-terciary-100 (light) Tinted surface neutro esverdeado (highlights sutis)
--accent-foreground
→ --itps-base-950 / --itps-base-50 Texto sobre accent
--destructive
→ --itps-primary-900 Botões/áreas de ação destrutiva (delete, remove)
--destructive-foreground
→ --itps-base-950 Texto sobre destructive (preto = 6.27:1 AA)
Feedback
Cores semânticas de status. Em dark mode, success/info usam primitives mais claros para preservar contraste. Warning usa preto sobre amarelo (12.91:1 AAA) em ambos modos.
--danger
→ --itps-primary-900 Alias de destructive — feedback negativo crítico
--danger-foreground
→ --itps-base-950 Texto sobre danger
--success
→ --itps-success-900 / --itps-success-600 Estado de sucesso (verde)
--success-foreground
→ --itps-base-0 / --itps-base-950 Texto sobre success
--warning
→ --itps-alert-900 Atenção / não-crítico (amarelo)
--warning-foreground
→ --itps-base-950 Texto sobre warning (12.91:1 AAA)
--info
→ --itps-secondary-900 / --itps-secondary-400 Mensagens informativas (azul)
--info-foreground
→ --itps-base-0 / --itps-base-950 Texto sobre info
Borders & Inputs
Tokens estruturais para separação visual e estados de foco. `ring` é o anel de focus (acessibilidade) — sempre coral primary.
--border
→ --itps-base-100 / --itps-base-800 Bordas default (cards, dividers, separators)
--input
→ --itps-base-100 / --itps-base-800 Borda de inputs e form controls
--ring
→ --itps-primary-900 Focus ring (a11y) — sempre coral em ambos modos
Charts
5 slots categóricos para dashboards epidemiológicos (vírus, regiões, períodos). Mapeados a primitives — refinar quando 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 (8px). Tokens `rounded-*` são por contexto (card 12px, form pill, circle pill).
--radius Alias shadcn — 8px (default genérico)
--rounded-card Cards, panels, containers — 12px
--rounded-form Buttons em formato pill
--rounded-circle Avatares, badges circulares, dots
Effects
Sombras tintadas azul institucional (#14508F com 10% alpha) em light. Em dark, sombras tintadas viram inúteis — override pra darken via overlay-black 20%. 2-layer composition (sharp close + soft distant).
--shadow-medium Cards, dropdowns small
--shadow-large Overlays, side panels, modals
--shadow-extra-large Pop-ups, floating elements críticos
--blur-small Backdrop blur de overlays e drawers