WORK-363
Setting up your dashboard 0 entities found · 9/32 branches scanned
ID:WORK-363Status:done

frames preset registry + frame attribute and inline facet overrides

Add a frames preset registry parallel to backgrounds, the frame attribute with inline facet overrides, and complete the offset named scale.

Priority:highComplexity:complexMilestone:v0.20.0Source:SPEC-086
claude/spec-086-surface-chrome 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
claude/spec-086-surface-chrome current done
claude/mcp-server-verify-4lnxej readymain done
History 3
  1. 8faa272
    • ☑ A `frames` registry exists in theme config, structurally parallel to `backgrounds`, with `extends` resolution shared with `bg`/`tint`.
    • ☑ `frame="preset"` applies a named preset; inline `frame-aspect|displace|offset|oversize|place|anchor|shadow` override facets and work without a preset.
    • ☑ `offset` is a named scale (`none|sm|md|lg|xl`) backed by `--rf-spacing-*`; the `resolveOffset` raw-length fallthrough is closed (unknown values warn).
    • ☑ The frame shadow facet renders as `drop-shadow` (silhouette), never colliding with `elevation`'s `box-shadow`.
    by bjornolofandersson
  2. 998faad
    Created (in-progress)by bjornolofandersson
  3. 1da59d6
    Content editedby Claude
    plan: add v0.20.0 milestone and break down SPEC-086..091 into work items

Acceptance Criteria

  • A frames registry exists in theme config, structurally parallel to backgrounds, with extends resolution shared with bg/tint.
  • frame="preset" applies a named preset; inline frame-aspect|displace|offset|oversize|place|anchor|shadow override facets and work without a preset.
  • offset is a named scale (none|sm|md|lg|xl) backed by --rf-spacing-*; the resolveOffset raw-length fallthrough is closed (unknown values warn).
  • The frame shadow facet renders as drop-shadow (silhouette), never colliding with elevation's box-shadow.

Approach

Reuse the bg pipeline: engine.ts bg resolution, BgPresetDefinition, merge.ts extends. SPEC-086 §2.

References

  • SPEC-086

Resolution

Completed: 2026-06-09

Branch: claude/spec-086-surface-chrome

What was done

  • FramePresetDefinition + ThemeConfig.frames (types.ts); mergeThemeConfig merges frames (merge.ts).
  • frame + frame-{aspect,displace,offset,oversize,place,anchor,shadow} universal attributes (lib/index.ts, attribute-presets.ts), injected as <meta data-field> so the engine reads them via the bg meta channel.
  • Engine resolveFrameChrome (engine.ts): resolves the preset (+ one extends level) and inline facet overrides; facets work standalone.
  • Completed the offset named scale (none|sm|md|lg|xl → --rf-spacing-*) and closed resolveOffset's raw-length fallthrough (unknown → warn → none) in helpers.ts.
  • frame-shadow renders as drop-shadow in dimensions/frame.css; elevation stays box-shadow — never collide.

Notes

  • Tests in packages/transform/test/frames.test.ts.