ID:WORK-034Status:donePriority:mediumComplexity:moderate
Plan Dashboard Theme
Summary
Default and minimal CSS themes for the plan dashboard rendered by serve and build commands. Status badge colors, priority indicators, progress bars, entity cards, sidebar navigation, and responsive dashboard grid.
Acceptance Criteria
- Default theme with status badge colors (grey/blue/yellow/green/red) and priority colors (critical=red, high=orange, medium=yellow, low=grey)
- Complexity dot indicators
- Checklist progress bars with fraction labels (e.g.,
████░░░░░░ 2/5) - Entity card layout (bordered cards with header, title, meta line)
- Dashboard grid (responsive column layout for backlog sections)
- Sidebar navigation with entity type grouping
- Cross-reference links styled with entity type icon prefix
- Minimal theme (clean typography, no color/badges, print-friendly)
- Both themes target standard BEM classes from plan rune configs
Approach
CSS-only — no JavaScript. Use design tokens from packages/lumina/tokens/base.css as reference but define plan-specific tokens. The themes target .rf-spec, .rf-work, .rf-bug, .rf-decision, .rf-milestone blocks and their BEM elements/modifiers as defined in runes/plan/src/config.ts.
References
- SPEC-022 (Plan CLI)
runes/plan/src/config.ts(rune configs defining BEM structure)packages/lumina/tokens/base.css(design token reference)