WORK-366
Setting up your dashboard 0 entities found · 8/31 branches scanned
ID:WORK-366Status:done

Tint-tracking inset surface: --rf-surface-inset-shift token + use-site color-mix

Add the tint-tracking inset surface: a --rf-surface-inset-shift mix-amount token and a use-site color-mix recipe applied to media wells and chart/diagram.

Priority:highComplexity: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
    • ☑ `--rf-surface-inset-shift` (mix amount, mode-specific) + use-site `color-mix(in oklch, var(--rf-color-surface), black …)` yields a recessed inset fill that tracks `tint`; no static absolute inset-colour token; `0` disables per rune.
    • ☑ The media well of `card`/`bento-cell`/`recipe`/`realm`/`faction`/`playlist` carries the inset fill by default (verified by a visual sweep).
    • ☑ `chart`/`diagram` default `tint` to the inset surface for their self surface.
    • ☑ Insets are correct under nesting (no compounding, presentational `background-color`, depth via border/elevation).
    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

  • --rf-surface-inset-shift (mix amount, mode-specific) + use-site color-mix(in oklch, var(--rf-color-surface), black …) yields a recessed inset fill that tracks tint; no static absolute inset-colour token; 0 disables per rune.
  • The media well of card/bento-cell/recipe/realm/faction/playlist carries the inset fill by default (verified by a visual sweep).
  • chart/diagram default tint to the inset surface for their self surface.
  • Insets are correct under nesting (no compounding, presentational background-color, depth via border/elevation).

Approach

Derivation must live where surface is in scope. tokens/base.css/dark.css. SPEC-087 §3.

References

  • SPEC-087

Resolution

Completed: 2026-06-09

Branch: claude/spec-087-surface-fills

What was done

  • --rf-surface-inset-shift token (5% light / 8% dark) via the luminaTokens extra hatch + tokens/base.css/dark.css.
  • Use-site color-mix(in oklch, var(--rf-color-surface), black …) in dimensions/surfaces.css applied to chart/diagram self surfaces and the media wells of card/bento-cell/recipe/realm/faction/playlist.
  • Writes background-color only (never re-bases --rf-color-surface), so insets track tint and don't compound; --rf-surface-inset-shift: 0 flushes per rune.

Notes

  • Used the token extra escape hatch (a mix amount isn't a contract colour), keeping the SPEC-053 token-coverage in sync.
  • "Verified by a visual sweep" was done structurally (CSS coverage + the rule existing on the right selectors), not in a browser — a visual pass remains a follow-up.