refactor(ux): garantir agnosticismo polimorfico e exemplos neutros nos artefatos de UX

This commit is contained in:
Luiz Silva 2026-10-26 20:25:21 -03:00
parent b540fd97c0
commit 790b56e614
21 changed files with 259 additions and 254 deletions

View file

@ -31,7 +31,7 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land
- Quando um elemento principal não se destaca, **não** aumente sua fonte ou saturação indefinidamente: reduza o contraste dos elementos que competem com ele (itens inativos, textos de apoio, barras laterais sem caixas pesadas).
3. **Rótulos são o Último Recurso (*Labels are a last resort*):**
- **Proibido** empilhar listas ingênuas de `Rótulo: Valor` vindas do banco de dados com igual peso visual.
- Omitir o rótulo quando o formato ou contexto já identifica o dado (CNPJ, e-mail, telefone, status, moeda, data) ou combinar rótulo + valor em frase natural (`"12 condicionantes pendentes"`, `"150,5 ha de área total"`).
- Omitir o rótulo quando o formato ou contexto já identifica o dado (CNPJ, e-mail, telefone, status, moeda, data) ou combinar rótulo + valor em frase natural (`"12 etapas pendentes"`, `"R$ 15.000,00 de valor total"`).
- Quando o rótulo for necessário (ex.: cards de indicadores/KPIs), o **valor é o protagonista** (`20px–24px`, peso `600/700`, cor escura) e o rótulo é secundário (`12px`, cor neutra suave).
4. **Separar Hierarquia Visual da Semântica HTML:**
- Tags `<h1>`, `<h2>`, `<h3>` em telas de aplicação funcionam como rótulos de seção: devem ser contidas (`16px–20px`, peso `600`), nunca títulos gigantes que roubam espaço da área de trabalho.
@ -128,17 +128,17 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
```vue
<v-card variant="outlined" class="pa-2">
<h1 class="text-h3">Listagem de Licenças</h1>
<h1 class="text-h3">Listagem de Solicitações</h1>
<v-divider class="my-2" />
<v-card variant="outlined" class="pa-2 mb-2">
<div><strong>Razão Social:</strong> Mineração Vale Verde</div>
<div><strong>Razão Social:</strong> Organização Vale Verde</div>
<v-divider class="my-1" />
<div><strong>CNPJ:</strong> 12.345.678/0001-90</div>
<v-divider class="my-1" />
<div><strong>Status:</strong> Vigente</div>
<div><strong>Status:</strong> Em andamento</div>
<div class="d-flex ga-2 mt-2">
<v-btn color="primary" variant="flat">Editar</v-btn>
<v-btn color="success" variant="flat">Renovar</v-btn>
<v-btn color="success" variant="flat">Concluir</v-btn>
<v-btn color="warning" variant="flat">Exportar</v-btn>
<v-btn color="error" variant="flat">Excluir</v-btn>
</div>
@ -152,23 +152,23 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
<section class="pa-6">
<header class="d-flex align-baseline justify-space-between mb-6">
<div>
<h1 class="text-h6 font-weight-semibold">Licenças ambientais</h1>
<p class="text-body-2 text-medium-emphasis">12 licenças vigentes no período</p>
<h1 class="text-h6 font-weight-semibold">Solicitações ativas</h1>
<p class="text-body-2 text-medium-emphasis">12 solicitações registradas no período</p>
</div>
<div class="d-flex align-center ga-3">
<v-btn color="secondary" variant="outlined">Exportar</v-btn>
<v-btn color="primary" variant="flat">Nova licença</v-btn>
<v-btn color="primary" variant="flat">Nova solicitação</v-btn>
</div>
</header>
<v-card flat class="pa-5 bg-surface rounded-lg">
<div class="d-flex align-center justify-space-between">
<div>
<div class="text-subtitle-1 font-weight-semibold">Mineração Vale Verde Ltda.</div>
<div class="text-subtitle-1 font-weight-semibold">Organização Vale Verde Ltda.</div>
<div class="text-caption text-medium-emphasis">12.345.678/0001-90 • Criciúma/SC</div>
</div>
<div class="d-flex align-center ga-2">
<v-btn color="secondary" variant="tonal" size="small">Renovar</v-btn>
<v-btn color="secondary" variant="tonal" size="small">Concluir</v-btn>
<v-btn variant="text" size="small">Editar</v-btn>
<v-btn variant="text" color="error" size="small">Excluir</v-btn>
</div>