No @zexon/ui, as cores seguem o modelo shadcn/Tailwind v4: variáveis CSS em :root e .dark (ficheiro packages/ui/src/styles/globals.css) expostas como utilitários Tailwind (bg-background, text-primary, border-border, etc.). Nos componentes do pacote, prefira sempre estes tokens em vez de cores cruas (neutral-500, #fff, …) para respeitar tema claro/escuro e consistência.
Padrão nos componentes
| Papel | Classes Tailwind típicas | Variável subjacente (referência) |
|---|---|---|
| Fundo da página / superfície | bg-background, bg-card, bg-popover, bg-muted | --background, --card, --popover, --muted |
| Texto principal | text-foreground, text-card-foreground | --foreground, --card-foreground |
| Texto secundário | text-muted-foreground | --muted-foreground |
| Ação primária | bg-primary text-primary-foreground | --primary, --primary-foreground |
| Ação secundária / realce suave | bg-secondary, bg-accent | --secondary, --accent |
| Destrutivo | text-destructive, bg-destructive (com opacidade onde fizer sentido) | --destructive |
| Bordas e inputs | border-border, border-input, ring-ring | --border, --input, --ring |
| Sidebar | bg-sidebar, text-sidebar-foreground, border-sidebar-border, bg-sidebar-accent | --sidebar, --sidebar-* |
Combinações comuns: bg-background text-foreground; descrições text-sm text-muted-foreground; estados de foco focus-visible:ring-ring ou ring-ring/50.
Use o botão direito numa amostra da grelha abaixo para copiar o valor de cor computado no browser.
Escalas
Há oito escalas nomeadas no sistema. As amostras usam as cores padrão do Tailwind; em browsers e ecrãs compatíveis, o valor computado pode estar em espaço P3. Use o botão direito numa amostra para copiar o valor bruto (rgb() ou equivalente).
Fundo
Neutro
Céu
Rosa
Âmbar
Esmeralda
Verde-azulado
Roxo
Fundos
Há duas cores de fundo para páginas e componentes. Na maioria dos casos, use o Fundo 1 — sobretudo quando há cor por cima do fundo. Use o Fundo 2 com moderação quando precisar de uma diferenciação sutil entre superfícies.
Fundo 1
Fundo padrão de elementos
Fundo 2
Fundo secundário
Cores 1–3: fundos de componentes
Estas três cores são pensadas para fundos de componentes de interface.
Cor 1
Fundo padrão
Cor 2
Fundo ao passar o mouse
Cor 3
Fundo ativo
Se o fundo padrão do componente for o Fundo 1, pode usar a Cor 1 como fundo de hover e a Cor 2 como fundo ativo. Em elementos pequenos como etiquetas, pode usar a Cor 2 ou a Cor 3 como fundo.
Cores 4–6: contornos
Estas três cores são pensadas para contornos de componentes.
Cor 4
Contorno padrão
Cor 5
Contorno ao passar o mouse
Cor 6
Contorno ativo
Cores 7–8: fundos de alto contraste
Estas duas cores são pensadas para fundos de componentes com alto contraste.
Cor 7
Fundo de alto contraste
Cor 8
Fundo de alto contraste ao passar o mouse
Cores 9–10: texto e ícones
Estas duas cores são pensadas para texto e ícones acessíveis.
Cor 9
Texto e ícones secundários
Cor 10
Texto e ícones principais
A fronteira da sua aplicação
Constrói, escala e protege uma experiência web mais rápida e personalizada com a Zexon.
Saiba maisAnterior:
Próximo: