@desenvolvimento-digital/add-theme
v1.1.0
Published
CLI interativo que gera uma pasta theme/ com o tema MUI do Design System do time (cor, tom neutro, tipografia, espaçamento/elevação, componentes) — roda dentro de qualquer projeto que já use MUI.
Downloads
324
Readme
add-theme
CLI interativo que gera uma pasta theme/ com o tema do MUI já configurado
com as escolhas do Design System do time (cor, tipografia,
espaçamento/elevação) — pega os mesmos valores do guia no Figma
(DESIGN_SYSTEM: Cores, Tipografia, Espaçamento & Elevação, Tema Light & Dark).
Diferente do scaffolding completo (que cria um projeto do zero), esse aqui roda dentro de qualquer projeto que você já tenha — só precisa ter (ou instalar) o MUI.
Uso
Dentro da raiz do projeto onde você quer o tema:
npx add-theme(depois de publicado; rodando local, ver "Rodando local" abaixo)
O CLI pergunta, em ordem:
- Nome da pasta —
themepor padrão. Se já existir uma pasta com esse nome, ele avisa (e diz se já tem um tema dentro —index.ts,index.tsx,theme.tsoutheme.tsx) e pergunta se pode sobrescrever o conteúdo. Resposta padrão é Não — se você não confirmar, ele cancela sem mexer em nada. Se confirmar, apaga a pasta inteira e recria do zero (não dá pra sobrescrever parcialmente). - Combinação de cor — combo1 (vermelho + laranja, erro em rosa/magenta pra não colidir com o vermelho da primária), combo2 (verde + dourado) ou combo3 (azul + roxo), com prévia da cor no terminal.
- Tom neutro — a escala usada em fundo, texto e bordas (
theme.palette.greybackground/text/divider), independente do combo de cor: Areia (tom quente nos degraus claros, frio/azulado nos escuros), Azulado (frio do começo ao fim) ou Neutro (cinza puro, sem matiz).
- Tipografia — Roboto, Inter, Open Sans, Poppins ou IBM Plex Sans.
- Espaçamento — Densa, Compacta, Padrão ou Confortável.
- Elevação (sombras) — Plana (sem sombra), Sutil ou Pronunciada.
- Componentes — checklist de quais overrides incluir no tema (AppBar, IconButton, Button, Campo de texto, Card, Chip, Alert, Dialog, Menu/Select, Tabs, Table, Switch/Checkbox/Radio, Tooltip, Paper/Divider/Avatar/Progress). Vem tudo marcado por padrão — desmarca o que não precisa.
Antes de confirmar, mostra uma prévia com as cores (com bloco de cor no terminal), fonte, os steps de espaçamento, os níveis de elevação e a lista de componentes escolhidos.
E gera:
theme/
index.ts # export const useThemeConfig = createTheme({ ... })Com cores (incluindo contrastText já verificado em AA), tipografia,
espaçamento (via theme.spacing()) e sombras — tudo pronto, sem precisar
mexer em nada. O nome useThemeConfig segue o padrão do time — apesar do
prefixo use, é só um valor (createTheme(...) já resolvido), não um hook
de verdade: pode importar e usar em qualquer lugar, sem regra de hook.
Cada role de cor (primary, secondary etc.) tem 4 tons —
light/main/dark/contrastText. main é pensado pra preencher
(botão, chip, badge — sempre com contrastText em cima, já verificado em
AA). Pra usar a cor como texto/ícone solto sobre o fundo padrão, use o tom
dark (no modo claro) — ele é o único dos quatro garantido em AA (≥4.5:1)
contra o background.default em todos os combos.
Ao final, ele avisa:
- Se faltam instalar
@mui/material,@emotion/reactou@emotion/styled(checa opackage.jsonda pasta atual). - O snippet pra plugar o tema (
ThemeProvider+CssBaseline). - O
<link>da fonte escolhida (Google Fonts) pra colar no<head>.