---
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: model_decision
priority: alta
updatedAt: "2026-09-28"
---

# 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`