fix(editor): light theme contrast + gradient palette (cherry-pick for 1.10.0-rc.2) - #474
Merged
EtienneLescot merged 2 commits intoAug 22, 2026
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>
…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>
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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 |
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
1 participant
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.
Cherry-pick of #470 onto
release/v1.10.0for the next RC.Summary
ShortcutsConfigDialog.tsxandApp.tsx's editor-loading Suspense fallback, both ignoringdata-themeentirely..exportBtn,.bigRecBtn,.previewEmptyPrimaryButton,VirtualPreview's icon-button hover, plus two more found by a follow-up self-review (MediaStage.tsxhad a typo'd token that silently fell back to white;LeftPanel.tsxused--bginstead of--accent-on) — all switched to the--accent-ontoken the design system already defines for text on the accent background.index.html.Same commits as #470 (merged to main), cherry-picked verbatim.
Testing
Same as #470:
npx biome check .,npx tsc --noEmit -p ., and the relevantvitestsuites all pass on this branch too.🤖 Generated with Claude Code