feat: standalone token configurator app - #285
Conversation
Add configurator/ — a standalone Svelte 5 + Vite panel that lets anyone generate SLASHED override CSS for every framework token/knob, with live preview and copy/download/import. The token catalogue is auto-synced from the framework's generated docs/api-index.json via configurator/scripts/sync-api.mjs, wired into the docs pipeline (configurator:sync) and the app's predev/prebuild, so the panel never drifts from the framework API. Exclude configurator/ from the framework stylelint (it uses its own --cfg-* chrome variables, not --sf-* tokens). Co-authored-by: Jack Granatowski <contact@codeslash.net>
|
Warning Review limit reached
More reviews will be available in 4 minutes and 56 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (26)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Builds configurator/ and publishes its static dist/ to GitHub Pages on merges to main touching the app or docs/api-index.json, plus manual dispatch. Actions are SHA-pinned per repo convention; permissions follow least-privilege with the deploy job scoped to pages:write + id-token:write.
Address PR review findings:
- sync-api.mjs: guard JSON.parse with an actionable error, fail loudly on an
empty/collapsed token set, and replace the per-run generatedAt wall-clock
stamp with a stable content hash so the committed catalogue only changes
when tokens actually change.
- css.js: sanitize override values (strip top-level ;{} and comment markers)
so a value can't break out of the :root block or desync round-trip import;
teach parseCSS to track quote state so quoted parens don't derail scanning.
- store: sanitize on load/set/import; surface a localStorage write failure via
a storage.ok flag instead of swallowing it silently.
- OutputPanel: warn when persistence is unavailable.
- Sidebar: search placeholder now shows the catalogue total, not the filtered
count.
- Header: drop the removed generatedAt reference; show catalogue hash.
2 participants
This pull request was created by @kiro-agent on behalf of @jackgranatowski 👻
Comment with /kiro fix to address specific feedback or /kiro all to address everything.
Learn about Kiro Web
Summary
Adds
configurator/— a standalone Svelte 5 + Vite panel that lets anyone generate SLASHED override CSS for every framework token/knob, without any build step or backend.Inspired by the existing WordPress
admin-appSvelte panel in the SLASHED-Plugins repo, but fully decoupled from WordPress and expanded to cover the entire token surface (802 tokens) rather than a curated subset.What it does
--sf-*tokens grouped by category and source section, with tier badges (public / advanced / internal), descriptions, alias info, and framework defaults shown as placeholders.light-dark()and relativeoklch(from …)resolve like production.@layer slashed.overrides { :root { … } }(or bare:root) with only changed tokens. Copy / download / re-import an existing sheet. Overrides persist tolocalStorage.Auto-sync with the framework API
The token catalogue is never hand-maintained.
configurator/scripts/sync-api.mjsderives it from the framework's generateddocs/api-index.jsonand writessrc/data/api-index.generated.json. It runs:npm run docspipeline (newconfigurator:syncscript), andpredev/prebuild.So any token added/renamed/retiered/re-valued in the CSS flows into the panel on the next build with zero manual edits.
Testing
npm install && npm run buildinconfigurator/— clean production build (129 modules).npm run syncregenerates the catalogue (802 tokens, framework v0.5.24).configurator/**excluded from the framework stylelint since the UI uses its own--cfg-*chrome variables.Notes / follow-ups
dist/if you want a public hosted configurator.