pause to fix nav/theme

tasks/podtui-navigation-theming-improvements/15-update-components-to-use-themes.md

@@ -0,0 +1,60 @@
+# 15. Update Components to Use Theme Tokens
+
+meta:
+  id: podtui-navigation-theming-improvements-15
+  feature: podtui-navigation-theming-improvements
+  priority: P3
+  depends_on: [podtui-navigation-theming-improvements-14]
+  tags: [theming, implementation, component-updates]
+
+objective:
+- Replace all hardcoded colors with theme tokens
+- Update all components to use theme context
+- Ensure consistent theme application across all components
+
+deliverables:
+- Updated components using theme tokens
+- Theme token usage guide
+- List of components updated
+
+steps:
+- Review all components in src/components/
+- Identify all hardcoded color values
+- Replace hardcoded colors with theme tokens:
+  - Background colors (background-base, surface-base, etc.)
+  - Text colors (text-base, text-weak, etc.)
+  - Border colors (border-base, border-hover, etc.)
+  - Interactive colors (interactive-base, interactive-hover, etc.)
+  - Color tokens (success, warning, error, etc.)
+  - Layer navigation colors (layer-active-bg, layer-inactive-bg, etc.)
+- Update src/constants/themes.ts to export theme tokens
+- Update all components to use theme context
+- Test theme tokens in all components
+- Verify no hardcoded colors remain
+- Create theme token usage guide
+
+tests:
+- Unit: Test theme tokens in individual components
+- Integration: Test theme tokens in all components
+
+acceptance_criteria:
+- All hardcoded colors are replaced with theme tokens
+- All components use theme tokens
+- Theme tokens are exported from themes.ts
+- Theme token usage guide is created
+- No console errors related to theming
+- All components render correctly with theme tokens
+
+validation:
+- Run `bun run start` and verify all components use theme tokens
+- Test theme selection and color scheme switching
+- Verify all components render correctly
+- Check console for errors
+- Verify no hardcoded colors remain
+
+notes:
+- Use references/solid/REFERENCE.md for SolidJS patterns
+- Follow opencode theming implementation patterns
+- Ensure consistent theme application across all components
+- Test theme tokens in all components
+- Verify backward compatibility if needed