WORK-067
ID:WORK-067Status:done

Lumina Universal Dimension CSS

Priority:highComplexity:moderateMilestone:v0.9.0Source:SPEC-025,SPEC-026
changeset-release/main View source

Criteria completion

No incremental history — criteria tracking started on Apr 19.

Relationships

Implements 2
Related 3
Branches 3
changeset-release/main current done
main doneclaude/file-naming-convention-LJdwR doneclaude/align-sidenav-styling-4MuxV done
History 6
  1. f2b3512
    Content editedby Claude
    Add {ID}-{slug}.md filename convention + migrate filenames subcommand
  2. 59ded4a
    Content editedby Claude
    Implement SPEC-037 plan package hardening: all 7 work items
  3. f262d7b
    Content editedby Claude
    Backfill source attributes on all 123 work items
  4. 387be9c
    Content editedby Claude
    feat(lumina): add universal dimension CSS (WORK-067)
  5. a129a9e
    Content editedby Claude
    Assign all new work items (WORK-051–068) to v0.9.0 milestone
  6. a333007
    Created (done)by Claude
    Add work items for SPEC-024 (Metadata) and SPEC-025 (Universal Theming)

Summary

Write the universal dimension CSS in Lumina: density rules (~3 + interactions), section anatomy rules (~6), interactive state rules (~6), media slot rules (~5), and surface assignments (~4 groups). Combined with the metadata CSS (WORK-061), this gives Lumina ~40 generic rules covering every rune in the ecosystem.

Acceptance Criteria

  • Density CSS: [data-density="full"], [data-density="compact"], [data-density="minimal"] with padding, description truncation, and secondary metadata hiding
  • Section anatomy CSS: [data-section="header"], title, description, body, footer, media with layout, typography, and spacing
  • Density × section interactions: title font scales with density, descriptions hide at minimal, footers hide at minimal
  • Interactive state CSS: [data-state="open/closed"] show/hide with animation, [data-state="active/inactive"] tab indicators, [data-state="selected"] highlight, [data-state="disabled"] dimming
  • Media slot CSS: portrait (circular, 5rem), cover (16:9, full-width), thumbnail (3rem square), hero (responsive), icon (2rem square)
  • Media × density: compact shrinks portraits and covers, minimal hides all media
  • Surface assignments: runes grouped into card/inline/banner/inset selector lists per SPEC-026
  • Surface × density interaction via --rune-padding custom property
  • CSS coverage tests updated for all new selectors
  • Per-rune CSS that is now redundant identified for future cleanup

Approach

Create dimension CSS files in packages/lumina/styles/dimensions/: density.css, sections.css, state.css, media.css, surfaces.css. Import in packages/lumina/index.css. Reference design tokens throughout — never hard-code values.

References

  • SPEC-025 (Universal Theming Dimensions — all Theme CSS sections)
  • SPEC-026 (Lumina Theme — full spec)