WORK-688
ID:WORK-688Status:done

Prominence gains a marquee step and sizes the whole header and flush band

prominence gets a fifth step, marquee, above display (SPEC-183 D1). Each step now sizes the blurb and the header's spacing as well as the title (D2). A flush band at display or marquee takes its padding from the step (D3). Lumina paints the display and marquee titles with a gradient (D4), and the large buttons apply at marquee only (D5).

Priority:mediumComplexity:moderateMilestone:v0.45.0Source:SPEC-183
main View source

Criteria completion

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

Relationships

Implements 1
Related 3
Branches 2
main current done
changeset-release/main doneclaude/milestone-v0-44-0-ism7ni done
History 6
  1. 575c532
    • ☑ `PROMINENCE_VALUES` gains `marquee`, and the universal attribute definition, `RuneConfig.defaultProminence` and the editor read it (D1)
    • ☑ Lumina ramps the `marquee` title at 13/6 of the resting size, and `display` and the lower steps are unchanged (D1)
    • ☑ A flush section at `display` or `marquee` takes D3's block padding at both widths, and a cover band moves it onto the overlaid content (D3)
    • ☑ `actions.css` gives the large buttons at `marquee` only (D5)
    • ☑ The surfaces reference page and the theme-authoring dimensions page document `marquee` and the widened register
    • ☑ Contracts are regenerated in both copies, and CSS coverage and the SEO baseline check pass
    by bjornolofandersson
  2. 6418232
    Content editedby Claude
    SPEC-183: the header property is a scale, as implemented
  3. a4e9773
    Content editedby Claude
    WORK-688 done; WORK-689 criteria checked pending the staging review
  4. ac66e7c
    Content editedby Claude
    v0.45.0: prominence is a register, with a marquee step (SPEC-183)
  5. f32939a
    Created (ready)by bjornolofandersson
  6. cd44633
    Content editedby Claude
    SPEC-183 accepted; WORK-688 and WORK-689 planned for v0.45.0

Acceptance Criteria

  • PROMINENCE_VALUES gains marquee, and the universal attribute definition, RuneConfig.defaultProminence and the editor read it (D1)
  • Lumina ramps the marquee title at 13/6 of the resting size, and display and the lower steps are unchanged (D1)
  • Each step publishes --rf-prominence-blurb-size and --rf-prominence-header-scale, normal sets neither, and both are cleared at every rune root (D2)
  • A flush section at display or marquee takes D3's block padding at both widths, and a cover band moves it onto the overlaid content (D3)
  • The display and marquee titles take the gradient through --rf-prominence-title-fill, never on a nested rune's title, and not under forced-colors (D4)
  • actions.css gives the large buttons at marquee only (D5)
  • The surfaces reference page and the theme-authoring dimensions page document marquee and the widened register
  • Contracts are regenerated in both copies, and CSS coverage and the SEO baseline check pass

Approach

  • packages/transform/src/facets/prominence.ts: PROMINENCE_VALUES and ProminenceValue. types.ts defaultProminence and packages/runes/src/lib/universal-attribute-defs.ts should read the constant rather than repeat it.
  • packages/lumina/styles/dimensions/surfaces.css: the ramp and the new properties. density.css clears them at [data-density], beside --rf-prominence-size. sections.css: the description reads --rf-prominence-blurb-size, and the title reads the fill.
  • The flush padding goes next to [data-elevation="flush"] in surfaces.css. For cover, it sets --rune-padding on [data-name="content"], as hero.css does.

References

  • SPEC-183
  • SPEC-160: D7, the button-size decision D5 amends.

Resolution

Completed: 2026-10-30

Branch: claude/milestone-v0-44-0-ism7ni

What was done

  • packages/transform/src/facets/prominence.ts: marquee added to PROMINENCE_VALUES, now exported from @refrakt-md/transform. types.ts (defaultProminence) and packages/runes/src/lib/universal-attribute-defs.ts read the constant.
  • packages/lumina/styles/dimensions/surfaces.css:
    • the marquee title ramp (13/6);
    • per-step --rf-prominence-blurb-size / -header-scale / -band-padding, with narrow-screen padding;
    • the gradient as --rf-prominence-title-fill / -clip / -ink on display and marquee;
    • flush padding read through the band property, and cover bands moving it onto the content.
  • density.css clears every new property at rune roots. sections.css reads the blurb size and the title paint, with a forced-colours reset. runes/section.css scales its header gaps. runes/actions.css gives large buttons at marquee only.
  • packages/lumina/test/prominence-register.test.ts is new; actions-prominence.test.ts is updated.
  • Contracts (both copies) and site/content/_data/rune-attributes.json regenerated.
  • Docs: surfaces (author page), theme-authoring surfaces and dimensions, actions. Changeset prominence-marquee.md.

Notes

  • The spec's --rf-prominence-header-gap became --rf-prominence-header-scale, a multiplier of the section's own gaps (0.5rem and 1.5rem). That keeps normal exactly as it was.
  • The title paint is three properties (fill, clip, ink), so background-clip: text applies only where a step sets a fill.
  • SPEC-183 D2/D4 were amended during implementation: the plugin cta's headline is a gradient and its blurb text-lg, so display takes both (agreed in session).