fix(configurator): dark palette swatches, token display, collapsed groups, cheatsheet - #434
Merged
Merged
Conversation
…oups, cheatsheet - ColorsPanel: replace broken themed-probe palette swatch approach with concrete color-mix() expressions computed from literal OKLCH source values; dark L/D rows now show visually distinct tints/shades instead of mirroring light - ColorsPanel: add getLightSurface/getDarkSurface/getLightText/getDarkText helpers and computePaletteSwatch() that bypasses CSS cascade issues entirely - OklchColorDesk: show full token name and OKLCH value instead of truncating; value moved below token name for clean layout - All panels: collapse every foldable group by default (showXxx = $state(false)) across Colors, Typography, Spacing, Layout, Borders, Shadows, Motion, Effects, Macros, Misc, WCAG panels - DomainPanel: split cheatsheet domain from setup; cheatsheet now renders its own panel instead of ExportPanel - CheatsheetPanel: new searchable reference panel with CSS classes tab (232 entries with kind, description, copy button) and CSS variables tab (686 tokens grouped by category/group with role badges and copy button) - sync-api.mjs: also generate classes.generated.json from api-index class entries so the cheatsheet panel has structured data at build time Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HNDMX9UPFoTYJeLxbD3xfC
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HNDMX9UPFoTYJeLxbD3xfC
|
Warning Review limit reached
More reviews will be available in 42 minutes and 12 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. 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 selected for processing (3)
📝 WalkthroughWalkthroughAdds a ChangesCheatsheet Feature
ColorsPanel Palette Swatch Computation
Panel Collapse Defaults and Minor UI Tweaks
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ 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 |
PR Summary by Qodofix(configurator): dark palette swatches, token display, collapsed groups, cheatsheet Description
Diagram
High-Level Assessment
Files changed (17)
|
Code Review by Qodo
Context used✅ Compliance rules (platform):
6 rules 1.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
configurator/src/components/panels/ColorsPanel.svelte (1)
290-314: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winUse one source-value helper for all palette inputs.
The main brand row uses
sourceTokenMapas a fallback, but endpoint helpers, status rows, curve preview, and mini palettes fall back directly to hard-coded defaults. Extracting one lookup path prevents those previews from drifting if token defaults change.♻️ Suggested consolidation
+ function getSourceValue(colorKey: string, side: "light" | "dark", fallback = ""): string { + const name = `--sf-color-${colorKey}-source-${side}`; + return overrides[name] + ?? sourceTokenMap[name]?.value + ?? BRAND_SOURCES.find((s) => s.name === name)?.default + ?? STATUS_SOURCES.find((s) => s.name === name)?.default + ?? fallback; + } + function getLightSurface(): string { - return overrides["--sf-color-base-source-light"] ?? "oklch(0.96 0.006 250)"; + return getSourceValue("base", "light", "oklch(0.96 0.006 250)"); }Also applies to: 409-412, 568-569, 666-671, 781-785
🤖 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 `@configurator/src/components/panels/ColorsPanel.svelte` around lines 290 - 314, Consolidate palette input lookup so all preview helpers use the same source-value path as the main brand row, instead of mixing `sourceTokenMap` and hard-coded defaults. Update the endpoint helpers in `ColorsPanel.svelte`—including `getLightSurface`, `getDarkSurface`, `getLightText`, `getDarkText`, and the other referenced preview/curve/mini-palette helpers—to resolve values through one shared helper that checks `sourceTokenMap` first and only then falls back to defaults. Keep the existing helper names and call sites, but route them through the shared lookup so token default changes stay consistent across all previews.
🤖 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 `@configurator/scripts/sync-api.mjs`:
- Around line 263-286: The class catalogue generation in sync-api.mjs can
silently write an empty classes.generated.json, so add a hard failure in the
classes build path when classes.length is zero after filtering/mapping api-index
entries. Update the logic around the classes pipeline and the
fs.writeFileSync/console.log block to validate the result before writing, and
throw or exit with a clear error message if no class entries are produced. Use
the existing classes, classesOut, and out._sync.source symbols to place the
check in the same flow so upstream api-index drift fails the sync instead of
shipping a blank cheatsheet panel.
In `@configurator/src/components/panels/CheatsheetPanel.svelte`:
- Around line 135-139: The copy buttons in CheatsheetPanel.svelte are only
revealed on hover, which hides the copy affordance on touch and keyboard users.
Update the button styling/behavior in the copy selector and other matching copy
actions (including the one near the later copy block) so they are visible or
otherwise discoverable without hover, while still preserving any hover
enhancement.
- Around line 56-60: The copy success state in copyText should not be reset by
an earlier timeout when users copy again quickly. Update the timeout handling in
CheatsheetPanel’s copyText function to clear any existing reset timer before
scheduling a new one, and keep a reusable timer reference alongside the copied
state so the latest copy action controls when copied is cleared.
In `@configurator/src/components/panels/ColorsPanel.svelte`:
- Around line 326-327: The swatch fallback in ColorsPanel.svelte is returning
the raw sourceColor when resolveColor(expr) is empty, which collapses all
non-500 shades to one color. Update the logic around the color-mix expression so
the helper that builds the mix returns expr when resolution fails, allowing the
browser to render the computed mix directly instead of falling back to
sourceColor.
---
Nitpick comments:
In `@configurator/src/components/panels/ColorsPanel.svelte`:
- Around line 290-314: Consolidate palette input lookup so all preview helpers
use the same source-value path as the main brand row, instead of mixing
`sourceTokenMap` and hard-coded defaults. Update the endpoint helpers in
`ColorsPanel.svelte`—including `getLightSurface`, `getDarkSurface`,
`getLightText`, `getDarkText`, and the other referenced
preview/curve/mini-palette helpers—to resolve values through one shared helper
that checks `sourceTokenMap` first and only then falls back to defaults. Keep
the existing helper names and call sites, but route them through the shared
lookup so token default changes stay consistent across all previews.
🪄 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: 6f48b973-be03-4ab2-bd3e-c4f9575231be
📒 Files selected for processing (17)
badges/badge-optimal.jsonconfigurator/scripts/sync-api.mjsconfigurator/src/components/DomainPanel.svelteconfigurator/src/components/inputs/OklchColorDesk.svelteconfigurator/src/components/panels/BordersPanel.svelteconfigurator/src/components/panels/CheatsheetPanel.svelteconfigurator/src/components/panels/ColorsPanel.svelteconfigurator/src/components/panels/EffectsPanel.svelteconfigurator/src/components/panels/LayoutPanel.svelteconfigurator/src/components/panels/MacrosPanel.svelteconfigurator/src/components/panels/MiscPanel.svelteconfigurator/src/components/panels/MotionPanel.svelteconfigurator/src/components/panels/ShadowsPanel.svelteconfigurator/src/components/panels/SpacingPanel.svelteconfigurator/src/components/panels/TypographyPanel.svelteconfigurator/src/components/panels/WcagPanel.svelteconfigurator/src/data/classes.generated.json
- sync-api.mjs: guard against empty class catalogue — exit(1) if no type:"class" entries found, matching the existing token guard - CheatsheetPanel: fix copy timer race — clear previous timeout before scheduling a new one so rapid copies don't prematurely clear the success state - CheatsheetPanel: copy buttons are now always visible at 40% opacity (hover raises to 100%) instead of fully hidden until hover, so they are discoverable on touch and keyboard - ColorsPanel: fall back to the concrete color-mix() expression instead of sourceColor when resolveColor() returns empty — allows the browser to paint the computed mix directly rather than collapsing all non-500 steps to the source hue Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HNDMX9UPFoTYJeLxbD3xfC
This was referenced Jun 28, 2026
This was referenced Jul 3, 2026
This was referenced Jul 7, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
color-mix() expressions computed from literal OKLCH source values; dark L/D
rows now show visually distinct tints/shades instead of mirroring light
and computePaletteSwatch() that bypasses CSS cascade issues entirely
value moved below token name for clean layout
across Colors, Typography, Spacing, Layout, Borders, Shadows, Motion, Effects,
Macros, Misc, WCAG panels
own panel instead of ExportPanel
entries with kind, description, copy button) and CSS variables tab (686
tokens grouped by category/group with role badges and copy button)
entries so the cheatsheet panel has structured data at build time
Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01HNDMX9UPFoTYJeLxbD3xfC
Summary by CodeRabbit
New Features
Bug Fixes
UI/UX