83 lines
2.7 KiB
Markdown
83 lines
2.7 KiB
Markdown
---
|
|
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`
|