WORK-197
ID:WORK-197Status:done

Engine + tint.css rename to new --tint-* property names

Rename the --tint-* custom properties emitted by packages/transform/src/engine.ts and consumed by packages/lumina/styles/runes/tint.css. Five renames (background → bg, primary → text, secondary → muted, accent → primary, plus dark-variant counterparts); surface and border unchanged. The CSS cascade structure (@property registrations, --cs-* intermediaries, same-element-vs-ancestor selectors) is preserved — only the property names move.

Priority:highComplexity:smallMilestone:v0.14.0Source:SPEC-053
claude/v0.14.0-spec-053-tint-vocab View source

Criteria completion

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

Tracking started May 18 — check back for trends.

Relationships

Implements 1
Related 5
Branches 2
claude/v0.14.0-spec-053-tint-vocab current done
main doneclaude/spec-053-tint-authoring-notes ready
History 1
  1. 7c7dd33
    Created (done)by bjornolofandersson

Acceptance Criteria

  • TINT_TOKENS array in packages/transform/src/engine.ts updated to ['bg', 'surface', 'text', 'muted', 'primary', 'border']
  • Engine emits --tint-bg, --tint-text, --tint-muted, --tint-primary (and --tint-dark-* counterparts). Also updated to read def.lockMode instead of def.mode.
  • packages/lumina/styles/runes/tint.css sections 2–4 updated to map the new property names → --rf-color-* tokens. The --rf-color-primary mapping now correctly references --tint-primary (which is the interactive primary, matching the contract) rather than the old --tint-accent.
  • @property registrations at the top of tint.css unchanged (they target --rf-color-*)
  • --cs-* intermediaries unchanged
  • CSS coverage tests pass — no test references the old --tint-* names by name
  • Visual sanity: full test suite (2429 tests) passes; build is clean
  • No grep hits for old property names: --tint-background, --tint-secondary, --tint-accent anywhere in the codebase

Approach

The CSS is well-designed; this is a targeted rename, not a refactor. Find-and-replace inside tint.css and the engine emit code, then verify the cascade still works against a baseline.

The dark-variant property names follow the same rename pattern: --tint-dark-background → --tint-dark-bg, --tint-dark-primary → --tint-dark-text, etc. The same-element compound selector logic in section 4 of tint.css rewires automatically once the property names are updated consistently.

Dependencies

  • WORK-195 — types updated.
  • WORK-196 — merge logic ready so the engine reads the new shape.

References

  • SPEC-053 — "the CSS bridge implementation is intentionally not changed; only property names move"
  • packages/transform/src/engine.ts — tint-processing logic
  • packages/lumina/styles/runes/tint.css — bridge CSS