Accueil Explorer Aide
Connexion
star_oraculo
/
frontend
2
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Aborescence: d521db44ef
Branches Tags
frontend
/
docs
/
style.md

style.md 3.9 KB
Historique Raw

Guia de Cores — Light e Dark Mode

Sistema de cor

  • Sempre prefira os tokens semânticos definidos em src/styles/tailwind.css (@theme) — eles já resolvem light/dark sozinhos, sem precisar de dark: manual: bg-background, text-foreground, text-muted-foreground, bg-card, bg-popover, border-border, bg-primary/text-primary-foreground, bg-secondary, bg-destructive, border-input, ring-ring.
  • gray-* com dark: manual só quando não existir token equivalente (ex.: variações pontuais de opacidade, estados de hover muito específicos). Nesse caso, modo escuro é via classe .dark no elemento <html>.
  • A paleta abyss-950/abyss-900/abyss-800/abyss-700 (também em @theme) é reservada para painéis elevados no dark mode (sidebar, login) — não usar hex solto para esse tom de azul-marinho quase-preto.
  • Breakpoints nomeados no @theme: --breakpoint-compact (520px), --breakpoint-whatsapp (760px), --breakpoint-layout (980px) — geram variantes compact:/max-compact:, whatsapp:/max-whatsapp:, layout:/max-layout:. Não usar max-[980px] etc. soltos no meio do código.

Mapeamento de cores

Elemento Classe recomendada Equivalente antigo (evitar)
Texto primário text-foreground text-gray-900 dark:text-gray-100
Texto secundário/muted text-muted-foreground text-gray-500 dark:text-gray-400
Fundo de card/painel bg-card ou bg-background/70 —
Bordas padrão border-border (já é o border default de qualquer elemento) border-gray-200 dark:border-gray-700
Hover de link hover:text-foreground hover:text-gray-900 dark:hover:text-white

Casos que ainda não têm token semântico direto (ex.: bordas tracejadas de empty state, chips de tipo de arquivo) continuam usando gray-* com par dark: manual — não force um token que não existe só por consistência.

Backgrounds

Elemento Light Dark
Fundo da página bg-background (auto) (auto)
Barra do topo bg-primary dark:bg-black
Cabeçalho de card bg-gray-100/50 dark:bg-secondary/50
Painel elevado (sidebar/login) bg-white/70 dark:bg-abyss-900

Padrão de uso

<!-- Títulos -->
<h2 class="text-foreground">Título</h2>

<!-- Texto descritivo -->
<p class="text-muted-foreground">Descrição</p>

<!-- Links -->
<a class="text-muted-foreground hover:text-foreground hover:underline">Link</a>

<!-- Bordas/separadores (border-border já é o padrão implícito de qualquer `border`) -->
<section class="border-t">

Erros

  • text-red-600 dark:text-red-400 — texto de erro (não há token semântico destructive-foreground de texto solto no tema atual, usar a paleta red-* diretamente).
  • Use a prop error do BaseInput para exibir mensagens de erro nos formulários.

Design system

A UI é construída sobre o design system próprio (src/components/base/) + Tailwind CSS v4. Não há PrimeVue no projeto (a dependência tailwindcss-primeui foi removida — era resíduo não utilizado).

  • BaseButton: variantes primary/secondary/ghost/danger, já tratam light/dark.
  • BaseInput: campo com label, hint e error integrados.
  • BaseBadge: variantes default/success/danger/info/warning/violet.
  • BaseDropdown: select customizado acessível.
  • StatCard: cartão de métrica/KPI.
  • BaseIcon: wrapper sobre ícones do Lucide (lucide-vue-next) — preferir a SVG inline copiado.
  • BaseModal: casca de modal com focus trap e fechamento por Esc/backdrop.
  • EmptyState: bloco padronizado de "nada encontrado".
  • Spinner: indicador de carregamento padronizado.

Detalhes de props e exemplos em components.md. Para cores que não vêm dos componentes base, preferir os tokens semânticos da tabela acima; só cair para gray-* + dark: quando não houver token equivalente.