.agent/global/rules/css-global-betha.md

type	name	description	scope	trigger	priority	updatedAt
rule	css-global-betha	Define o padrão de CSS global com variáveis --bth-* para os frontends de gestão pública/governo do ecossistema	global	model_decision	alta	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

: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

• Via pacote NPM (recomendado sem request externo): @fontsource/open-sans
• Ou 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 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