Refrakt Plan Hub

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

Relationships

main current done

Jun 9, 03:07 PM1731c3d
- ☑ 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.
by bjornolofandersson
Jun 9, 03:04 PM3952770
Content editedby Claude
plan: mark Batch 4 (SPEC-088 bg gradients & scrim) done + changeset
Jun 9, 08:44 AM9c0545a
Created (ready)by bjornolofandersson
Jun 9, 08:34 AM1da59d6
Content editedby Claude
plan: add v0.20.0 milestone and break down SPEC-086..091 into work items

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.

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

Completed: 2026-06-09

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

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.