fix(demo): show auto-derived dark colors in the configurator

[jackgranatowski]

Summary

Follow-up to #29. The theme configurator's dark color pickers were seeded from a hardcoded TOKEN_DEFAULTS table, which:

• didn't even match the framework's actual derivation (it showed oklch(0.70 0.15 264) where the formula yields oklch(0.725 0.18 264)), and
• implied dark colors must be set manually — burying SLASHED's headline behavior that dark auto-derives from the 6 -light tokens.

Now each picker reads the resolved --sf-color-X from a hidden, mode-pinned probe, so:

• Dark pickers display the live auto-derived value and update as you edit the corresponding light color.
• A --sf-color-X-dark override is written only when you actually change a dark picker — auto-derivation stays in effect until you deliberately opt out.
• Reset drops all overrides (light reverts to its @property default, dark returns to auto-derive).
• Randomize sets only -light and lets dark derive, demonstrating single-input branding.

Removed the misleading hardcoded -dark defaults (and the now-unused light oklch table); kept a small hex fallback for engines that can't resolve oklch. Net −43 lines, docs/demo.html only.

Test plan

• Verified via Playwright against docs/demo.html:
  • dark primary picker shows #6ba0ff = resolved oklch(0.725 0.18 264) (the real derived value)
  • no --sf-color-primary-dark inline override on :root at load
  • editing light primary → dark picker updates live, still no -dark override written
• npm run lint:css, npm run build, npm test (14/14) all green

https://claude.ai/code/session_01MoV2rAESh77QMzsc4kL3fo

---

Generated by Claude Code

Summary by CodeRabbit

• Bug Fixes

  • Theme Customizer now accurately displays token colors across light and dark modes.
  • Color picker changes apply and sync correctly in real-time.

• Improvements

  • Simplified reset-to-default theme functionality.
  • Theme randomizer better respects dark mode color inheritance.

[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: 9abb1406-f446-48d5-bf9d-d6a083b9149e

📥 Commits

Reviewing files that changed from the base of the PR and between 9a572e2 and 32d67a7.

📒 Files selected for processing (1)

• docs/demo.html

---

📝 Walkthrough

Walkthrough

The Theme Customizer JavaScript is refactored to dynamically resolve CSS token colors using hidden probe elements per theme mode, replacing hardcoded defaults. A syncAll() routine orchestrates refreshing all color picker inputs from the resolved values, and input/reset/randomize handlers now write CSS variables directly and resync.

Changes

Theme Customizer Token Resolution Refactoring

Layer / File(s)

Summary

Probe-based token resolution and sync orchestration docs/demo.html

Introduced makeProbe(theme) and resolvedHex(token) to dynamically compute rendered colors from CSS variables in light/dark modes. Refactored initialization and updates around syncAll() to refresh all color inputs. Updated input handlers to write CSS variables directly and resync. Simplified reset to remove overrides and resync. Changed randomization to set only -light brand tokens, clear -dark overrides, and resync.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• codeslash-dev/SLASHED#17: Both PRs modify the Theme Customizer implementation in docs/demo.html around resolving CSS token colors via probe elements and syncing picker values.
• codeslash-dev/SLASHED#26: The PR's randomization behavior (update only -light tokens and derive dark automatically) depends on the new color-token model introduced in that PR.
• codeslash-dev/SLASHED#25: The probe-based token resolution for --sf-color-* variables directly relies on the dark fallback logic introduced in that PR's core/tokens.css.

🚥 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 accurately captures the main change: updating the demo configurator to display auto-derived dark colors instead of using hardcoded defaults, which aligns with the core objective of the PR.
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/framework-audit-plan-gGaP5

---

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