it is time

tasks/subtasks/theme-refactoring-02-convert-themes.md

@@ -0,0 +1,77 @@
+# 02. Convert Existing Themes to JSON Format
+
+meta:
+  id: theme-refactoring-02
+  feature: theme-refactoring-json-format
+  priority: P0
+  depends_on: [theme-refactoring-01]
+  tags: [implementation, migration]
+
+objective:
+- Convert all existing PodTui themes (catppuccin, gruvbox, tokyo, nord) from TypeScript constants to JSON format
+- Ensure each theme matches the opencode JSON structure
+- Maintain color fidelity with original theme definitions
+
+deliverables:
+- `src/themes/catppuccin.json` - Catppuccin theme in JSON format
+- `src/themes/gruvbox.json` - Gruvbox theme in JSON format
+- `src/themes/tokyo.json` - Tokyo Night theme in JSON format
+- `src/themes/nord.json` - Nord theme in JSON format
+
+steps:
+- Step 2.1: Convert `catppuccin` theme from `src/types/desktop-theme.ts` to JSON
+  - Extract all color definitions from `THEMES_DESKTOP.variants.find((v) => v.name === "catppuccin")!.colors`
+  - Create `defs` object with all color references (dark and light variants)
+  - Create `theme` object with semantic mappings
+  - Add `$schema` reference
+  - Verify color values match original definitions
+
+- Step 2.2: Convert `gruvbox` theme from `src/types/desktop-theme.ts` to JSON
+  - Extract all color definitions from `THEMES_DESKTOP.variants.find((v) => v.name === "gruvbox")!.colors`
+  - Create `defs` object with all color references
+  - Create `theme` object with semantic mappings
+  - Add `$schema` reference
+
+- Step 2.3: Convert `tokyo` theme from `src/types/desktop-theme.ts` to JSON
+  - Extract all color definitions from `THEMES_DESKTOP.variants.find((v) => v.name === "tokyo")!.colors`
+  - Create `defs` object with all color references
+  - Create `theme` object with semantic mappings
+  - Add `$schema` reference
+
+- Step 2.4: Convert `nord` theme from `src/types/desktop-theme.ts` to JSON
+  - Extract all color definitions from `THEMES_DESKTOP.variants.find((v) => v.name === "nord")!.colors`
+  - Create `defs` object with all color references
+  - Create `theme` object with semantic mappings
+  - Add `$schema` reference
+
+- Step 2.5: Verify all JSON files are valid
+  - Check syntax with `bun run typecheck`
+  - Ensure all imports work correctly
+
+tests:
+- Unit:
+  - Test each JSON file can be imported without errors
+  - Verify color values match original TypeScript definitions
+
+- Integration/e2e:
+  - Load each theme and verify all colors are present
+  - Check that theme structure matches expected schema
+
+acceptance_criteria:
+- All four theme JSON files exist in `src/themes/`
+- Each JSON file follows the theme schema
+- Color values match original theme definitions exactly
+- All JSON files are valid and can be parsed
+
+validation:
+- Run: `bun run typecheck` - Should pass
+- Run: `cat src/themes/catppuccin.json | jq .` - Should be valid JSON
+- Run: `cat src/themes/gruvbox.json | jq .` - Should be valid JSON
+- Run: `cat src/themes/tokyo.json | jq .` - Should be valid JSON
+- Run: `cat src/themes/nord.json | jq .` - Should be valid JSON
+
+notes:
+- Use opencode's theme structure as reference
+- Maintain backward compatibility with existing color definitions
+- Ensure both dark and light variants are included if available
+- Reference: `/home/mike/code/PodTui/opencode/packages/opencode/src/cli/cmd/tui/context/theme/`