WORK-197
Setting up your dashboard 0 entities found · 8/31 branches scanned
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
main View source

Criteria completion

Criteria completion: 1 of 8 (13%) checked; history from May 18 to May 180%25%50%75%100%May 18May 18

Relationships

Implements 1
Related 5
Branches 2
main current done
claude/v0.14.0-spec-053-tint-vocab doneclaude/spec-053-tint-authoring-notes ready
History 4
  1. c1d4f32
    • ☑ `--cs-*` intermediaries unchanged
    by bjornolofandersson
  2. 7c7dd33
    Content editedby Claude
    v0.14.0 Chunk 5: SPEC-053 tint vocabulary alignment (WORK-195-199)
  3. 3b92415
    Created (ready)by bjornolofandersson
  4. 0d5a42c
    Content editedby Claude
    plan: add SPEC-053 tint shape alignment work items (WORK-195 to 199)

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