adionado documentação betha

2026-07-01 15:45:30 -03:00 · 2026-07-01 15:45:30 -03:00 · a449f909f6
commit a449f909f6
parent 993252c49b
1 changed files with 124 additions and 0 deletions
--- a/global/rules/estilos-design-system
+++ b/global/rules/estilos-design-system
@ -0,0 +1,124 @@
+---
+type: rule
+name: estilos-design-system
+description: Define os dois design systems do ecossistema e-licencie — Floreta (iniciativa privada) e Betha (governo) — e quando usar cada um
+scope: global
+trigger: always
+updatedAt: "2026-07-01"
+---
+
+# Regra: Estilos e Design Systems do Ecossistema
+
+O ecossistema e-licencie opera com **dois design systems distintos**, selecionados conforme o público-alvo da aplicação.
+
+## 1. Estilo Floreta — Iniciativa Privada
+
+Usado em: `e-licencie`, `e-licencie.qualifica`, `e-licencie.gee` e todos os módulos voltados a empresas privadas.
+
+### Características
+
+- **Framework UI:** Vuetify (Vue 3)
+- **Cores:** paleta própria definida no tema Vuetify do projeto
+- **Tipografia:** controlada pelo tema Vuetify
+- **Componentes:** componentes Vuetify (`v-btn`, `v-card`, `v-data-table`, etc.)
+- **Estilo visual:** moderno, tech, voltado a usabilidade corporativa
+
+### Quando aplicar
+
+- Todo código em pacotes `*-front` dos produtos e-licencie voltados ao mercado privado
+- Landing pages e painéis públicos de empresas
+
+---
+
+## 2. Estilo Betha — Governo / Setor Público
+
+Usado em: aplicações integradas à plataforma Betha (gestão municipal, e-Gov).
+
+**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 produtos Betha:**
+| 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>
+```
+
+### Quando aplicar
+
+- Módulos integrados à plataforma Betha de gestão municipal
+- Interfaces que operam dentro do ecossistema e-Gov Betha
+- Aplicações web com `body class="suite-pla iv"`
+
+---
+
+## Decisão: Como identificar qual estilo usar
+
+1. **Pergunte o contexto:** se o operador não especificar, pergunte se o módulo é para iniciativa privada (Floreta/Vuetify) ou governo (Betha)
+2. **Nunca misture:** um módulo usa UM estilo — nunca combine Vuetify com Betha Design
+3. **Header identifica:** header azul-escuro com logo "B" = Betha; barra lateral com menu Vuetify = Floreta
+
+## Referências
+
+- Betha Design System: https://design.plataforma.betha.cloud/doc/index.html
+- Framework Design CDN: https://cdn.betha.cloud/base/g4/design/4.0.0/