78 lines
3.2 KiB
Markdown
78 lines
3.2 KiB
Markdown
# 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/`
|