---
type: rule
name: theme-provider-mui-betha
description: Define a arquitetura centralizada do ThemeProvider MUI Betha nos frontends React de gestão pública (<modulo>-front)
scope: global
trigger: model_decision
priority: alta
updatedAt: "2026-10-14"
---

# Regra: ThemeProvider MUI Centralizado — Arquitetura Betha

Nos módulos cujo `memorias-ia/modulo.yml` (`modulo-tipo`) utiliza frontend React com Material UI (MUI) voltado à gestão pública, o pacote `<modulo>-front` deve usar tema centralizado. **Nunca criar temas locais em componentes.**

## Arquitetura de Camadas

```
themeOptions.ts
    ├── tema-betha.ts      → createTheme(themeOptions)           — marca Betha
    ├── tema-padrao.ts     → createTheme({...themeOptions,       — marca white-label alternativa
    │                         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` (ou `Plugins/tema.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>
```

## Impacto

Evita divergências visuais entre telas e garante que a troca dinâmica de marca white-label seja controlada por um único ponto.

## Referências

- Identidade do Módulo: `memorias-ia/modulo.yml`
- Rule: `estilos-design-system`
- Rule: `css-global-betha`