60 lines
2.5 KiB
Markdown
60 lines
2.5 KiB
Markdown
# Plano de Implementação — Feature 008: Light Theme
|
|
|
|
## Objetivo
|
|
Implementar tema claro global, alternância dark/light, tokens de cor, guidelines e integração com Tailwind. Atualizar ou criar design.md com guidelines e tokens para futuras implementações.
|
|
|
|
## Escopo
|
|
- Suporte a tema claro e escuro (dark/light) global
|
|
- Alternância de tema (toggle) no Navbar/Admin
|
|
- Tokens de cor theme-aware (bg, text, border, accent, muted, etc)
|
|
- Guidelines e exemplos em design.md
|
|
- Integração com Tailwind CSS (estratégia 'class')
|
|
- Refatoração dos principais componentes/páginas para tokens theme-aware
|
|
- Testes de acessibilidade (contraste, foco, etc)
|
|
- Documentação para devs
|
|
|
|
---
|
|
|
|
## 1. Atualização do Tailwind para Suporte a Temas
|
|
- [ ] Configurar `tailwind.config.ts` para estratégia `darkMode: 'class'`
|
|
- [ ] Definir tokens de cor para ambos temas (light/dark) via `extend.colors` e CSS custom properties
|
|
- [ ] Garantir que tokens sejam facilmente consumidos via classes utilitárias e/ou `@apply`
|
|
|
|
## 2. Tokens de Cor e Guidelines
|
|
- [ ] Mapear tokens: bg, text, border, accent, muted, hover, etc para ambos temas
|
|
- [ ] Documentar tokens e exemplos de uso em `DESIGN.md`
|
|
- [ ] Adicionar recomendações de contraste e fallback seguro
|
|
|
|
## 3. ThemeProvider/Contexto
|
|
- [ ] Criar contexto React para alternância de tema (`ThemeProvider`)
|
|
- [ ] Implementar persistência da escolha (localStorage)
|
|
- [ ] Sincronizar com `prefers-color-scheme` do SO
|
|
- [ ] Garantir SSR/hidratação sem "flash" de tema incorreto
|
|
|
|
## 4. Toggle de Tema
|
|
- [ ] Adicionar toggle (ícone sol/lua) no Navbar e painel admin
|
|
- [ ] Garantir acessibilidade do toggle (foco, aria-label, contraste)
|
|
|
|
## 5. Refatoração de Componentes
|
|
- [ ] Refatorar principais componentes/páginas para usar tokens e classes theme-aware
|
|
- [ ] Garantir que todos respeitem o tema ativo
|
|
|
|
## 6. Testes de Acessibilidade
|
|
- [ ] Testar contraste mínimo AA+ em todos os estados
|
|
- [ ] Garantir foco visível e navegação por teclado
|
|
- [ ] Validar ausência de "flash" de tema incorreto
|
|
|
|
## 7. Documentação
|
|
- [ ] Atualizar/criar seção de guidelines de tema em `DESIGN.md`
|
|
- [ ] Exemplos de uso de tokens, recomendações de contraste, como estender o tema
|
|
- [ ] Passos para devs integrarem novos componentes ao sistema de temas
|
|
|
|
---
|
|
|
|
## Critérios de Aceite
|
|
- Alternância de tema funcional e persistente
|
|
- Contraste AA+ garantido
|
|
- Documentação clara para devs
|
|
- Nenhum componente com cor ilegível ao alternar tema
|
|
- Preferência do SO respeitada na primeira visita
|
|
- Sem "flash" de tema incorreto em SSR/hidratação
|