WORK-061
ID:WORK-061Status:done

Lumina Generic Metadata CSS

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

Criteria completion

No incremental history — criteria tracking started on Apr 17.

Relationships

Implements 2
Branches 3
claude/align-sidenav-styling-4MuxV current done
main doneclaude/file-naming-convention-LJdwR donechangeset-release/main done
History 3
  1. 92a238b
    Content editedby Claude
    feat(lumina): add generic metadata dimension CSS (WORK-061)
  2. a129a9e
    Content editedby Claude
    Assign all new work items (WORK-051–068) to v0.9.0 milestone
  3. a333007
    Created (done)by Claude
    Add work items for SPEC-024 (Metadata) and SPEC-025 (Universal Theming)

Summary

Write the ~18 generic CSS rules in Lumina that style every metadata badge across every rune using the data-meta-type, data-meta-sentiment, and data-meta-rank attribute selectors. This replaces dozens of per-rune badge CSS rules with a universal set.

Acceptance Criteria

  • Lumina includes CSS rules for all 6 meta types: status (coloured pill with dot), category (outlined chip), quantity (bold tabular number), temporal (icon-prefixed value), tag (flat muted label), id (monospace)
  • Lumina includes CSS rules for all 4 sentiments: positive → success colour, negative → danger colour, caution → warning colour, neutral → muted colour
  • Lumina includes CSS rules for both ranks: primary (full size), secondary (smaller + faded)
  • Sentiment colours adapt to dark mode via existing Lumina colour token definitions
  • --meta-color and --meta-font-size custom properties cascade correctly from sentiment/rank to type rules
  • CSS coverage tests updated to expect the new [data-meta-*] selectors
  • Per-rune badge CSS that is now redundant is identified (removal can be done incrementally in a follow-up)

Approach

Create packages/lumina/styles/dimensions/metadata.css (or similar) with the CSS from SPEC-024's Theme CSS section. Import it in packages/lumina/index.css. Verify that badges render correctly for a sample of runes using the dev site. The per-rune badge CSS can coexist with the generic metadata CSS during migration — both target different selectors, so there's no conflict.

References

  • SPEC-024 (Metadata System — Theme CSS, Dark Mode)
  • SPEC-026 (Lumina Theme — Sentiment Colours)