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.
This commit is contained in:
Miguel Angel Simon Sierra
2026-07-09 16:54:34 -04:00
parent fa3848a33d
commit 95ded6c026
2 changed files with 9 additions and 5 deletions
@@ -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
@@ -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,
}}