Relatório de Auditoria — Design System
Auditoria realizada em 2026-04-11. Varredura completa do codebase do admin Pedbot em busca de desvios dos tokens do design system.
Distribuição por Tipo
Top Arquivos com Mais Issues
| # | Arquivo | Issues | Tipos |
|---|---|---|---|
| #1 | NewIndex.vuesrc/views/chat-attendance/NewIndex.vue |
136 | |
| #2 | NewChatContact.vuesrc/views/chat-attendance/new-chat/NewChatContact.vue |
52 | |
| #3 | NewChatLogItem.vuesrc/views/chat-attendance/new-chat/NewChatLogItem.vue |
51 | |
| #4 | PixRequestPayment.vuesrc/views/chat-attendance/PixRequestPayment.vue |
20 | |
| #5 | InteractiveMessagePopup.vuesrc/components/attendance/InteractiveMessagePopup.vue |
18 | |
| #6 | NewTransferTicketPopup.vuesrc/views/chat-attendance/NewTransferTicketPopup.vue |
15 | |
| #7 | NewChatKanbanCard.vuesrc/views/chat-attendance/new-chat/NewChatKanbanCard.vue |
12 | |
| #8 | InstanceStatusPopup.vuesrc/views/instances/InstanceStatusPopup.vue |
11 |
Recomendações (8)
Consolidar blues aleatórios em $primary
9 valores de azul diferentes (#0491ff, #1196e1, #279dfb, #2979ff, #3498db, #007bff, #2f90ff, #2563eb, #007bfc) são usados no lugar do $primary do sistema. Total: 31 ocorrências.
NewIndex.vueInputNumber.vueLoginSwap.vueIndex.vueMinimizeOrdersButton.vueDocumentar e limitar z-index extremos
Valores 999999, 9999999 e 1000000 aparecem em 6+ arquivos acima do maior z-index documentado (530001). Causa: conflitos de sobreposição resolvidos com escalada de z-index.
InternalChatLogItem.vueUnlock.vueNewTooltip.vueExpandableImage.vueUpload.vueMigrar plan-usage-widget da paleta Tailwind para tokens Vuexy
plan-usage-widget.vue usa a paleta de cinzas do Tailwind gray (#111827, #9ca3af, #e5e7eb) que não faz parte do design system Pedbot. Componente provavelmente importado de fonte externa.
src/components/attendance/plan-usage-widget.vueTokenizar cores de estado sem equivalente no sistema
Backgrounds semânticos (#fceeee, #eaf9f1, #fff3cd, #f9ebdd, #daefff) são usados em múltiplos componentes mas não têm tokens. São variantes de danger, success e warning com baixa opacidade.
Unlock.vueTwoFactorAuthSetup.vueUpdatePasswordPopup.vuepassword-strong.vueTokenizar cores de kanban/categoria
NewChatKanbanCard.vue usa 3 cores hardcoded (#3d0472, #981ec8, #36719a) para categorias de atendimento. Sem token = impossível de tematizar.
src/views/chat-attendance/new-chat/NewChatKanbanCard.vueRefatorar spacing inline de NewIndex.vue e NewChatLogItem.vue
Os dois maiores arquivos do codebase (NewIndex.vue com 39 e NewChatLogItem.vue com 16 ocorrências) têm spacing inline extensivo com valores fora da escala (5px, 9px, 13px, 15px).
NewIndex.vueNewChatLogItem.vueRemover font-family: Montserrat inline redundante
9 arquivos redeclaram font-family Montserrat inline, mesmo sendo a font global definida no body. São no-ops que adicionam ruído.
NewFinalizePopup.vueIndex.vueChatLogItem.vueNewIndex.vueCorrigir border-radius off-scale
A escala Tailwind vai até rounded-lg (8px) e rounded-full (9999px). Valores como 10px, 12px, 14px, 16px são usados em ~13 lugares sem equivalente no sistema.
InteractiveMessagePopup.vueplan-usage-widget.vueuser componentsIssues de Exemplo
design-system-audit novamente para relatório completo.| Sev. | Tipo | Arquivo | Encontrado | Sugestão / Contexto |
|---|---|---|---|---|
| high | Cores hardcoded | InputNumber.vue:135 |
background-color: #2979ff |
Substituir por rgba(var(--vs-primary), 1) ou background-color: $primary |
| high | Cores hardcoded | LoginSwap.vue:51 |
color: #2f90ff !important |
Substituir por color: rgba(var(--vs-primary), 1) — links devem usar cor primária |
| high | Cores hardcoded | Index.vue:5735 |
background-color: #0491ff |
Substituir por rgba(var(--vs-primary), 1) |
| high | Cores hardcoded | plan-usage-widget.vue:160 |
color: #111827 |
Substituir por color: $headings-color (#2c2c2c) ou color: $dark (#1E1E1E) |
| high | Cores hardcoded | NewTooltip.vue:123 |
background-color: #374151 |
Substituir por background-color: $dark (#1E1E1E) ou rgba(var(--vs-dark), 1) |
| high | Z-index não documentado | InternalChatLogItem.vue:352 |
z-index: 9999999 |
Usar z-index: 530002 se precisar ficar acima do dialog, ou revisar a necessidade |
| high | Z-index não documentado | Unlock.vue:7 |
z-index: 1000000 !important |
Usar z-index: 530001 (vuesax-dialog) ou 530002 para ficar acima |
| high | Z-index não documentado | NewTooltip.vue:135 |
z-index: 999999 |
Usar z-index: 200000 (documentado em vuesax-fixes-tooltip) ou 200001 |
| medium | Cores hardcoded | InteractiveMessagePopup.vue:311 |
color: #5f6470 |
Mapear para $content-color (#626262) ou $grey (#b8c2cc) conforme hierarquia do t |
| medium | Cores hardcoded | NewChatKanbanCard.vue:149 |
style="background:#3d0472;color:#fff;" |
Criar tokens de categoria: categoria-1: #3d0472, categoria-2: #981ec8, categoria |
| medium | Cores hardcoded | ChatContact.vue:18 |
color: #B50000 |
Substituir por color: rgba(var(--vs-danger), 1) — vermelho escuro de alerta = va |
| medium | Cores hardcoded | MinimizeOrdersButton.vue:61 |
background-color: #3498db |
Substituir por rgba(var(--vs-primary), 1) |
| medium | Cores hardcoded | New.vue:647 |
background-color: #052a3b |
Criar token para 'flow-selected': #052a3b ou usar variante escura do $primary |
| medium | Z-index não documentado | CustomersViewSidebar.vue:399 |
z-index: 52010 |
Usar z-index: 52001 ou 52000 (sidebar-full documentado) e verificar se é necessá |
| medium | Z-index não documentado | OrdersMain.vue:853 |
z-index: 51999 |
Usar z-index: 51999 → documenta em tokens.json como 'orders-panel: 51999' ou aju |
| medium | Shadow inline | InteractiveMessagePopup.vue:285 |
box-shadow: 0 14px 32px rgba(16, 24, 40, 0.18) |
Aproximar para shadow-xl (0 20px 25px -5px rgba(0,0,0,0.1)) ou shadow-2xl do des |
| medium | Font family desviado | index.vue:149 |
font-family: Roboto, -apple-system, BlinkMacSystemFont, Sego |
Substituir por font-family: 'Montserrat', Helvetica, Arial, sans-serif |
| medium | Font family desviado | NewFinalizePopup.vue:1156 |
font-family: Montserrat, sans-serif |
Remover todas as declarações font-family: Montserrat inline — já é definido glob |
| medium | Spacing inline | NewIndex.vue:5702 |
margin: 20px 5px 15px 5px |
Usar Tailwind: margin: 1.25rem 0.375rem (aproximação) ou mt-5 mr-1 mb-3 ml-1 (Ta |
| low | Spacing inline | TwoFactor.vue:149 |
padding: 16px |
Usar classe Tailwind p-4 ou CSS var padding: theme('spacing.4') |
| low | Spacing inline | PageTokenSelectionModal.vue:216 |
padding: 12px 16px |
Usar py-3 px-4 se for template, ou manter em <style scoped> (baixa prioridade) |
| info | Cores hardcoded | ChatFlowsList.vue:168 |
background-color: #7367F0 |
Substituir por rgba(var(--vs-primary), 1) para respeitar a cascata do tema |
| info | Cores hardcoded | ButtonFloating.vue:216 |
color: #626262!important |
Substituir por color: $content-color |
| low | Border radius off-scale | InteractiveMessagePopup.vue:282 |
border-radius: 12px |
Usar rounded-lg (.5rem = 8px) ou criar token custom 'br-chat-popup: 12px' |
| medium | Border radius off-scale | plan-usage-widget.vue:195 |
border-radius: 999px |
Usar rounded-full (9999px) — já está no sistema mas valor incorreto (999 vs 9999 |