pause to fix nav/theme

tasks/podtui-navigation-theming-improvements/12-create-css-token-system.md

@@ -0,0 +1,57 @@
+# 12. Create CSS Variable Token System
+
+meta:
+  id: podtui-navigation-theming-improvements-12
+  feature: podtui-navigation-theming-improvements
+  priority: P3
+  depends_on: [podtui-navigation-theming-improvements-11]
+  tags: [theming, implementation, css-variables]
+
+objective:
+- Create comprehensive CSS variable token system
+- Define all theme tokens for OpenTUI components
+- Generate CSS variables from theme tokens
+
+deliverables:
+- CSS variable token definitions
+- Theme CSS generation functions
+- CSS variable application utilities
+
+steps:
+- Read opencode/packages/ui/src/theme/resolve.ts for reference
+- Review opencode theme token definitions
+- Define theme tokens for OpenTUI components:
+  - Background tokens (background-base, background-weak, etc.)
+  - Surface tokens (surface-base, surface-raised, etc.)
+  - Text tokens (text-base, text-weak, etc.)
+  - Border tokens (border-base, border-hover, etc.)
+  - Interactive tokens (interactive-base, interactive-hover, etc.)
+  - Color tokens for specific states (success, warning, error, etc.)
+  - Layer navigation tokens (layer-active-bg, layer-inactive-bg, etc.)
+- Implement themeToCss function to generate CSS variables
+- Create utility to apply theme tokens to components
+- Test CSS variable generation
+
+tests:
+- Unit: Test CSS variable generation
+- Integration: Test CSS variable application in components
+
+acceptance_criteria:
+- All OpenTUI theme tokens are defined
+- CSS variable generation works correctly
+- Theme tokens can be applied to components
+- Generated CSS is valid
+- Tokens cover all component styling needs
+
+validation:
+- Run `bun run start` and verify CSS variables are applied
+- Test theme token application in components
+- Check CSS variable values
+- Verify tokens work with existing components
+
+notes:
+- Use references/solid/REFERENCE.md for SolidJS patterns
+- Follow opencode theming implementation patterns
+- Ensure tokens are comprehensive and well-organized
+- Test token application in various components
+- Consider backward compatibility with existing hardcoded colors