61 lines
3.3 KiB
Markdown
61 lines
3.3 KiB
Markdown
# Especificação da Feature: Light Theme
|
|
|
|
## Visão Geral
|
|
|
|
Permitir alternância entre tema escuro (Linear dark) e tema claro em todo o sistema (frontend React e páginas administrativas), promovendo acessibilidade, preferência visual e consistência de design. O tema claro deve ser moderno, acessível (contraste AA+), fácil de alternar e documentado para uso futuro.
|
|
|
|
## Atores
|
|
- Usuário final (clientes, visitantes)
|
|
- Administrador do sistema
|
|
|
|
## Cenários de Usuário & Testes
|
|
- Usuário acessa o sistema e visualiza o tema de acordo com a preferência do sistema operacional ("prefers-color-scheme")
|
|
- Usuário alterna manualmente entre tema claro e escuro via toggle global (ícone sol/lua no Navbar e painel admin)
|
|
- Preferência de tema é persistida (localStorage) e respeitada em visitas futuras
|
|
- Todas as páginas, componentes e formulários refletem corretamente o tema selecionado
|
|
- Em SSR/hidratação, o tema correto é aplicado sem "flash" de tema incorreto
|
|
- Contraste mínimo AA+ garantido em todos os estados (normal, hover, disabled)
|
|
- Novos componentes podem adotar tokens de cor documentados
|
|
|
|
## Requisitos Funcionais
|
|
1. Implementar paleta de cores clara (backgrounds, textos, bordas, acentos, hover, muted, etc) consistente e acessível
|
|
2. Adicionar alternância global de tema (toggle) visível no Navbar e painel admin, com ícone sol/lua
|
|
3. Persistir escolha do usuário em localStorage e sincronizar com prefers-color-scheme do SO
|
|
4. Configurar Tailwind CSS para suportar dark/light usando a estratégia 'class'
|
|
5. Garantir que todos os componentes, páginas e formulários respeitem o tema ativo
|
|
6. Documentar tokens de cor (nomes, exemplos, guidelines de uso e contraste)
|
|
7. Garantir fallback seguro para SSR/hidratação e acessibilidade (contraste mínimo, foco visível)
|
|
|
|
## Critérios de Sucesso
|
|
- Usuário pode alternar entre temas e a escolha é lembrada em visitas futuras
|
|
- Tema claro apresenta contraste AA+ em todos os elementos
|
|
- Nenhum componente exibe cores erradas ou ilegíveis ao alternar tema
|
|
- Preferência do SO é respeitada na primeira visita
|
|
- Documentação de tokens e guidelines disponível para desenvolvedores
|
|
- Não há "flash" de tema incorreto em SSR/hidratação
|
|
|
|
## Entidades/Objetos-Chave
|
|
- Tokens de cor: bg, text, border, accent, muted, hover, etc
|
|
- Preferência de tema: 'light', 'dark', 'system'
|
|
- Componente de alternância (toggle)
|
|
|
|
## Restrições & Assunções
|
|
- Tema escuro (Linear dark) já está implementado
|
|
- Tema claro deve ser consistente com o dark, mas otimizado para acessibilidade
|
|
- Persistência via localStorage; fallback para prefers-color-scheme
|
|
- Tailwind já instalado; estratégia 'class' será usada
|
|
- SSR pode ser relevante para futuras versões/admin
|
|
|
|
## Edge Cases
|
|
- SSR/hidratação: evitar "flash" de tema incorreto
|
|
- Usuário sem suporte a localStorage: fallback para sistema
|
|
- Contraste mínimo em todos os estados (hover, disabled, etc)
|
|
- Acessibilidade: foco visível, sem dependência exclusiva de cor
|
|
|
|
## Documentação
|
|
- Listar tokens de cor, exemplos de uso e guidelines para novos componentes
|
|
- Instruções para desenvolvedores sobre como aplicar tokens e garantir contraste
|
|
|
|
---
|
|
|
|
*Esta especificação não inclui detalhes de implementação, frameworks ou código. Foco em valor ao usuário, acessibilidade e consistência visual.*
|