WORK-369
Setting up your dashboard 0 entities found · 10/36 branches scanned
ID:WORK-369Status:done

bg gradient fill: inline facets + structured BgPresetDefinition.gradient

Add a token-driven bg gradient fill via inline facets and a structured BgPresetDefinition.gradient preset field.

Priority:mediumComplexity:moderateMilestone:v0.20.0Source:SPEC-088
main View source

Criteria completion

Criteria completion: 3 of 3 (100%) checked; tracking started on Jun 9, no incremental history yet0%25%50%75%100%Jun 9Jun 15

Tracking started Jun 9 — check back for trends.

Relationships

Implements 1
Branches 3
main current done
claude/spec-088-bg-gradients-scrim donemain doneclaude/mcp-server-verify-4lnxej ready

Acceptance Criteria

  • Inline facets bg-gradient (bounded direction set), bg-from|to|via (semantic token refs → var(--rf-color-*)), bg-gradient-type (linear|radial|conic); colours stay token-owned.
  • Named gradient presets live on BgPresetDefinition.gradient (type + direction + token-name stops), not the raw style map; bg="name" applies; extends works.
  • A fill gradient occupies the base bg layer (reuses --bg-image), composing beneath scrim/substrate and with the tint/inset fill.

Approach

BgPresetDefinition in types.ts; bg.css --bg-image. SPEC-088 §1.

References

  • SPEC-088

Resolution

Completed: 2026-06-09

Branch: claude/spec-088-bg-gradients-scrim

What was done

  • BgPresetDefinition.gradient { type?, direction?, stops } (stops are token names → var(--rf-color-*)).
  • Universal facets bg-gradient/bg-from/bg-to/bg-via/bg-gradient-type (+ on the {% bg %} directive), injected as metas; engine buildBgGradient resolves a bounded direction set + token stops into --bg-image. Inline facets override a preset's facets; stops fall back to the preset. A gradient-only bg raises the layer with no image; extends works.

Notes

  • Tests in packages/transform/test/bg-gradient.test.ts.