fix(editor): light theme contrast + gradient palette - #470
Conversation
…the light theme Two contrast bugs reported directly against the gradient picker: the "remove color" icon read as invisible until hover, and the brightness slider's thumb disappeared into the popover background in light mode. Both buttons/icons in gradient-editor.tsx were colored for the dark color-wheel canvas above them, but the brightness-slider row has no canvas of its own — it sits directly on the (theme-dependent) popover surface, where the near-white thumb (`#f5f5f5`) all but vanished against the light theme's near-white surface. Gave that row its own dark backing, consistent with the canvas and angle-knob beside it (deliberately dark-by-design, like most pro color pickers), and bumped the icon buttons from 60% to 80% white so they don't need hover to read. A light-theme sweep for the same class of bug found two more hardcoded surfaces: ShortcutsConfigDialog.tsx (`bg-[#09090b] text-white`, so the whole dialog stayed dark regardless of theme) and App.tsx's editor Suspense fallback (same dark hex, flashes on every editor load before the real light UI paints). Both now use the design-tokens.css custom properties already used everywhere else in the app. While auditing accent-colored surfaces for the same sweep, found a separate but related bug: a few primary buttons (`.exportBtn`, `.bigRecBtn`, `.previewEmptyPrimaryButton`, and VirtualPreview's icon-button hover state) put white/near-white text directly on the mint `--accent`/`--brand` background instead of `--accent-on` — the token design-tokens.css defines specifically for text on that background. White-on-mint measures under WCAG's contrast minimums in both themes; switched all four to `--accent-on`, matching the pattern already used correctly everywhere else (NewEditorShell.module.css's `.paneTabs button.isActive`, `.btnPrimary`, Modals.tsx, ExportDialog.tsx). Finally, the default gradient presets: 16 swatches built from four grays plus the single mint accent, so half the grid paired a gray with the same green, reading as "we only have one color." Recolored with the same hue spread already offered in the solid-color tab just below it (blue, purple, pink, orange, green) with a couple of mint blends so the brand color still shows up without dominating. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
Warning Review limit reached
Next review available in: 3 minutes Limit details: You’ve used all 4 included reviews currently available. You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?Wait for the limit to reset, then comment An organization admin can change what happens after included review limits in Billing. How do review limits work?CodeRabbit enforces per-developer PR review limits within each organization. For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (10)
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 |
…ressed Ran /code-review (medium effort, 8 finder angles + verification) against bb6452c while waiting out CodeRabbit's rate limit. Two findings were the migration itself introducing bugs, and two more were the same white-on-mint class of bug the previous commit fixed, just in files it didn't touch: - ShortcutsConfigDialog's "Swap" button (shown on a keybinding conflict) had its hover and resting background collapsed onto the same `--warn-soft` token — the pre-migration code used two distinct amber opacities (20%/30%) to give it a hover state, and the conflict banner's border/fill did the same thing (10%/20%), leaving the border invisible against its own fill. Gave the border `--warn` (matching the pattern already used two lines up in the same file for the binding-chip's conflict state) and the hover a `color-mix()` step, the same technique NewEditorShell.module.css already uses elsewhere for token-based opacity variants. - MediaStage.tsx's "Add to Timeline" button read `var(--on-accent, #fff)` — a token name that doesn't exist anywhere in design-tokens.css (only `--accent-on`, words reversed, is defined) — so it always fell through to the `#fff` fallback: white text on the mint accent, always, in both themes. LeftPanel.tsx's rewind-confirm button paired the accent background with `color: var(--bg)` instead of `--accent-on`, which happens to read fine in dark theme (`--bg` is near-black there) but is near-white-on-mint in light theme. Both switched to `--accent-on`. - The Suspense fallback fix in the previous commit (hardcoded dark colors → theme tokens) fixed the light-theme flash but introduced the mirror bug: `data-theme="dark"` is only ever set by useTheme(), which lives inside the same lazily-loaded editor chunk the fallback covers, so a dark-theme user now sees a light flash while that chunk downloads. Added the standard FOUC-prevention pattern instead — a synchronous inline script in index.html's <head> that applies the stored preference before first paint — which fixes it for every themed element on first load, not just this one. - `.bigRecBtn.recording` (EditorShellV4.module.css) inherits its color from the base rule, which the previous commit changed from white to `--accent-on` (tuned for the mint accent, not the red `--danger` this state switches the background to). No code path sets the `recording` class today, so this was inert either way, but pinned it to `#fff` explicitly so the red recording state doesn't silently inherit a color chosen for a different background if that ever changes. One candidate (a claim that the gradient-editor brightness slider's new `rounded-full` track exposes the wave-path stroke at its rounded ends in light mode) didn't survive verification: the stroke sits at the track's vertical center, and a stadium shape's boundary at its own vertical center is at full width by construction — the recession is sub-pixel, and the wave path's own endpoints (~12%/87% of the track width) don't reach that region regardless. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
@coderabbitai review |
|
|
@coderabbitai review Generated by Claude Code |
|
❌ Action failedReview failed.
|
|
|
1 participant
Summary
gradient-editor.tsx): the "remove color" icon read as invisible until hover, and the brightness-slider thumb disappeared into the light-theme popover background. The slider row had no backing of its own (unlike the dark color-wheel canvas above it), so its near-white thumb (#f5f5f5) blended into the light theme's near-white surface. Gave the row its own dark backing and bumped the icon buttons from 60%→80% white opacity.ShortcutsConfigDialog.tsx(bg-[#09090b] text-white, ignored theme entirely) andApp.tsx's editor-loading Suspense fallback (flashes dark on every editor load). Both converted todesign-tokens.csscustom properties..exportBtn,.bigRecBtn,.previewEmptyPrimaryButton, andVirtualPreview's icon-button hover state used white/near-white text on the mint--accent/--brandbackground instead of the--accent-ontoken the design system defines for that exact pairing. Under WCAG contrast minimums in both themes — switched all four to--accent-on, matching the pattern already used correctly elsewhere (.paneTabs button.isActive,.btnPrimary,Modals.tsx,ExportDialog.tsx).Intended to be cherry-picked into
1.10.0.rc2— the gradient-palette change counts as a fix for that purpose.Testing
npx biome check .— clean (13 pre-existing warnings, unrelated to this diff)npx tsc --noEmit -p .— cleannpx vitest runon the touched components (gradient-editor, ShortcutsConfigDialog's coverage viaNewEditorShell.dialogShortcuts,RightPanes,VirtualPreview) — 38/38 passing?, theme toggled via the real UI button), and the four white-on-mint buttons.🤖 Generated with Claude Code