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

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