WORK-367
ID:WORK-367Status:done

substrate pattern attribute: engine enum + shared base gradient stylesheet

Add the substrate pattern attribute with a fixed engine-level enum and a shared, always-included base stylesheet of token-driven gradient recipes.

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

Criteria completion

Criteria completion: 4 of 4 (100%) checked; history from Jun 9 to Jun 90%25%50%75%100%Jun 9Jun 9

Relationships

Implements 1
Branches 2
main current done
claude/spec-087-surface-fills doneclaude/mcp-server-verify-4lnxej ready
History 4
  1. 7e6b7cc
    • ☑ Pattern vocabulary is a fixed engine enum (`dots|grid|lines|cross|checker|none`), not a theme preset registry; `none` is the empty default.
    • ☑ `substrate="dots"` plus inline facets `substrate-size|opacity|fill` work standalone; `substrate-fill` selects `inherit|inset`.
    • ☑ Engine emits markers only (`data-substrate`, `--substrate-*`); a shared base stylesheet (always included, not per-theme) realises geometry via token-driven gradients, exposing only `--substrate-*` hooks; patterns track `tint`/inset colour.
    • ☑ Optional named recipes belong in `refrakt.config.json` (deferred until inline facets prove insufficient).
    by bjornolofandersson
  2. 702732b
    Content editedby Claude
    plan: mark Batch 3 (SPEC-087 surface fills) done + changeset
  3. 9c0545a
    Created (ready)by bjornolofandersson
  4. 1da59d6
    Content editedby Claude
    plan: add v0.20.0 milestone and break down SPEC-086..091 into work items

Acceptance Criteria

  • Pattern vocabulary is a fixed engine enum (dots|grid|lines|cross|checker|none), not a theme preset registry; none is the empty default.
  • substrate="dots" plus inline facets substrate-size|opacity|fill work standalone; substrate-fill selects inherit|inset.
  • Engine emits markers only (data-substrate, --substrate-*); a shared base stylesheet (always included, not per-theme) realises geometry via token-driven gradients, exposing only --substrate-* hooks; patterns track tint/inset colour.
  • Optional named recipes belong in refrakt.config.json (deferred until inline facets prove insufficient).

Approach

Engine emits markers; CSS draws, like data-method. SPEC-087 §1.

References

  • SPEC-087

Resolution

Completed: 2026-06-09

Branch: claude/spec-087-surface-fills

What was done

  • Universal substrate (fixed engine enum dots|grid|lines|cross|checker|none) + substrate-size/opacity/fill facets (lib/index.ts, attribute-presets.ts), injected as metas via injectSubstrateMetas.
  • Engine resolveSubstrate emits markers only — data-substrate (+ data-substrate-fill) and --substrate-cell/--substrate-opacity custom props; CSS draws.
  • Shared, always-included dimensions/substrate.css with token-driven gradient recipes (dots/grid/lines/cross/checker); --substrate-ink resolves from --rf-color-border so patterns track tint; substrate-fill="inset" paints over the inset fill.

Notes

  • Named recipes (refrakt.config.json) deferred per spec. Tests in packages/transform/test/substrate.test.ts.