fix: unify Editing Room accent color with brand palette - #29
fix: unify Editing Room accent color with brand palette#29Alfredoalv13 wants to merge 2 commits into
Conversation
The video editor hardcoded a leftover blue (#2563EB, from before the VybeClip rebrand) as its accent/selection color in ~180 places across 25 files, while the launch HUD and the app's own design tokens (--primary, --launch-accent) already use the brand burnt-orange (#B6410F). This swaps every chrome accent use to the primary token (or its literal hex in inline styles), so the editor now matches the launch window in both light and dark mode. Also updates the cursor click-effect default color and the default arrow/figure annotation color from the old blue to brand orange, per product direction to use the established VybeClip branding rather than anything inherited from the original Recordly project. Left untouched (out of scope for this pass): - The generic background/annotation color-swatch pickers, which legitimately include blue as one of many arbitrary content colors. - ItemGlass.module.css's per-clip-type color palette, including glassGreen/glassCyan which also render as blue — that's a separate design decision about what those clip types should actually look like, tracked as a follow-up. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Code review on the accent-color PR found three leftover Tailwind-blue text colors (#dbeafe, rgba(191,219,254,...)) in UpdateToastWindow.tsx that the original regex pass missed because they weren't in the literal #2563EB substitution list, even though their sibling border/background/shadow properties in the same style objects were already converted to brand orange. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
Ran an internal bug-hunter review against this diff before merge. Finding (fixed in 37041ff): three leftover Tailwind-blue text colors in Everything else checked out clean: rgba math (37,99,235→182,65,15) consistent throughout, hex swaps (#2563EB→#B6410F) consistent, no malformed Tailwind arbitrary-value classes from the regex substitutions, and the two intentionally-untouched spots (SettingsPanel.tsx's generic color-swatch array, ItemGlass.module.css's clip-type palette) are exactly as scoped. Re-verified after the fix: |
Summary
#2563EB) as its accent/selection color in ~180 places across 25 files, while the launch HUD and the app's own design tokens (--primary,--launch-accent) already use the brand burnt-orange (#B6410F). This swaps every chrome accent usage over to theprimarytoken (or its literal hex in inline styles/rgba shadows), so the editor now matches the launch window's branding in both light and dark mode — both windows read the same.darkclass from the sharedThemeContext, so this stays in sync automatically.Explicitly out of scope (left untouched)
ItemGlass.module.css's per-clip-type timeline color palette. Two of its six clip-color families (glassGreen,glassCyan— the latter used for regular clips) also render as the old blue instead of an actual green/cyan, but deciding what they should look like is a separate design decision, not a mechanical token swap. Flagged as a follow-up task.Test plan
grep-verified zero remaining#2563EB(and itsrgba(37,99,235,...)/blue-gradient-family equivalents) outside the two intentional exceptions noted abovetsc --noEmit— cleanvitest run— 834/834 tests passing--primary/--editor-*tokens are theme-aware and already used correctly elsewhere (button.tsx,skeleton.tsx)🤖 Generated with Claude Code