91 lines
2.7 KiB
Text
91 lines
2.7 KiB
Text
---
|
|
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
|
|
|
|
- Memória: https://memoria-ia.idz.one (código: 60)
|
|
- Rule: `estilos-design-system`
|
|
- Rule: `css-global-betha`
|