WORK-071
ID:WORK-071Status:done

Lumina Per-Rune Redundant CSS Cleanup

Priority:lowComplexity:moderateMilestone:v0.9.0Source:SPEC-025
main View source

Criteria completion

Criteria completion: 8 of 8 (100%) checked; history from Mar 24 to Mar 300%25%50%75%100%Mar 24Mar 30

Relationships

Implements 1
Related 4
Branches 3
main current done
claude/file-naming-convention-LJdwR donechangeset-release/main doneclaude/align-sidenav-styling-4MuxV done
History 6
  1. e900a90
    Created (done)by bjornolofandersson
  2. f262d7b
    Content editedby Claude
  3. 2637549
    • ☑ 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
    by Björn Andersson
  4. 6d13c51
    statusready→done
    by Claude
  5. 3e9d54e
    Created (ready)by Claude
    Add work items WORK-071 through WORK-075 for SPEC-027
  6. 16ce31d
    Created (ready)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.