aprimoração de ia

rules/theme-provider-mui-betha.md

@@ -0,0 +1,90 @@
+---
+type: rule
+name: theme-provider-mui-betha
+description: Define a arquitetura centralizada do ThemeProvider MUI Betha nos frontends React do ecossistema GOV (AUTENTICACAO-FRONT, QUIPO-FRONT, QUIPO-PORTAL3)
+scope: global
+trigger: context_match
+priority: alta
+updatedAt: "2026-07-02"
+---
+
+# Regra: ThemeProvider MUI Centralizado — Arquitetura Betha
+
+Os frontends React do ecossistema GOV usam MUI com tema centralizado. **Nunca criar temas locais em componentes.**
+
+## Arquitetura de Camadas
+
+```
+themeOptions.ts
+    ├── tema-betha.ts     → createTheme(themeOptions)           — marca Betha
+    ├── tema-e-licencie.ts → createTheme({...themeOptions,       — marca e-licencie
+    │                         palette: { primary: { main: "#688c00" } }})
+    └── tema.ts           → exporta { tema } baseado em eBetha()
+                                      ↓
+                              index.tsx / App.tsx
+                              <ThemeProvider theme={tema.tema}>
+```
+
+## Tokens do `themeOptions.ts`
+
+```typescript
+const themeOptions = {
+  palette: {
+    primary:   { main: "#007bff", dark: "#0069d9" },
+    secondary: { main: "#6c757d" },
+    error:     { main: "#dc3545" },
+    warning:   { main: "#ffc107" },
+    info:      { main: "#17a2b8" },
+    success:   { main: "#28a745" },
+    background:{ default: "#EBEDF0", paper: "#ffffff" },
+  },
+  typography: {
+    fontFamily: '"Open Sans", Arial, sans-serif',
+    fontSize: 14,
+    button: { textTransform: "none" },
+  },
+  shape: {
+    borderRadius: 4, // 0.25rem
+  },
+  shadows: [
+    "none",
+    "0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15)",
+    // ... MUI padrão para os demais
+  ],
+};
+```
+
+## Regras
+
+✅ **Correto:** importar `tema` de `styles/tema-betha.ts` quando um componente isolado precisa de ThemeProvider próprio  
+✅ **Correto:** `themeOptions.ts` é a única fonte de tokens — modificar só lá  
+❌ **Incorreto:** `createTheme()` vazio ou com tokens hardcoded dentro de componentes  
+❌ **Incorreto:** múltiplos `ThemeProvider` aninhados com temas distintos  
+
+## Exemplo — Componente que precisa de ThemeProvider próprio
+
+```typescript
+// ✅ Importar de styles/tema-betha.ts, NUNCA criar novo
+import { tema } from "@/styles/tema-betha";
+
+<ThemeProvider theme={tema}>
+  <Passos />
+</ThemeProvider>
+```
+
+## AUTENTICACAO-FRONT — Estrutura específica
+
+```
+src/_FRONT/Components/Plugins/tema.ts
+  → exporta themeBetha e themeELicencie
+  → App.tsx decide qual usar via eBetha()
+```
+
+## Impacto
+
+Evita divergências visuais entre telas e garante que a troca de marca (Betha ↔ e-licencie) seja controlada por um único ponto.
+
+## Referências
+
+- Rule: `estilos-design-system`
+- Rule: `css-global-betha`