101 lines
3.2 KiB
Markdown
101 lines
3.2 KiB
Markdown
---
|
|
type: rule
|
|
name: css-global-betha
|
|
description: Define o padrão de CSS global com variáveis --bth-* para os frontends de gestão pública/governo do ecossistema
|
|
scope: global
|
|
trigger: model_decision
|
|
priority: alta
|
|
updatedAt: "2026-10-14"
|
|
---
|
|
|
|
# Regra: CSS Global Betha — Variáveis `--bth-*`
|
|
|
|
Todo frontend de módulo voltado a governo/gestão pública (identificado via `modulo-id` e `modulo-tipo` em `memorias-ia/modulo.yml`) deve possuir um arquivo CSS global com as variáveis `--bth-*` e reset visual Betha.
|
|
|
|
## Localização por Tipo de Frontend (`*-front`)
|
|
|
|
| Arquitetura do Pacote `<modulo>-front` | Arquivo CSS Global | Importado em |
|
|
|----------------------------------------|--------------------|--------------|
|
|
| SPA React / Vite | `src/styles/index.css` ou `src/styles/global.css` | `index.tsx` / `App.tsx` |
|
|
| Next.js / Nuxt / SSR | `src/styles/globals.css` | `layout.tsx` / `app.vue` |
|
|
| Vue 3 / Vite | `src/styles/global.css` | `main.ts` |
|
|
|
|
## Variáveis Obrigatórias
|
|
|
|
```css
|
|
:root {
|
|
/* Cores primárias */
|
|
--bth-primary: #007bff;
|
|
--bth-dark: #343a40;
|
|
--bth-body-bg: #EBEDF0;
|
|
--bth-white: #ffffff;
|
|
--bth-border: #dee2e6;
|
|
|
|
/* Texto */
|
|
--bth-text: #212529;
|
|
--bth-text-muted: #495057;
|
|
--bth-secondary: #6c757d;
|
|
|
|
/* Semânticas */
|
|
--bth-success: #28a745;
|
|
--bth-danger: #dc3545;
|
|
--bth-warning: #ffc107;
|
|
--bth-info: #17a2b8;
|
|
|
|
/* Utilitárias */
|
|
--bth-light-bg: #f8f9fa;
|
|
--bth-border-radius: 0.25rem;
|
|
--bth-font: "Open Sans", Arial, sans-serif;
|
|
--bth-shadow-sm: 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15);
|
|
--bth-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
|
|
|
|
/* Seleção de itens (cartões interativos) */
|
|
--bth-selected-bg: #cce5ff;
|
|
--bth-selected-hover: #b8daff;
|
|
}
|
|
```
|
|
|
|
## Reset Global Obrigatório
|
|
|
|
```css
|
|
body {
|
|
font-family: var(--bth-font);
|
|
font-size: 0.875rem; /* 14px */
|
|
background-color: var(--bth-body-bg);
|
|
color: var(--bth-text);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Scrollbar personalizada */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #6c757d; }
|
|
```
|
|
|
|
## Fonte Open Sans
|
|
|
|
- **Via pacote NPM (recomendado sem request externo):** `@fontsource/open-sans`
|
|
- **Ou via `<link>` no `index.html`:**
|
|
|
|
```html
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet" />
|
|
```
|
|
|
|
## Regras
|
|
|
|
✅ **Correto:** usar `var(--bth-primary)` nos componentes
|
|
✅ **Correto:** o arquivo global é a única fonte das variáveis — componentes não redeclaram
|
|
❌ **Incorreto:** declarar cores hardcoded (`#007bff`, `#343a40`) diretamente nos componentes
|
|
❌ **Incorreto:** ter `--bth-*` duplicadas em múltiplos arquivos CSS
|
|
|
|
## Impacto
|
|
|
|
Garante consistência visual entre todos os frontends do módulo e facilita troca de tema — alterar uma variável reflete em todo o sistema.
|
|
|
|
## Referências
|
|
|
|
- Identidade do Módulo: `memorias-ia/modulo.yml`
|
|
- Rule: `estilos-design-system`
|