fix(demo): tighten visual test assertions and clarify customizer labels

[jackgranatowski]

$(cat <<'EOF'

Summary

• Tighten .is-loading color assertion — replace the loose /rgba?\(.*0\)|transparent/ regex (which could falsely pass on opaque rgb() values containing 0) with an explicit check for 'transparent' or rgba(...) with alpha exactly 0
• Add missing isStyled assertion in the disabled-button test — the value was computed but never asserted; also extends the condition to cover cursor: not-allowed
• Remove redundant -light/-dark suffix from theme customizer labels — labels inside the "Light mode" / "Dark mode" columns now show --sf-color-primary instead of --sf-color-primary-light; data-token attributes retain the full variable name so live preview behaviour is unchanged

Test plan

• Visual tests in tests/demo-visual.spec.js pass with Playwright
• Theme customizer labels in docs/demo.html show clean token names without mode suffix
• Toggling dark mode in the demo still applies colors correctly (data-token unchanged)

https://claude.ai/code/session_017qrqrJx5LVgebTEPqs6bmt
EOF
)

---

Generated by Claude Code

Summary by CodeRabbit

• Documentation
  • Updated Theme Customizer to display base token names instead of mode-suffixed variants, improving clarity when customizing brand and status token groups across Light and Dark themes.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d762fab3-ecaf-4b73-8b06-ff371555c589

📥 Commits

Reviewing files that changed from the base of the PR and between deb0bd1 and f190209.

📒 Files selected for processing (1)

• docs/demo.html

---

📝 Walkthrough

Walkthrough

This PR updates the Theme Customizer UI in docs/demo.html to display base token names (--sf-color-primary, --sf-color-success) as visible labels instead of mode-suffixed variants (-light, -dark), while the underlying data attributes and CSS variable behavior remain unchanged.

Changes

Theme Customizer Label Updates

Layer / File(s)	Summary
Token label and description text updates docs/demo.html	Description text and visible label text for Brand and Status color token inputs were changed to show base token names instead of mode-suffixed variants in both Light and Dark mode columns.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• codeslash-dev/SLASHED#17: Both PRs modify docs/demo.html's theme customizer UI—main PR changes the displayed token label text to use base --sf-color-* names instead of mode-suffixed -light/-dark, aligning with the label/picker sync introduced in the retrieved PR.
• codeslash-dev/SLASHED#26: Both PRs update docs/demo.html's Theme Customizer text/labeling to align with the "override only the -light tokens; derive dark automatically" token model introduced by the retrieved PR.

🚥 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 PR title clearly and specifically describes the main changes: tightening visual test assertions and clarifying customizer labels. It directly aligns with the file modifications and objectives.
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/review-pr44-5jcRN

---

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