192 lines
8 KiB
Markdown
192 lines
8 KiB
Markdown
---
|
||
type: rule
|
||
name: estilos-design-system
|
||
description: Define os dois design systems do ecossistema — Floreta (iniciativa privada) e Betha (governo/setor público) — parametrizados via memorias-ia/modulo.yml
|
||
scope: global
|
||
trigger: always_on
|
||
updatedAt: "2026-10-14"
|
||
---
|
||
|
||
# Regra: Estilos e Design Systems do Ecossistema
|
||
|
||
O ecossistema Azteca opera com **dois design systems distintos**, selecionados conforme o público-alvo e a definição em `memorias-ia/modulo.yml` (`modulo-id`, `modulo-descricao` e `modulo-tipo`).
|
||
|
||
## 1. Estilo Floreta — Iniciativa Privada
|
||
|
||
Usado nos módulos voltados a empresas privadas e gestão corporativa.
|
||
|
||
### Características
|
||
|
||
- **Framework UI:** Vuetify (Vue 3) / `eli-vue` ou Tailwind CSS v4 (módulos verdes e-Licencie `#688c00`)
|
||
- **Cores:** paleta própria definida no tema do projeto (`#688c00` verde floresta e-Licencie)
|
||
- **Tipografia Obrigatória:** **`Google Sans`** (Variable Font 100–900 carregada via `@font-face` do MinIO Paiol: `https://paiol.idz.one/estaticos/GoogleSans/GoogleSans-VariableFont_GRAD,opsz,wght.ttf` e `GoogleSans-Italic-VariableFont_GRAD,opsz,wght.ttf`). Proibido uso de fontes genéricas ou `font-mono` em badges/valores (usar `tabular-nums` com `Google Sans`).
|
||
- **Iconografia Obrigatória:** **`@lucide/vue`** exclusivamente. É proibido usar `lucide-vue-next`, `@mdi/font`, SVGs inline ou caracteres Unicode/ASCII (`└`, `➔`) como ícones visuais.
|
||
- **Componentes:** componentes Vuetify (`v-btn`, `v-card`, `v-data-table`, etc.) ou componentes modulares Vue 3
|
||
- **Estilo visual:** moderno, tech, voltado a usabilidade corporativa
|
||
|
||
### Quando aplicar
|
||
|
||
- Todo código em pacotes `<modulo>-front` de módulos voltados ao setor privado (conforme descrito em `memorias-ia/modulo.yml`)
|
||
- Landing pages e painéis públicos corporativos
|
||
|
||
---
|
||
|
||
## 2. Estilo Betha — Governo / Setor Público
|
||
|
||
Usado em módulos voltados a órgãos governamentais, gestão municipal e e-Gov (conforme identificado em `memorias-ia/modulo.yml`).
|
||
|
||
**Documentação oficial:** https://design.plataforma.betha.cloud/doc/index.html
|
||
|
||
### Cores
|
||
|
||
| Cor | Hex | Classe bg | Classe tx |
|
||
|-------------|-----------|--------------------|--------------------|
|
||
| **Brand** | `#0761FF` | `.bg__brand` | `.tx__brand` |
|
||
| **Blue** | `#3374DB` | `.bg__blue` | `.tx__blue` |
|
||
| **Aqua** | `#46AFD2` | `.bg__aqua` | `.tx__aqua` |
|
||
| **Yellow** | `#E8B730` | `.bg__yellow` | `.tx__yellow` |
|
||
| **Red** | `#DD413C` | `.bg__red` | `.tx__red` |
|
||
| **Green** | `#3EC18F` | `.bg__green` | `.tx__green` |
|
||
| **Orange** | `#E87D30` | `.bg__orange` | `.tx__orange` |
|
||
| **Purple** | `#9F62B2` | `.bg__purple` | `.tx__purple` |
|
||
| **Pink** | `#CB528F` | `.bg__pink` | `.tx__pink` |
|
||
| **Gray** | `#BFBFC0` | `.bg__gray` | `.tx__gray` |
|
||
|
||
**Variações tonais:**
|
||
- Dark (mais escura): sufixos `--d10`, `--d20`, `--d30`, `--d40`
|
||
- Light (mais clara): sufixos `--l10`, `--l20`, `--l30`, `--l40`
|
||
- Exemplo: `.bg__blue--d20`, `.tx__red--l30`
|
||
|
||
**Cores de linhas de produto:**
|
||
| Linha de Produto | Hex |
|
||
|--------------------------------------|-----------|
|
||
| Gestão Municipal | `#9A8B7D` |
|
||
| Planejamento e Contabilidade | `#A6B8FF` |
|
||
| Arrecadação e Fiscalização | `#00BD7E` |
|
||
| Atendimento | `#A5A6A7` |
|
||
| Gestão de Compras e Contratos | `#FF7F7A` |
|
||
| Pessoal e Recursos Humanos | `#00B0FF` |
|
||
| Saúde e Assistência Social | `#A7C27E` |
|
||
| Educação e Gestão Escolar | `#F9B02E` |
|
||
| Gestão de Leis Municipais | `#F4812E` |
|
||
| Componentes genéricos / Perf. Corp. | `#263E81` |
|
||
|
||
### Tipografia
|
||
|
||
- **Fonte:** Open Sans (Regular, Semibold, Bold)
|
||
- **Tamanhos:** H1=36px, H2=30px, H3=20px, H4=18px, H5=14px, H6=12px
|
||
|
||
### Componentes (classes CSS)
|
||
|
||
#### Botões
|
||
- `.btn-default` — ação secundária
|
||
- `.btn-primary` — ação principal (`#337AB7`)
|
||
- `.btn-success` — ação positiva/adicionar
|
||
- `.btn-danger` — ação destrutiva/crítica
|
||
- `.btn-warning` — ação que requer atenção
|
||
- `.btn-info` — ação principal discreta
|
||
- `.btn-link` — estilo link
|
||
- Tamanhos: `.btn-lg`, `.btn` (padrão), `.btn-sm`, `.btn-xs`
|
||
|
||
#### Grid
|
||
- 12 colunas responsivas (Bootstrap 3)
|
||
- Container fixo: max-width `1360px`
|
||
- Gutter: `8px`
|
||
- Classes: `.col-xs-*`, `.col-sm-*`, `.col-md-*`, `.col-lg-*`
|
||
|
||
### Integração (CDN)
|
||
|
||
```html
|
||
<!-- CSS -->
|
||
<link rel="stylesheet" href="https://cdn.betha.cloud/base/g4/design/4.0.0/bth-design.css" />
|
||
|
||
<!-- JS -->
|
||
<script src="https://cdn.betha.cloud/base/g4/front-end/2.7/js/base.js"></script>
|
||
<script src="https://cdn.betha.cloud/base/g4/design/4.0.0/bth-design.js"></script>
|
||
```
|
||
|
||
### Tokens para Frontends `<modulo>-front` (React/MUI e Vue 3/Vuetify)
|
||
|
||
Nos módulos governamentais (`memorias-ia/modulo.yml`), os pacotes `<modulo>-front` utilizam estes tokens:
|
||
|
||
| Token | Hex | Uso |
|
||
|-------|-----|-----|
|
||
| primary | `#007bff` | botões, links, destaques |
|
||
| primary dark | `#0069d9` | hover de botões primários |
|
||
| secondary | `#6c757d` | ações secundárias |
|
||
| dark (header) | `#343a40` | header de telas, DialogTitle, navbar |
|
||
| body bg | `#EBEDF0` | background da aplicação |
|
||
| light bg | `#f8f9fa` | DialogActions, cards neutros |
|
||
| border | `#dee2e6` | bordas de separadores |
|
||
| text | `#212529` | texto principal |
|
||
| text muted | `#495057` | texto secundário/labels |
|
||
| success | `#28a745` | status positivo |
|
||
| danger | `#dc3545` | erro/exclusão |
|
||
| warning | `#ffc107` | alerta |
|
||
| info | `#17a2b8` | informação |
|
||
| white-label primary alternativo | `#688c00` | substituição de primary quando marca alternativa ativa |
|
||
|
||
**Seleção de itens (cartões interativos):**
|
||
- Selecionado: `#cce5ff` / hover: `#b8daff`
|
||
- Não selecionado: `#f8f9fa` / hover: `#e9ecef`
|
||
|
||
### Configuração Vue 3 + Vuetify (`src/plugins/vuetify.ts` em `<modulo>-front`)
|
||
|
||
```typescript
|
||
theme: {
|
||
defaultTheme: "bethaTema",
|
||
themes: {
|
||
bethaTema: {
|
||
dark: false,
|
||
colors: {
|
||
primary: "#007bff",
|
||
secondary: "#6c757d",
|
||
background: "#EBEDF0",
|
||
surface: "#ffffff",
|
||
error: "#dc3545",
|
||
warning: "#ffc107",
|
||
success: "#28a745",
|
||
info: "#17a2b8",
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
- **Navbar** (`App.vue`): `<v-app-bar flat color="#343a40" theme="dark">`
|
||
- **Botões:** sempre `color="primary"` para usar o token do tema
|
||
|
||
---
|
||
|
||
## 3. Branding Dinâmico — `eBetha()` nos Footers
|
||
|
||
Quando o módulo suporta white-label dinâmico, os footers de `<modulo>-front` utilizam a função `eBetha()` para determinar a identidade exibida:
|
||
|
||
```typescript
|
||
import { eBetha } from "p-ambiente";
|
||
|
||
// eBetha() == true → Betha Sistemas Ltda, CNPJ 00.456.865/0001-67, Criciúma-SC
|
||
// eBetha() == false → Azteca Software LTDA, CNPJ 29.979.144/0001-13, Içara-SC
|
||
```
|
||
|
||
- O footer exibe sempre a versão da API e do frontend
|
||
- O logotipo é condicional conforme a marca ativa
|
||
|
||
---
|
||
|
||
## Decisão: Como identificar qual estilo usar
|
||
|
||
1. **Consultar `memorias-ia/modulo.yml`:** verificar `modulo-id`, `modulo-descricao` e `modulo-tipo` para identificar se o projeto é privado (Floreta/Vuetify) ou governamental (Betha)
|
||
2. **Nunca misturar:** um módulo usa UM estilo — nunca combinar ambos na mesma tela
|
||
3. **Header identifica:** header `#343a40` = padrão governamental/Betha; barra lateral com menu Vuetify customizado = padrão privado/Floreta
|
||
|
||
## Referências
|
||
|
||
- Identidade do Módulo: `memorias-ia/modulo.yml`
|
||
- Betha Design System: https://design.plataforma.betha.cloud/doc/index.html
|
||
- Framework Design CDN: https://cdn.betha.cloud/base/g4/design/4.0.0/
|
||
- Rule: `refactoring-ui-hierarquia-despoluicao` (despoluição visual, hierarquia e espaçamento)
|
||
- Livro *Refactoring UI* (Steve Schoger & Adam Wathan): `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`
|
||
- Rule: `css-global-betha` (variáveis --bth-*)
|
||
- Rule: `theme-provider-mui-betha` (arquitetura ThemeProvider)
|
||
- Rule: `modal-dialog-padrao-betha` (estrutura de modais)
|