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

Implementar paleta de cores clara (backgrounds, textos, bordas, acentos, hover, muted, etc) consistente e acessível
Adicionar alternância global de tema (toggle) visível no Navbar e painel admin, com ícone sol/lua
Persistir escolha do usuário em localStorage e sincronizar com prefers-color-scheme do SO
Configurar Tailwind CSS para suportar dark/light usando a estratégia 'class'
Garantir que todos os componentes, páginas e formulários respeitem o tema ativo
Documentar tokens de cor (nomes, exemplos, guidelines de uso e contraste)
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.

3.3 KiB Raw Blame History