89 lines
3.9 KiB
Markdown
89 lines
3.9 KiB
Markdown
---
|
|
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
|