Skip to content

Typography Audit #3305

Open
Open
Typography Audit#3305
Assignees
cesaroeduardo
Labels
themingVisual theme modifications.
@cesaroeduardo

Description

@cesaroeduardo
cesaroeduardo
opened on Feb 23, 2026

Typography Audit — Azion Console Kit

Auditor: Design System + Frontend
Date: 2026-02-23
Scope: src/**/*.vue, src/**/*.css

1. Resumo Executivo

Métrica Valor
Assinaturas tipográficas únicas (Tailwind) ~42
Top 10 assinaturas mais usadas ver tabela abaixo
Outliers (assinaturas com 1 ocorrência) ~18
Ocorrências inline style tipográfico 2 (em 2 arquivos)
Ocorrências CSS tipográfico (arquivos .css) ~12 regras (em 2 arquivos)
Ocorrências de font-family arbitrária (Tailwind) 3 (font-robotomono, font-roboto, font-mono, font-['Roboto_Mono'])
Ocorrências de tamanho arbitrário (text-[...]) ~8 (text-[17.5px], text-[18px], text-[12px], text-[0.625rem])

Top 10 Assinaturas Mais Usadas

# Assinatura Normalizada Contagem Estimada Papel Semântico
1 text-xs font-normal leading-tight ~60+ Mensagem de erro de campo
2 text-xs text-color-secondary font-normal leading-5 ~55+ Texto de ajuda/descrição de campo
3 text-base font-medium leading-5 ~40+ Label de campo de formulário
4 text-sm font-normal text-color-secondary ~35+ Texto secundário / subtítulo
5 text-sm font-medium ~30+ Texto de destaque pequeno
6 text-xl font-medium ~25+ Título de seção / heading de formulário
7 text-lg font-medium ~20+ Título de card / drawer header
8 text-xs font-medium ~18+ Metadata / badge / label pequeno
9 text-sm font-medium leading-5 ~15+ Label de filtro / campo
10 text-2xl font-medium ~8+ Heading de página / número grande

2. Catálogo de "Variáveis Tipográficas" (Tailwind)

2.1 Grupo: Mensagens de Erro de Campo

Assinatura: text-xs font-normal leading-tight (+ p-error)

Variações por breakpoint/state: Nenhuma — assinatura é sempre estática.

2.2 Grupo: Texto de Ajuda / Descrição de Campo

Assinatura: text-xs text-color-secondary font-normal leading-5

Variação: Em src/components/description-text/descriptionText.vue:35 existe uma variante small que usa exatamente esta assinatura, e uma variante normal que usa text-sm font-normal.

2.3 Grupo: Label de Campo de Formulário

Assinatura: text-color text-base font-medium leading-5

Variações:

2.4 Grupo: Texto Secundário / Subtítulo

Assinatura: text-sm font-normal text-color-secondary

Variações por breakpoint:

2.5 Grupo: Texto de Destaque Pequeno / Metadata

Assinatura: text-sm font-medium

2.6 Grupo: Título de Seção / Heading de Formulário

Assinatura: text-xl font-medium

Variações por breakpoint:

2.7 Grupo: Título de Card / Drawer Header

Assinatura: text-lg font-medium

Variações:

2.8 Grupo: Metadata / Badge / Label Pequeno

Assinatura: text-xs font-medium

2.9 Grupo: Label de Filtro / Campo de Formulário Secundário

Assinatura: text-sm font-medium leading-5 text-color

2.10 Grupo: Heading de Página / Número Grande

Assinatura: text-2xl font-medium / text-3xl font-medium

2.11 Assinaturas Outliers (1 ocorrência ou muito específicas)

Assinatura Arquivo:Linha Observação
text-3xl lg:text-4xl text-medium src/views/CliCallback/SuccessView.vue:12 Bug: text-medium não é classe Tailwind válida — deveria ser font-medium
text-3xl lg:text-4xl text-medium src/views/CliCallback/FailView.vue:12 Bug: mesmo problema
text-4xl xl:text-6xl font-normal leading-10 src/templates/signup-block/page-with-form-block.vue:6 Heading de marketing, único
text-5xl font-medium src/templates/error-page-block/index.vue:5 Página de erro 404
text-2xl font-bold src/templates/graphs-card-block/components/chart/big-numbers-chart.vue:4 Big number em gráfico
text-xl font-semibold src/templates/danger-card-block/index.vue:4 Card de perigo
text-[17.5px] text-xl font-medium leading-7 src/templates/advanced-filter/dialog-filter.vue:250 Tamanho arbitrário + classe padrão (conflito)
text-[18px] src/templates/page-heading-block/index.vue:58 Breadcrumb — tamanho arbitrário
text-[18px] src/templates/page-heading-block/index.vue:85 Breadcrumb — tamanho arbitrário
text-[12px] src/templates/list-table-block/folder-list.vue:668 Breadcrumb de pasta — tamanho arbitrário
text-[0.625rem] src/templates/label-block/index.vue:27 "(Required)" — tamanho sub-xs
text-[0.625rem] src/templates/form-fields-inputs/fieldGroupRadio.vue:99 "(Required)" — tamanho sub-xs
font-roboto text-3xl font-medium leading-9 src/modules/azion-ai-chat/components/chat-welcome.vue:4 Font-family explícita não padrão
font-robotomono src/templates/script-runner-block/index.vue:28 Font-family custom do tailwind.config
font-['Roboto_Mono'] src/views/EdgeSQL/Dialog/TruncateTable.vue:25 Font-family arbitrária (2 ocorrências no mesmo arquivo)
font-mono src/components/base/advanced-filter-system/filterAQL/content-editable.vue:7 AQL editor
text-xs text-color font-medium leading-4 src/views/RealTimeEvents/Blocks/tab-panel-block.vue:135 leading-4 único no codebase
text-sm leading-relaxed src/templates/danger-card-block/index.vue:9 Único com leading-relaxed em texto de card

2.12 Assinaturas com Variações de Font-Weight Inconsistentes para o Mesmo Tamanho

Tamanho Pesos Encontrados Arquivos de Exemplo
text-lg font-medium, font-bold, font-semibold BillsView.vue:8, WafRules/Dialog/index.vue:71, DataStream/Dialog/SamplingDialog.vue:18
text-sm font-normal, font-medium, font-bold, font-semibold Múltiplos arquivos
text-xs font-normal, font-medium, font-semibold, font-bold Múltiplos arquivos

3. Lista de Inline Style / CSS-in-JS / CSS Tipográfico

3.1 Inline Style (HTML style="...")

Arquivo:Linha Propriedade Snippet
src/views/CliCallback/FailView.vue:9 font-size style="color: var(--red-400); font-size: 2rem"
src/views/CliCallback/SuccessView.vue:9 font-size style="color: var(--green-500); font-size: 2rem"

Observação: Ambos são ícones PrimeIcons (<i class="pi pi-times"> / <i class="pi pi-check">). O font-size: 2rem poderia ser substituído por text-[2rem] ou text-3xl (1.875rem ≈ 2rem).

3.2 Inline Style (Vue :style / style={{ }})

Arquivo:Linha Propriedade Snippet
src/templates/create-form-block/form-horizontal.vue:32 white-space style="white-space: pre-line" — não tipográfico direto, mas afeta apresentação de texto

3.3 CSS Files com Propriedades Tipográficas

Arquivo: src/assets/main.css

Linha Propriedade Valor
37 font-family var(--font-family) — herda do tema PrimeVue
38 text-rendering optimizeLegibility
39 -webkit-font-smoothing antialiased
40 -moz-osx-font-smoothing grayscale

Arquivo: src/modules/azion-ai-chat/assets/markdown.css

Linha Seletor Propriedades Tipográficas
3 .markdown font-size: 16px
18-19 .markdown pre font-size: 0.9em; line-height: 1.5em
32-33 .markdown h1 font-weight: 700; letter-spacing: -0.04rem
50 .markdown h2-h5 font-weight: 600
55-57 .markdown h2 font-size: 1.17em; line-height: 1.75; font-weight: 500
71 .markdown blockquote line-height: 1.5rem
126-127 .markdown a text-decoration: underline; font-weight: 500
132-133 .markdown ul, ol font-size: 1rem; line-height: 1.75

Observação: O arquivo markdown.css é um caso legítimo de CSS tipográfico — é um reset/estilo para conteúdo Markdown renderizado dinamicamente, onde Tailwind não pode ser aplicado diretamente. Porém, os valores não estão alinhados com os tokens do DS.

3.4 Tailwind Passthrough (:pt) com Classes Tipográficas

Vários componentes PrimeVue usam o mecanismo :pt (passthrough) para injetar classes Tailwind em slots internos. Isso é equivalente a inline style para fins de auditoria:

Arquivo:Linha Slot Classes Tipográficas
src/layout/components/menu-production/index.vue:38 submenuheader text-base font-medium leading-none
src/layout/components/menu-profile/index.vue:27 submenuheader text-base font-medium leading-none
src/layout/components/menu-profile/index.vue:85 full-name text-sm font-medium leading-none
src/templates/page-heading-block/index.vue:58 label (Breadcrumb) text-[18px] — tamanho arbitrário
src/views/RealTimeEvents/FormFields/FormFieldsCreateEdgeApplications.vue:148 title (Panel) text-base font-medium
src/views/RealTimeEvents/FormFields/FormFieldsCreateEdgeApplications.vue:150 subtitle (Panel) text-sm font-normal text-color-secondary

4. Recomendações (Nível Design System)

4.1 Padrões Candidatos a "Text Styles" Oficiais

Com base na análise, os seguintes padrões emergem naturalmente do codebase e são candidatos diretos a classes DS:

/* Mapeamento atual → classe DS proposta */

text-xs font-normal leading-tight          → .text-body-1 (error variant)
text-xs text-color-secondary font-normal leading-5  → .text-body-1 (help text)
text-base font-medium leading-5            → label de campo (sem equivalente direto no DS proposto)
text-sm font-normal text-color-secondary   → .text-body-2 (secondary)
text-sm font-medium                        → .text-body-2 (emphasis)
text-xl font-medium                        → .text-heading-1 (form section)
text-lg font-medium                        → .text-heading-0 (card/drawer)
text-2xl font-medium                       → .text-heading-2 (page heading)
text-3xl font-medium                       → .text-heading-3 (marketing)

4.2 Análise Comparativa com o Sistema DS Proposto

O sistema proposto define:

/* Headings */
.text-heading-0 { @apply text-xs sm:text-xs lg:text-sm font-medium; }
.text-heading-1 { @apply text-base sm:text-lg lg:text-xl font-medium; }
.text-heading-2 { @apply text-xl sm:text-2xl lg:text-3xl font-medium; }
.text-heading-3 { @apply text-2xl sm:text-3xl lg:text-4xl font-medium; }
.text-heading-4 { @apply text-3xl sm:text-4xl lg:text-5xl font-medium; }
.text-heading-5 { @apply text-4xl sm:text-5xl lg:text-6xl font-medium; }

/* Body's */
.text-body-1 { @apply text-xs leading-normal sm:leading-relaxed; }
.text-body-2 { @apply text-xs sm:text-sm leading-normal sm:leading-relaxed; }
.text-body-3 { @apply text-sm sm:text-base leading-normal sm:leading-relaxed; }
.text-body-4 { @apply text-base sm:text-lg leading-normal sm:leading-relaxed; }
.text-body-5 { @apply text-lg sm:text-xl leading-normal sm:leading-relaxed; }

/* Others */
.text-overline { @apply text-[.625rem] sm:text-xs uppercase tracking-widest font-mono; }
.text-big-number { @apply text-5xl md:text-6xl leading-tight; }

Mapeamento de Migração

Assinatura Atual (codebase) Classe DS Proposta Compatibilidade Observação
text-xs font-normal leading-tight (erro) .text-body-1 ⚠️ Parcial DS usa leading-normal sm:leading-relaxed; codebase usa leading-tight. Semântica diferente — erro precisa de leading-tight
text-xs text-color-secondary font-normal leading-5 (help) .text-body-1 ⚠️ Parcial leading-5 = 1.25rem; DS usa leading-normal (1.5). Diferença visual perceptível
text-sm font-normal text-color-secondary .text-body-2 ✅ Boa DS adiciona responsividade sm:text-sm que é compatível
text-sm font-medium .text-body-2 + font-medium ⚠️ Parcial DS não define peso — precisaria de modificador
text-base font-medium leading-5 (label) .text-heading-1 (mobile) ⚠️ Parcial .text-heading-1 começa em text-base no mobile, mas escala para text-xl no lg — labels de formulário NÃO devem escalar assim
text-xl font-medium (seção) .text-heading-1 (lg) ✅ Boa Coincide com o valor lg de .text-heading-1
text-lg font-medium (card) .text-heading-0 (lg) ⚠️ Parcial .text-heading-0 é text-sm no lg — muito pequeno para card headers
text-2xl font-medium .text-heading-2 (mobile) ✅ Boa Coincide com o valor mobile de .text-heading-2
text-3xl font-medium .text-heading-2 (sm) ou .text-heading-3 (mobile) ✅ Boa Depende do contexto
text-5xl font-medium .text-big-number ⚠️ Parcial .text-big-number não tem font-medium
text-[0.625rem] (Required) .text-overline ⚠️ Parcial .text-overline tem uppercase + tracking-widest — semântica diferente

Gaps Críticos no Sistema DS Proposto

  1. Ausência de classe para "Label de Campo": O padrão mais usado (text-base font-medium leading-5) não tem equivalente direto. .text-heading-1 escala demais para este uso.

  2. Ausência de classe para "Texto de Erro": text-xs font-normal leading-tight é usado ~60 vezes mas não tem equivalente. O leading-tight é intencional para mensagens de erro compactas.

  3. Ausência de modificadores de peso: O DS proposto não define variantes de font-weight para as classes body. Muitos usos de text-sm têm font-medium (destaque) vs font-normal (padrão).

  4. .text-heading-0 muito pequeno para uso atual: O padrão text-lg font-medium (card headers) não mapeia bem para .text-heading-0 que é text-xs/sm.

  5. Responsividade agressiva nos headings: As classes DS escalam muito entre breakpoints (ex: .text-heading-2 vai de text-xl para text-3xl). O codebase atual usa escalas mais conservadoras.

4.3 Inconsistências de Leading/Tracking por Faixa de Tamanho

Tamanho Leading Encontrado Problema
text-xs leading-tight, leading-5, leading-4, sem leading 4 valores diferentes para o mesmo tamanho
text-sm leading-5, leading-7, leading-tight, leading-relaxed, sem leading 5 valores diferentes
text-base leading-5, sem leading Inconsistente
text-lg leading-5, leading-7, leading-tight, sem leading 4 valores diferentes
text-xl leading-7, leading-9, sem leading 3 valores diferentes
text-3xl leading-9, sem leading 2 valores

Tracking: Praticamente ausente no codebase (apenas em .text-overline proposto e em markdown.css). Não há uso de tracking-* em componentes Vue.

4.4 Onde Existe Dívida de Design

Dívida Alta (impacto imediato)

  1. Bug de classe inválida: text-medium em src/views/CliCallback/SuccessView.vue:12 e src/views/CliCallback/FailView.vue:12 — não é uma classe Tailwind válida. Deveria ser font-medium.

  2. Tamanhos arbitrários sem justificativa: text-[17.5px] em src/templates/advanced-filter/dialog-filter.vue:250 combinado com text-xl no mesmo elemento (conflito de especificidade).

  3. Font-family arbitrária: font-['Roboto_Mono'] em src/views/EdgeSQL/Dialog/TruncateTable.vue:25 — deveria usar font-robotomono (já definido no tailwind.config.js) ou font-mono.

  4. Inconsistência de font-weight em dialog headers: text-lg com font-bold, font-semibold e font-medium em diferentes dialogs sem critério aparente.

Dívida Média

  1. Duplicação de padrão de erro: O padrão p-error text-xs font-normal leading-tight é repetido ~60 vezes. Deveria ser encapsulado em um componente <FieldError> ou classe utilitária.

  2. Duplicação de padrão de help text: O padrão text-xs text-color-secondary font-normal leading-5 é repetido ~55 vezes. Deveria ser encapsulado.

  3. text-md não existe no Tailwind: Encontrado em src/components/DataTable/DataTable.vue:112, src/templates/list-table-block/folder-list.vue:854 e outros — text-md não é uma classe Tailwind válida (o correto é text-base).

  4. font=normal (typo): Em src/templates/switch-account-block/index.vue:187 — font=normal com = ao invés de -. Não tem efeito nenhum.

Dívida Baixa

  1. text-xl md:text-xl em src/templates/mfa-setup-block/index.vue:14 — breakpoint redundante.

  2. line-height-1 (PrimeVue utility) em src/views/Billing/BillsView.vue:196 — mistura de utilitários PrimeVue com Tailwind.

4.5 Sugestões de Refactor

Curto Prazo (sem mudança de DS)

  1. Criar componente <FieldError> que encapsula p-error text-xs font-normal leading-tight — elimina ~60 duplicações.

  2. Criar componente <FieldDescription> que encapsula text-xs text-color-secondary font-normal leading-5 — elimina ~55 duplicações.

  3. Corrigir bugs: text-medium → font-medium, text-md → text-base, font=normal → font-normal, font-['Roboto_Mono'] → font-robotomono.

  4. Padronizar dialog headers: Definir uma única assinatura para h5 de dialogs (sugestão: text-lg font-medium leading-5).

Médio Prazo (com adoção parcial do DS)

  1. Adicionar ao DS proposto:

    • .text-field-label { @apply text-base font-medium leading-5; } — para labels de formulário
    • .text-field-error { @apply text-xs font-normal leading-tight; } — para mensagens de erro
    • .text-field-help { @apply text-xs font-normal leading-5; } — para textos de ajuda

  2. Revisar .text-heading-0: O valor atual (text-xs sm:text-xs lg:text-sm) é muito pequeno para ser um "heading". Considerar renomear para .text-caption ou .text-overline-sm.

  3. Adicionar variantes de peso ao DS: .text-body-2--emphasis { @apply text-body-2 font-medium; } ou usar composição de classes.

Longo Prazo (migração completa)

  1. Migrar gradualmente usando o mapeamento da tabela 4.2, começando pelos componentes mais reutilizados (form-fields-inputs/, templates/).

  2. Criar <Typography> component que aceita variant prop e aplica a classe DS correta, facilitando manutenção futura.

  3. Alinhar markdown.css com tokens do DS — substituir valores hardcoded por variáveis CSS do tema.

Apêndice: Arquivos com Maior Concentração de Assinaturas Tipográficas

Arquivo Estimativa de Ocorrências
src/views/RealTimeEvents/FormFields/FormFieldsCreateEdgeApplications.vue ~40
src/views/DataStream/FormFields/blocks/OutputSection.vue ~20
src/views/Billing/BillsView.vue ~18
src/views/Billing/InvoiceDetailsView.vue ~16
src/views/CreateNew/CreateView.vue ~15
src/templates/advanced-filter/dialog-filter.vue ~14
src/views/Workload/FormFields/FormFieldsCreateDomains.vue ~12
src/views/Workload/FormFields/FormFieldsEditDomains.vue ~12

Diagnóstico gerado por varredura estática de código. Contagens são estimativas baseadas em grep/search — podem variar ±10% por ocorrências em strings dinâmicas ou condicionais.

Metadata

Metadata

Assignees

Labels

themingVisual theme modifications.

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions