2026-09-28 22:18:39 -03:00

3 KiB

Raw Blame History

type	name	description	scope	trigger	priority	updatedAt
rule	css-global-betha	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)	global	model_decision	alta	2026-09-28

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

: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

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:

<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

3 KiB Raw Blame History

Regra: CSS Global Betha — Variáveis --bth-*