feat: improve color system DX with dark-mode fallback and theme-aware palette

[jackgranatowski]

• Add dark-mode fallback to all 11 resolved color tokens so dark mode
  falls back to the light value when no explicit -dark override is set
• Replace literal white/black with var(--sf-color-base)/var(--sf-color-text)
  in palette color-mix() calls to make tint/shade scale theme-aware (fixes fix(palette): tints/shades mix with theme-aware tokens instead of literal white/black #24)
• Update THEMOWANIE documentation to reflect the new 6-token override model

Summary by CodeRabbit

• Refactor

  • Dark colors now derive from light tokens with strengthened derivation logic; explicit per-mode dark declarations removed.
  • Tint/shade generation now uses theme-aware endpoints for more consistent palettes.

• New Features

  • Optional manual dark-color overrides remain available for full control.

• Documentation

  • Simplified theming guidance (override light tokens; dark auto-derived).
  • Added scoped-theme demo and nested dark/light examples.

[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: b7452a9d-1b2e-4868-afbf-67275684e751

📥 Commits

Reviewing files that changed from the base of the PR and between 99c323b and 3b51a7e.

📒 Files selected for processing (1)

• optional/tokens.palette.css

---

📝 Walkthrough

Walkthrough

This PR refactors the dark-mode color token system from explicit per-mode @property registrations to computed derivation, and updates the palette to use theme-aware mixing endpoints. Dark brand, status, text, border, and status-strong tokens now derive their values using oklch(from ...) + clamp(...) formulas instead of direct variable references; the numeric palette scales mix with --sf-color-base and --sf-color-text instead of literal white and black.

Changes

Token derivation and palette theming

Layer / File(s)	Summary
Core token derivation refactoring core/tokens.css	Documentation and @property registrations are simplified to emphasize the six -light source tokens. Dark @property declarations for brand, status, and text/border tokens are removed. Semantic brand/status tokens, text tokens, border tokens, and status-strong variants are rewritten to compute dark sides using oklch(from var(--sf-color-*-light) ...) + clamp(...) instead of direct references to --sf-color-*-dark variables.
Palette theme-aware mixing endpoints optional/tokens.palette.css	All six color families (primary, secondary, tertiary, action, neutral, base) replace literal white/black mixing anchors with var(--sf-color-base) for tints (-100 to -400) and var(--sf-color-text) for shades (-600 to -900), making the numeric scale automatically theme-aware.
Demo and documentation updates docs/demo.html	Stylesheet references switch from CDN to local files. The "Theme Customizer" description is reworded to match the new override model (light tokens only, auto-derived dark). A new "Scoped Themes" section demonstrates data-theme scoping with nested dark/light regions and color swatches.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

• _⚠️ Potential issue_ | _🔴 Critical_ | _🏗️ Heavy lift_ #8: Similar token derivation/dark-mode contrast concerns affecting neutral/base/status/token derivation.

Possibly related PRs

• codeslash-dev/SLASHED#7: Introduced the explicit @property-registered *-dark tokens and theme swapping logic this PR refactors.
• codeslash-dev/SLASHED#23: Overlaps on status/strong token derivation changes.
• codeslash-dev/SLASHED#17: Related changes around danger/error token derivation.

🚥 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 describes the main changes: improving color system DX with dark-mode fallback and theme-aware palette generation.
Linked Issues check	✅ Passed	The PR implements all key requirements from issue #24: replacing literal white/black with var(--sf-color-base) and var(--sf-color-text) in palette generation, and establishing dark-mode fallback via light-dark() formulas.
Out of Scope Changes check	✅ Passed	All changes are within scope: core/tokens.css updates token derivation, optional/tokens.palette.css replaces white/black anchors, and docs/demo.html reflects the new theming model.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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/test-light-dark-mode-hQJmR

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@optional/tokens.palette.css`:
- Around line 115-118: The four tokens --sf-color-base-100 through
--sf-color-base-400 are mixing var(--sf-color-base) with itself so they all
collapse to the same value; update the color-mix calls in those variables to mix
the base color with a neutral target (e.g., white `#fff` for lighter ramps or
black `#000` for darker ramps) instead of var(--sf-color-base), or alternatively
compute lighter/darker OKLCH variants by adjusting lightness directly;
specifically change the second argument in the color-mix(in oklch,
var(--sf-color-base) X%, ...) calls from var(--sf-color-base) to an appropriate
neutral (like `#fff`) and tweak the percentages for the intended ramp.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: dc06c2a5-f08e-42a2-b5cc-1e8740509bde

📥 Commits

Reviewing files that changed from the base of the PR and between 81ff4af and 99c323b.

⛔ Files ignored due to path filters (1)

• dist/slashed.essential.css is excluded by !**/dist/**

📒 Files selected for processing (3)

• core/tokens.css
• docs/demo.html
• optional/tokens.palette.css