feat(configurator): make consume tokens read-only

[jackgranatowski]

Summary

Consumption tokens are derived outputs (light-dark(), var(), relative color expressions) — editing them directly disconnects them from their upstream configure source and produces confusing results where the preview stops responding to changes in the configure knobs.

• Consume-role token rows now show a read-only dashed display with the token's CSS expression instead of an editor
• The whole consume row is subtly de-emphasised (opacity 0.7, no hover background) to signal it's not interactive
• The reset button is hidden for consume rows — there's nothing to override
• The modified highlight (blue left bar) is suppressed even if a stale override exists
• TokenEditor.svelte is untouched — isolation is purely in TokenRow.svelte

Test plan

• In Advanced mode, consume tokens show a read-only dashed box with their CSS expression (e.g. light-dark(…), var(--sf-…))
• No editor controls or reset button appear for consume rows
• Configure tokens are unaffected — editor and reset button work as before
• Filtering by "Configure" hides consume rows; filtering by "Consume" shows them as read-only

https://claude.ai/code/session_01D9eC3ahWV4H81xhE4g1P3o

---

Generated by Claude Code

Summary by CodeRabbit

Bug Fixes

• Consume tokens now read-only: Consume tokens are displayed as non-interactive, read-only elements with updated visual styling. Token values remain visible for reference, but cannot be modified, preventing accidental changes to consume-type tokens.

[coderabbitai]

Warning

Review limit reached

@jackgranatowski, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 44 minutes and 45 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 03318fe3-fb33-41c6-a925-41fd972367fa

📥 Commits

Reviewing files that changed from the base of the PR and between a1b752c and 81ea64a.

📒 Files selected for processing (1)

• configurator/tests-e2e/presets.spec.js

📝 Walkthrough

Walkthrough

TokenRow.svelte updated to treat consume tokens as non-interactive display elements. The component now suppresses modification styling for consume tokens, replaces the editable TokenEditor with a read-only dashed-value display, and adds corresponding CSS styling to de-emphasize entire consume-token rows.

Changes

Consume Token Non-Interactive Display

Layer / File(s)	Summary
Non-interactive consume token display configurator/src/components/TokenRow.svelte	Class bindings suppress row--modified and add row--consume class for consume tokens. Control area branches to display a read-only value container for consume tokens instead of the interactive TokenEditor and reset button. CSS rules de-emphasize consume-token rows and format the read-only value box with dashed borders and monospace font.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(configurator): make consume tokens read-only' accurately and concisely summarizes the main change: making consume tokens read-only in the TokenRow component to prevent accidental disconnection from their source.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/configurator-light-dark-mode-k89r30

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}