Hover canônico no editor de mapeamento
Todas as linhas e cards do editor de mapeamento usam o mesmo hover (verde signal a 10% claro / 15% escuro) — visual consistente, foco no dado.
Hover canônico no editor de mapeamento
O editor de mapeamento (
/edi-hub/.../mapping/...) usa um padrão único de hover em todas as áreas interativas: linhas de tabela, cards de destino, dropdowns e modais de regra.Cor canônica
hover:bg-accent — verde signal a 10% no tema claro e 15% no tema escuro. Mesma cor em toda a aplicação para sinalizar "linha sob o cursor".Onde aparece (7 locais no editor)
- Structured view — header de grupo, linhas não-mapeadas, dropdown de mapping action
- Catalog browser — linhas da árvore de catálogo destino
- Version history — entradas do histórico de versões
- Conversion rules dialog — 3 áreas internas (lista, edição, preview)
- Rule drawer — dropdown de seleção de fonte
- Mapping output modal — linhas de mapping preview
- AI suggestions panel — linhas sugeridas
Por que isso importa
Antes dessa padronização havia 30+ arquivos com hover CSS arbitrário (
bg-gray-50, bg-muted/50, custom rgba, etc). O resultado era visual inconsistente: a mesma ação parecia "ativa" em alguns lugares e "passiva" em outros.A unificação:
- Reduz carga cognitiva — usuário aprende "verde claro = está sob meu cursor" uma única vez
- Facilita acessibilidade (contraste calculado para WCAG AA nos dois temas)
- Impede drift visual em PRs futuras (regra documentada em docs/CONVENTIONS.md
Hover canônico)
Para desenvolvedores
Use sempre
hover:bg-accent em qualquer <tr>, <button variant="ghost">, ou área clicável. Não invente cor nova. Se precisar de hover destacado (ex: ação destrutiva), use hover:bg-destructive/10.Histórico de versões
- 1.2.0
Sidebar nav links migrados de hover:bg-sidebar-accent/60 → hover:bg-accent. Drift residual do PR #276. Agora sidebar + header + todos os outros surfaces seguem o token canônico verde signal documentado em CONVENTIONS.md.
5/25/2026 · updated
- 1.1.0
Hovers app-wide: 17 ocorrências de paletas Tailwind hardcoded migradas pra tokens semânticos. 12 hovers neutros → hover:bg-accent, 4 destructive → hover:bg-destructive/10, 2 info → hover:bg-info/10, 1 success → hover:bg-success/10. Mantidos por decisão: archive cinza, template purple (bookmark), import cyan (CTA brand).
5/25/2026 · updated
- 1.0.0
Hover canônico hover:bg-accent (signal green @ 10% light / 15% dark) em todas as <tr> (23 linhas em 20 arquivos) + cards interativos com hover:border-primary/40 hover:bg-accent (13 cards em 8 arquivos). Regra em docs/CONVENTIONS.md com variantes proibidas + exceções.
5/24/2026 · updated