2026-09-28 22:18:39 -03:00

2.7 KiB

Raw Blame History

type	name	description	scope	trigger	priority	updatedAt
rule	theme-provider-mui-betha	Define a arquitetura centralizada do ThemeProvider MUI Betha nos frontends React do ecossistema GOV (AUTENTICACAO-FRONT, QUIPO-FRONT, QUIPO-PORTAL3)	global	model_decision	alta	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`

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

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

2.7 KiB Raw Blame History