101 lines
3 KiB
Text
101 lines
3 KiB
Text
---
|
|
type: rule
|
|
name: css-global-betha
|
|
description: Define o padrão de CSS global com variáveis --bth-* para todos os frontends do ecossistema GOV (QUIPO-FRONT, QUIPO-PORTAL3, AUTENTICACAO-FRONT, QUIPO-CONSOLE)
|
|
scope: global
|
|
trigger: context_match
|
|
priority: alta
|
|
updatedAt: "2026-07-02"
|
|
---
|
|
|
|
# Regra: CSS Global Betha — Variáveis `--bth-*`
|
|
|
|
Todo frontend do ecossistema GOV deve possuir um arquivo CSS global com as variáveis `--bth-*` e reset visual Betha.
|
|
|
|
## Localização por Frontend
|
|
|
|
| Frontend | Arquivo | Importado em |
|
|
|----------|---------|-------------|
|
|
| QUIPO-FRONT | `src/styles/index.css` | `index.tsx` |
|
|
| QUIPO-PORTAL3 | `src/styles/globals.css` | `layout.tsx` |
|
|
| AUTENTICACAO-FRONT | `src/styles/global.css` | `App.tsx` |
|
|
| QUIPO-CONSOLE | `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
|
|
|
|
- **QUIPO-PORTAL3:** usa `@fontsource/open-sans` (npm package) — sem request externo
|
|
- **Outros frontends:** importar 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 e facilita troca de tema — alterar uma variável reflete em todo o sistema.
|
|
|
|
## Referências
|
|
|
|
- Rule: `estilos-design-system`
|