gitadmin/sass-imobiliaria
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
sass-imobiliaria/specs/008-light-theme/plan.md

2.5 KiB
Raw Blame History

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