3.9 KiB
3.9 KiB
| description |
|---|
| Tasks para a feature 008 - Light Theme |
Tasks: Light Theme (008)
Input: Design documents de /specs/008-light-theme/
Prerequisites: plan.md (required), spec.md (required)
Phase 1: Setup (Shared Infrastructure)
Purpose: Inicialização e configuração base para suporte a temas
- T001 Atualizar Tailwind para
darkMode: 'class'em frontend/tailwind.config.ts - T002 [P] Adicionar dependências/utilitários necessários para alternância de tema em frontend/package.json
Phase 2: Foundational (Blocking Prerequisites)
Purpose: Definir tokens, guidelines e base para alternância
- T003 Definir tokens de cor (bg, text, border, accent, muted, hover, etc) para ambos temas em frontend/tailwind.config.ts
- T004 [P] Documentar tokens, exemplos e recomendações de contraste em DESIGN.md
- T005 [P] Garantir tokens disponíveis via classes utilitárias e/ou @apply em frontend/src/index.css
Phase 3: User Story 1 (P1) — Alternância global, persistência, SSR, documentação
- T006 [US1] Criar ThemeProvider/contexto React para alternância de tema em frontend/src/contexts/ThemeContext.tsx
- T007 [P] [US1] Implementar persistência da escolha do tema (localStorage) e sincronização com prefers-color-scheme em ThemeProvider
- T008 [P] [US1] Garantir SSR/hidratação sem "flash" de tema incorreto em frontend/src/main.tsx e ThemeProvider
- T009 [US1] Adicionar toggle de tema (ícone sol/lua) no Navbar em frontend/src/components/Navbar.tsx
- T010 [P] [US1] Adicionar toggle de tema no painel admin em frontend/src/layouts/ClientLayout.tsx
- T011 [P] [US1] Garantir acessibilidade do toggle (foco, aria-label, contraste) em ambos componentes
- T012 [US1] Atualizar/criar seção de guidelines de tema em DESIGN.md (exemplos, recomendações, como estender)
Phase 4: User Story 2 (P2) — Refatoração de componentes/páginas
- T013 [US2] Refatorar principais componentes para usar tokens e classes theme-aware em frontend/src/components/
- T014 [P] [US2] Refatorar principais páginas para usar tokens e classes theme-aware em frontend/src/pages/
- T015 [P] [US2] Garantir que todos respeitem o tema ativo (testar alternância)
Phase 5: User Story 3 (P3) — Testes de acessibilidade e documentação para devs
- T016 [US3] Testar contraste mínimo AA+ em todos os estados (normal, hover, disabled) nos principais componentes/páginas
- T017 [P] [US3] Garantir foco visível e navegação por teclado nos toggles e componentes principais
- T018 [P] [US3] Validar ausência de "flash" de tema incorreto em SSR/hidratação
- T019 [US3] Documentar para devs: exemplos de uso de tokens, recomendações de contraste, como estender o tema e integrar novos componentes em DESIGN.md
Phase 6: Polish & Cross-Cutting Concerns
- T020 Revisar documentação e exemplos em DESIGN.md
- T021 [P] Revisar todos os componentes para garantir consistência visual e acessibilidade
Dependencies
- Phase 1 → Phase 2 → Phase 3 (US1) → Phase 4 (US2) → Phase 5 (US3) → Phase 6
- Tasks marcadas com [P] podem ser executadas em paralelo dentro da mesma fase
Parallel Execution Examples
- T002 e T003 podem rodar em paralelo
- T007, T008, T010, T011 podem rodar em paralelo após T006
- T014 e T015 podem rodar em paralelo após T013
- T017 e T018 podem rodar em paralelo após T016
Independent Test Criteria
- US1: Alternância funcional, persistência, sem flash, documentação clara
- US2: Todos componentes/páginas respeitam tema ativo
- US3: Contraste AA+, foco visível, documentação para devs
MVP Scope
- Fase 3 (US1): Alternância global, persistência, SSR/hidratação, documentação inicial
Formato Validado
- Todos os tasks seguem o formato checklist: checkbox, ID, [P] se paralelizável, [USx] se de user story, caminho de arquivo