.agent/global/rules/theme-provider-mui-betha.md

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

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

// ✅ 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