From 95ded6c0268cb41d0667552f43d2d22897731454 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Thu, 9 Jul 2026 15:04:17 -0400
Subject: [PATCH] fix(studio): draw the timeline marquee in the theme accent
 color

The marquee and range overlays used a hardcoded blue; they now use the timeline
theme accent for the border with a translucent accent fill.
---
 .../studio/src/player/components/TimelineCanvas.tsx |  1 +
 .../player/components/TimelineSelectionOverlays.tsx | 13 ++++++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/studio/src/player/components/TimelineCanvas.tsx b/packages/studio/src/player/components/TimelineCanvas.tsx
index 7c206072d..55bb299bf 100644
--- a/packages/studio/src/player/components/TimelineCanvas.tsx
+++ b/packages/studio/src/player/components/TimelineCanvas.tsx
@@ -569,6 +569,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
         rangeSelection={rangeSelection}
         marqueeRect={marqueeRect}
         pps={pps}
+        accentColor={getTrackStyle("").accent}
       />
 
       {/* Playhead — hidden while dragging a beat so its guideline doesn't
diff --git a/packages/studio/src/player/components/TimelineSelectionOverlays.tsx b/packages/studio/src/player/components/TimelineSelectionOverlays.tsx
index edcb03bd0..249b92ede 100644
--- a/packages/studio/src/player/components/TimelineSelectionOverlays.tsx
+++ b/packages/studio/src/player/components/TimelineSelectionOverlays.tsx
@@ -6,12 +6,15 @@ interface TimelineSelectionOverlaysProps {
   rangeSelection: TimelineRangeSelection | null;
   marqueeRect: TimelineMarqueeOverlayRect | null;
   pps: number;
+  /** Primary/accent color (hex) shared with the rest of the timeline chrome. */
+  accentColor: string;
 }
 
 export function TimelineSelectionOverlays({
   rangeSelection,
   marqueeRect,
   pps,
+  accentColor,
 }: TimelineSelectionOverlaysProps) {
   return (
     <>
@@ -23,9 +26,9 @@ export function TimelineSelectionOverlays({
             width: Math.abs(rangeSelection.end - rangeSelection.start) * pps,
             top: RULER_H,
             bottom: 0,
-            backgroundColor: "rgba(59, 130, 246, 0.12)",
-            borderLeft: "1px solid rgba(59, 130, 246, 0.4)",
-            borderRight: "1px solid rgba(59, 130, 246, 0.4)",
+            backgroundColor: `${accentColor}1f`,
+            borderLeft: `1px solid ${accentColor}`,
+            borderRight: `1px solid ${accentColor}`,
             zIndex: 50,
           }}
         />
@@ -40,8 +43,8 @@ export function TimelineSelectionOverlays({
             top: marqueeRect.top,
             width: marqueeRect.width,
             height: marqueeRect.height,
-            backgroundColor: "rgba(96, 165, 250, 0.16)",
-            border: "1px solid rgba(147, 197, 253, 0.72)",
+            backgroundColor: `${accentColor}29`,
+            border: `1px solid ${accentColor}`,
             boxShadow: "0 0 0 1px rgba(15, 23, 42, 0.35)",
             zIndex: 60,
           }}