58 lines
2.0 KiB
Markdown
58 lines
2.0 KiB
Markdown
# 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
|