Land remaining light-mode panels (batch A + B) onto main - #510
Conversation
Second of a 3-part light-mode rollout, stacked on the shell/infra PR. Applies the theme.svelte.ts system (added in part 1) to every shared input control and the first batch of domain panels. Inputs: ClampField, ColorInput, OklchColorDesk, PowerKnobRow, RangeWithNumber, SliderRow, TokenRow. Panels: AllTokensTab, BordersPanel, CheatsheetPanel, ColorsPanel, EffectsPanel, ExportPanel, GenericTokenPanel, HomePanel. Includes fixes for two review-bot findings on the original combined PR: missing dark: placeholder pairing on the AllTokensTab and GenericTokenPanel search inputs, and missing dark: variants for the motion/form entries in CheatsheetPanel's KIND_COLOR map.
Third and final part of the light-mode rollout, stacked on batch A. Applies the theme.svelte.ts system to the remaining domain panels: LayoutPanel, MacrosPanel, MiscPanel, MotionPanel, ShadowsPanel, SpacingPanel, ThemesPanel, TypographyPanel, WcagPanel. Includes a fix for a review-bot finding on the original combined PR: LayoutPanel's two <select> controls hardcoded their <option> element background to the dark-mode color regardless of theme (native <option> styling has no dark: variant support), producing dark-on-dark text in light mode. Now derived from the chrome theme at render time.
Same bug LayoutPanel already fixed in this PR was still present in MotionPanel, TypographyPanel, and WcagPanel: their <select> controls got a light-mode text/border treatment but every <option> kept a hardcoded dark background (#16161e), which native <option> elements don't accept via a dark: class, so light mode showed unreadable dark-on-dark dropdown items. Applies the same fix as LayoutPanel: a themeState-derived optionBg used in each <option>'s inline style.
…-panels-b Light mode for remaining panels, batch B (3/3)
|
Warning Review limit reached
Next review available in: 41 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?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 reviews. How do review 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 refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (24)
✨ 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 QodoLand Studio light-mode inputs and panels onto main (batches A+B)
AI Description
Diagram
High-Level Assessment
Files changed (24)
|
Code Review by Qodo
Context used✅ Compliance rules (platform):
11 rules 1.
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
… theme Same bug already fixed in LayoutPanel, MotionPanel, TypographyPanel, and WcagPanel: the modular-scale ratio preset <select> got light-mode text but its <option> elements kept a hardcoded dark background (#16161e), unreadable in light mode since <option> doesn't support Tailwind's dark: variant. Applies the same themeState-derived optionBg pattern.
|
Fixed in 7114f1f — same bug as before, this time in Generated by Claude Code |
#510 (light-mode dark: classes) and this PR (rebuild .sf-equal, drop --sf-equal-min-col-2/3/4/6) both touched the Equal grid panel section. Kept this PR's replacement (the tokens the old per-column sliders wrote to no longer exist in core CSS) and added the missing dark: pairing to the new helper text to match the rest of the panel's light-mode styling.
2 participants
Closes the gap left by the stacked-PR merge sequence for the Studio light-mode rollout (#506, #507, #508).
What happened
#506, #507, and #508 were deliberately stacked (each based on the previous PR's branch) so every PR showed only its own incremental diff for review. All three were merged — but merging a stacked PR only advances its own base branch, not
main:main✅claude/studio-light-mode-1-infra(notmain)claude/studio-light-mode-2-inputs-panels-a(notmain)So
maincurrently only has #506's content (theme system + shell chrome). This PR's head branch (claude/studio-light-mode-2-inputs-panels-a) is the tip of the stack and contains all three merges' combined history — confirmed viagit merge-base --is-ancestorthat #508's commits are included.What this PR contains
Purely the already-reviewed and already-merged content of #507 (inputs + panels batch A) and #508 (panels batch B, including the follow-up
<option>background fix). No new changes — this is just landing already-approved work ontomain.Verification
git diffbetween this branch and the original combined single-commit changeset (from before the 3-way split) is empty — confirms nothing was lost or altered across the stack.npx svelte-check— 0 errorsnpx vitest run— 113/113 passingGenerated by Claude Code