refactor(ux): garantir agnosticismo polimorfico e exemplos neutros nos artefatos de UX
This commit is contained in:
parent
b540fd97c0
commit
790b56e614
21 changed files with 259 additions and 254 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue