demo: theme customizer + distinct defaults for primary/action and error/danger - #17
Conversation
…er defaults - core/tokens.css: give --sf-color-action a cyan-teal hue (210) so it no longer duplicates --sf-color-primary; give --sf-color-danger a deeper crimson (12) so it no longer duplicates --sf-color-error; nudge tertiary off the new action hue and tweak warning. Status-danger triplets now derive from --sf-color-danger instead of aliasing -error. - core/base.css: in both dark-mode blocks, --sf-status-danger-text now derives from --sf-color-danger. - docs/demo.html: add a Theme Customizer section at the top with two columns (light + dark) of native color inputs covering all brand and status tokens, plus reset / randomize buttons. Stylesheets now load from jsDelivr (codeslash-dev/SLASHED@main) instead of relative paths. - dist/slashed.essential.css rebuilt. Co-authored-by: Jack Granatowski <contact@codeslash.net>
📝 WalkthroughWalkthroughThis PR refactors CSS color token definitions so that danger status colors derive directly from ChangesColor Token Updates & Theme Customizer
Sequence DiagramsequenceDiagram
participant User
participant ColorInput as Color Input
participant Script as Customizer Script
participant CSSVars as :root CSS Variables
participant Display as Picker Display / Labels
User->>ColorInput: Change color picker
ColorInput->>Script: Input change event
Script->>CSSVars: Set :root CSS property
Script->>Script: Convert hex to oklch()
Script->>Display: Update label text
Script->>Display: Re-sync input with current value
User->>ColorInput: Click "Reset all"
ColorInput->>Script: Reset handler
Script->>CSSVars: Clear :root overrides
Script->>Script: Re-resolve token defaults
Script->>Display: Update all inputs and labels
User->>ColorInput: Click "Randomize brand"
ColorInput->>Script: Randomize handler
Script->>CSSVars: Generate and set new oklch() values for light brand tokens
Script->>CSSVars: Generate and set dark variants
Script->>Display: Re-sync all inputs and labels
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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 `@docs/demo.html`:
- Around line 7-9: The demo HTML is loading CSS from jsDelivr using the mutable
`@main` ref which causes previews to pull the live main branch; update the two
<link> hrefs (the slashed.essential.css and optional/tokens.palette.css
references) to point to local built assets (relative paths like
dist/slashed.essential.css and optional/tokens.palette.css) or replace the `@main`
spec with an immutable tag/commit SHA so the demo uses the exact built files
under review.
🪄 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: d68515c5-ddc2-47ed-b812-3d1e6458a087
⛔ Files ignored due to path filters (1)
dist/slashed.essential.cssis excluded by!**/dist/**
📒 Files selected for processing (3)
core/base.csscore/tokens.cssdocs/demo.html
| <!-- SLASHED via jsDelivr CDN --> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@main/dist/slashed.essential.css"> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@main/optional/tokens.palette.css"> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, confirm the content at lines 7-9 of docs/demo.html
head -20 docs/demo.html | cat -nRepository: codeslash-dev/SLASHED
Length of output: 927
🏁 Script executed:
# Check if there are built assets in the repository
find . -type d -name "dist" -o -name "build" -o -name "assets" 2>/dev/null | head -20Repository: codeslash-dev/SLASHED
Length of output: 72
🏁 Script executed:
# Search for any references to slashed.essential.css or tokens.palette.css in the repo
rg "slashed\." --type html -A 2 -B 2Repository: codeslash-dev/SLASHED
Length of output: 449
🏁 Script executed:
# Check the overall structure of the repository
ls -laRepository: codeslash-dev/SLASHED
Length of output: 1128
🏁 Script executed:
# Check contents of dist directory
ls -la dist/Repository: codeslash-dev/SLASHED
Length of output: 251
🏁 Script executed:
# Check contents of optional directory
ls -la optional/Repository: codeslash-dev/SLASHED
Length of output: 503
🏁 Script executed:
# Check if there's a build/versioning strategy in package.json or docs
cat package.jsonRepository: codeslash-dev/SLASHED
Length of output: 367
Pin the demo stylesheets to this revision instead of @main.
The demo currently loads CSS from jsDelivr @main, causing local/branch previews to render the stylesheet from the main branch rather than the code under review. Built assets are available locally at dist/slashed.essential.css and optional/tokens.palette.css. Use relative paths to these local assets or pin CDN URLs to an immutable tag/commit to ensure the demo reflects the actual changes being reviewed.
🤖 Prompt for 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.
In `@docs/demo.html` around lines 7 - 9, The demo HTML is loading CSS from
jsDelivr using the mutable `@main` ref which causes previews to pull the live main
branch; update the two <link> hrefs (the slashed.essential.css and
optional/tokens.palette.css references) to point to local built assets (relative
paths like dist/slashed.essential.css and optional/tokens.palette.css) or
replace the `@main` spec with an immutable tag/commit SHA so the demo uses the
exact built files under review.
2 participants
This pull request was generated by @kiro-agent 👻
Comment with /kiro fix to address specific feedback or /kiro all to address everything.
Learn about Kiro autonomous agent
Summary
core/tokens.css— fix overlapping defaults so role names actually correspond to distinct colors:--sf-color-actionwas identical to--sf-color-primary(bothoklch(0.45 0.20 264)). Nowoklch(0.60 0.16 210)— a cyan-teal that's clearly distinct from the indigo primary.--sf-color-dangerwas identical to--sf-color-error(bothoklch(0.55 0.22 25)). Nowoklch(0.48 0.24 12)— a deeper crimson, clearly distinct from the orange-red error.--sf-color-tertiaryoff the action hue (310 instead of 210) so all six brand colors stay separated.*-darkvariant.--sf-status-danger-{bg,text,border}now derive from--sf-color-dangerinstead of aliasing the error triplet.core/base.css— in both dark-mode blocks (@media (prefers-color-scheme: dark)and[data-theme="dark"]),--sf-status-danger-textnow derives from--sf-color-dangerdirectly. Comment about keeping the two blocks in sync is honored.docs/demo.html— Theme Customizer:<main>(also added to the side nav as "Theme / Customizer").<input type="color">pickers.--sf-color-*on:root; dark pickers write--sf-color-*-dark. The framework's existing dark-mode swap takes care of the rest, so toggling dark mode previews the dark palette in context.data-theme="dark", so its picker UI always renders against the dark palette — intuitive even while the rest of the page is in light mode.@propertydefaults. "Randomize brand" picks a random hue per brand color and sets matching light/dark values.oklch()→ hex resolution for the native picker is done with a 1×1 canvas probe and a temporarydata-theme-scoped probe element.https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@main/...) instead of relative paths, so the demo can be hosted/embedded standalone.dist/slashed.essential.css— rebuilt withnpm run buildso the bundle reflects the token changes.Testing
scripts/bundle.js.<section>and<script>tags balance in the demo HTML.--sf-color-action,--sf-color-dangerand--sf-status-danger-*values (all derive from the right base tokens, in both light and dark blocks).Notes / limitations
<input type="color">is hex-only, so picking a color converts away from the OKLCH precision. The customizer is a preview tool — the canonical source of truth remains the@propertydefaults incore/tokens.css.Summary by CodeRabbit
New Features
Style