---
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