PodTui/tasks/podtui-navigation-theming-improvements/08-design-active-layer-colors.md

08. Design Active Layer Background Color System

meta: id: podtui-navigation-theming-improvements-08 feature: podtui-navigation-theming-improvements priority: P1 depends_on: [podtui-navigation-theming-improvements-05] tags: [implementation, theming, navigation]

objective:

• Design active layer background colors for each depth level
• Define color palette for layer backgrounds
• Create theme-aware layer styling
• Implement visual hierarchy for layers

deliverables:

• Enhanced theme system with layer backgrounds
• Layer background colors for all themes
• Visual hierarchy implementation
• Theme tokens for layer backgrounds

steps:

• Review existing theme system in src/constants/themes.ts
• Design layer background colors for layer 0-3
• Define color palette that works with existing themes
• Add layerBackgrounds property to theme colors
• Implement layer background rendering in Layout component
• Add visual indicators for active/inactive layers
• Ensure colors work with system/light/dark modes
• Test layer color transitions

tests:

• Unit: Test theme layer backgrounds
• Integration: Test layer color rendering

acceptance_criteria:

• Layer background colors are defined for all themes
• Active layer is clearly visible with distinct background
• Inactive layers have subtle background variations
• Visual hierarchy is clear between layers
• Colors work with all theme modes
• Layer backgrounds are accessible and readable

validation:

• Run bun run start and test layer colors
• Verify layer backgrounds appear at different depths
• Check that active layer is clearly visible
• Test with different themes (catppuccin, gruvbox, etc.)
• Verify colors work in both light and dark modes

notes:

• Use existing theme colors for layer backgrounds
• Ensure high contrast for readability
• Colors should be subtle but clearly visible
• Consider terminal color limitations
• Design should be consistent with existing UI elements