WORK-071
ID:WORK-071Status:done

Lumina Per-Rune Redundant CSS Cleanup

Priority:lowComplexity:moderateMilestone:v0.9.0
claude/align-sidenav-styling-4MuxV View source

Criteria completion

No incremental history — criteria tracking started on Apr 17.

Relationships

Implements 1
Related 4
Branches 3
claude/align-sidenav-styling-4MuxV current done
main doneclaude/file-naming-convention-LJdwR donechangeset-release/main done
History 3
  1. 2637549
    Content editedby Björn Andersson
    chore(plan): create v1.0.0 milestone, complete v0.9.0, fix acceptance cr
  2. 6d13c51
    Content editedby Claude
    chore(plan): update v0.9.0 work item statuses after review
  3. 16ce31d
    Created (done)by Claude
    plan: add WORK-071 for per-rune redundant CSS cleanup

Summary

Now that universal dimension CSS handles density, section anatomy, interactive state, media slots, and surface assignments generically, many per-rune CSS files in packages/lumina/styles/runes/ contain redundant rules that duplicate what the dimension layers provide. Audit each rune CSS file and remove rules that are now covered by the dimension CSS, keeping only rune-specific styling that can't be expressed generically.

Acceptance Criteria

  • Each per-rune CSS file in packages/lumina/styles/runes/ audited against dimension CSS
  • Redundant surface rules removed (background, border, border-radius, padding duplicating surfaces.css)
  • Redundant section layout rules removed (header flex, title font-size, description color duplicating sections.css)
  • Redundant density rules removed (compact/minimal overrides duplicating density.css)
  • Redundant state rules removed (open/closed, active/inactive duplicating state.css)
  • Rune-specific overrides preserved (unique layouts, custom structures, variant-specific styling)
  • CSS coverage tests still pass after cleanup
  • Visual regression check on site dev server confirms no breakage

Approach

  1. For each rune CSS file, diff its selectors against the dimension CSS files
  2. Remove rules where the dimension CSS provides identical or equivalent styling
  3. Keep rules that are genuinely rune-specific (e.g., accordion's details/summary styling, tab bar layout, recipe meta grid)
  4. Run CSS coverage tests after each batch of changes
  5. Spot-check key runes in the dev server

References

  • WORK-067 (Lumina Universal Dimension CSS)
  • SPEC-025 (Universal Theming Dimensions)

Resolution

Completed: 2026-03-30

All per-rune CSS files audited against dimension CSS. Redundant surface, section layout, density, and state rules removed while preserving rune-specific overrides. CSS coverage tests pass. Implementation completed in commit 6dc9615 but work item was not previously marked done.