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.

412
Total
18
High
147
Medium
183
Low
64
Info

Distribuição por Tipo

Cores hardcoded
148
Cores em style attr
70
Spacing inline
62
Z-index não documentado
42
Shadow inline
40
Font size fora da escala
28
Border radius off-scale
13
Font family desviado
9

Top Arquivos com Mais Issues

#ArquivoIssuesTipos
#1 NewIndex.vue
src/views/chat-attendance/NewIndex.vue
136 cor, spacing, z-index, font-family
#2 NewChatContact.vue
src/views/chat-attendance/new-chat/NewChatContact.vue
52 cor, shadow, spacing
#3 NewChatLogItem.vue
src/views/chat-attendance/new-chat/NewChatLogItem.vue
51 cor, spacing, z-index, shadow
#4 PixRequestPayment.vue
src/views/chat-attendance/PixRequestPayment.vue
20 z-index
#5 InteractiveMessagePopup.vue
src/components/attendance/InteractiveMessagePopup.vue
18 cor, shadow, radius
#6 NewTransferTicketPopup.vue
src/views/chat-attendance/NewTransferTicketPopup.vue
15 cor, spacing
#7 NewChatKanbanCard.vue
src/views/chat-attendance/new-chat/NewChatKanbanCard.vue
12 cor, spacing
#8 InstanceStatusPopup.vue
src/views/instances/InstanceStatusPopup.vue
11 cor

Recomendações (8)

ALTA

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.

Ação: Substituir todos por rgba(var(--vs-primary), 1) ou $primary nas declarações SCSS
NewIndex.vueInputNumber.vueLoginSwap.vueIndex.vueMinimizeOrdersButton.vue
ALTA

Documentar 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.

Ação: Mapear a hierarquia real de sobreposição e criar tokens z-index para cada camada de overlay
InternalChatLogItem.vueUnlock.vueNewTooltip.vueExpandableImage.vueUpload.vue
ALTA

Migrar 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.

Ação: Mapear: #111827 → $headings-color, #9ca3af → $grey, #e5e7eb → $grey-light
src/components/attendance/plan-usage-widget.vue
MÉDIA

Tokenizar 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.

Ação: Adicionar em tokens.json: danger-bg: rgba(var(--vs-danger), 0.08), success-bg: rgba(var(--vs-success), 0.08), warning-bg: rgba(var(--vs-warning), 0.08)
Unlock.vueTwoFactorAuthSetup.vueUpdatePasswordPopup.vuepassword-strong.vue
MÉDIA

Tokenizar cores de kanban/categoria

NewChatKanbanCard.vue usa 3 cores hardcoded (#3d0472, #981ec8, #36719a) para categorias de atendimento. Sem token = impossível de tematizar.

Ação: Criar tokens: category-purple: #3d0472, category-violet: #981ec8, category-teal: #36719a em tokens.json
src/views/chat-attendance/new-chat/NewChatKanbanCard.vue
MÉDIA

Refatorar 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).

Ação: Substituir por classes Tailwind. Valores 5px/15px não têm equivalente — aproximar para 4px/16px (p-1/p-4)
NewIndex.vueNewChatLogItem.vue
BAIXA

Remover 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.

Ação: Remover todas as declarações font-family: Montserrat em <style scoped> — herda do global automaticamente
NewFinalizePopup.vueIndex.vueChatLogItem.vueNewIndex.vue
BAIXA

Corrigir 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.

Ação: Adicionar token br-md: 10px em border_radius.app_specific no tokens.json e substituir ocorrências
InteractiveMessagePopup.vueplan-usage-widget.vueuser components

Issues de Exemplo

Mostrando 25 issues de exemplo de um total de 412. Execute a skill 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