WORK-034
ID:WORK-034Status:done

Plan Dashboard Theme

Priority:mediumComplexity:moderateSource:SPEC-022
changeset-release/main View source

Criteria completion

No incremental history — criteria tracking started on Apr 19.

Relationships

Implements 1
Related 1
Branches 3
changeset-release/main current done
main doneclaude/file-naming-convention-LJdwR doneclaude/align-sidenav-styling-4MuxV done
History 5
  1. f2b3512
    Content editedby Claude
    Add {ID}-{slug}.md filename convention + migrate filenames subcommand
  2. f262d7b
    Content editedby Claude
    Backfill source attributes on all 123 work items
  3. 799082c
    Content editedby Claude
    Add plan dashboard default and minimal CSS themes (WORK-034)
  4. ebe0c64
    Content editedby Claude
    Migrate plan files to {% ref %} xref syntax (WORK-021)
  5. 30b2ae0
    Created (done)by Claude
    Add 9 work items for SPEC-022 (Plan CLI) implementation

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)