WORK-067
ID:WORK-067Status:done

Lumina Universal Dimension CSS

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

Criteria completion

Criteria completion: 9 of 10 (90%) checked; history from Mar 24 to Mar 240%25%50%75%100%Mar 24Mar 24

Relationships

Implements 2
Related 3
Branches 3
main current done
claude/file-naming-convention-LJdwR donechangeset-release/main doneclaude/align-sidenav-styling-4MuxV done
History 5
  1. e900a90
    Created (done)by bjornolofandersson
  2. f262d7b
    Content editedby Claude
  3. 387be9c
    • ☑ 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
    by Claude
  4. a129a9e
    Content editedby Claude
  5. a333007
    Created (ready)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)