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

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/spec-053-tint-authoring-notes View source

Criteria completion

Criteria completion: 0 of 8 (0%) 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/spec-053-tint-authoring-notes current ready
main doneclaude/v0.14.0-spec-053-tint-vocab done
History 1
  1. 8df92a3
    Created (ready)by bjornolofandersson

Acceptance Criteria

  • TINT_TOKENS array (or equivalent) in packages/transform/src/engine.ts updated to the new vocabulary
  • Engine emits --tint-bg, --tint-text, --tint-muted, --tint-primary (and --tint-dark-* counterparts) instead of --tint-background, --tint-primary (old: text), --tint-secondary, --tint-accent
  • packages/lumina/styles/runes/tint.css sections 2–4 updated to map the new property names → --rf-color-* tokens
  • @property registrations at the top of tint.css unchanged (those target --rf-color-* not --tint-*)
  • --cs-* intermediaries unchanged
  • CSS coverage tests in packages/lumina/test/css-coverage.test.ts updated for any selectors that referenced the old --tint-* names by name
  • Visual regression: at least one tinted rune in a real layout (a {% callout tint="warm" %} or similar) renders identically before and after, in both light and dark modes
  • No grep hits for the old property names 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