PodTui/tasks/podtui-navigation-theming-improvements/11-implement-theme-resolution.md

11. Implement Theme Resolution System

meta: id: podtui-navigation-theming-improvements-11 feature: podtui-navigation-theming-improvements priority: P2 depends_on: [podtui-navigation-theming-improvements-10] tags: [theming, implementation, theme-resolution]

objective:

• Implement theme resolution system for light and dark variants
• Create theme token generation logic
• Define color scale generation functions

deliverables:

• Theme resolution functions
• Color scale generation functions
• Theme token generation logic
• Theme CSS variable generation

steps:

• Read opencode/packages/ui/src/theme/resolve.ts for reference
• Implement resolveThemeVariant function
• Implement generateNeutralScale function
• Implement generateScale function
• Implement hexToOklch and oklchToHex functions
• Implement withAlpha function
• Implement themeToCss function
• Create theme resolution constants
• Define color scale configurations
• Implement theme resolution for each theme
• Test theme resolution functions

tests:

• Unit: Test theme resolution with mocked themes
• Integration: Test theme resolution in context provider

acceptance_criteria:

• resolveThemeVariant function works correctly
• generateNeutralScale function works correctly
• generateScale function works correctly
• Color conversion functions work correctly
• themeToCss function generates valid CSS
• Theme resolution works for all themes
• Light and dark variants are resolved correctly

validation:

• Run bun run start and verify theme resolution works
• Test theme resolution for all themes
• Verify light/dark variants are correct
• Check CSS variable generation
• Test with different color schemes

notes:

• Use references/solid/REFERENCE.md for SolidJS patterns
• Follow opencode theming implementation patterns
• Ensure color scales are generated correctly
• Test color conversion functions
• Verify theme tokens match expected values