@hyperframes/studio 0.8.59 → 0.8.60

package/src/player/components/TimelineAutomationLane.tsx

@@ -75,7 +75,7 @@ function pointCircleStyle(
     radius: POINT_R * (dragging ? 1.3 : inRange ? 1.15 : 1),
     // A white ring rather than a different fill: the fill is the parameter's
     // own colour, and a lane with two envelopes on it is read by colour first.
-    stroke: inRange ? "#fff" : "rgba(0,0,0,0.5)",
+    stroke: inRange ? "var(--timeline-text-solid)" : "var(--timeline-automation-point-muted)",
     strokeWidth: inRange ? 1.5 : 1,
   };
 }
@@ -132,7 +132,7 @@ function ReadOnlyNote({
   return (
     <div
       data-automation-readonly-note=""
-      className="hf-automation-readonly-note pointer-events-none absolute rounded-[3px] bg-black/85 px-1.5 py-0.5 text-[9px] text-white/80"
+      className="hf-automation-readonly-note pointer-events-none absolute rounded-[3px] bg-[var(--timeline-overlay-bg-strong)] px-1.5 py-0.5 text-[9px] text-[var(--timeline-overlay-text)]"
       style={{ left: leftPx + 6, top: 2, zIndex: 3, maxWidth: Math.max(120, widthPx - 12) }}
     >
       {note}
@@ -470,7 +470,7 @@ export function TimelineAutomationLane({
           x2={PAD_X + widthPx}
           y1={pad + inner / 2}
           y2={pad + inner / 2}
-          stroke="rgba(255,255,255,0.08)"
+          stroke="var(--timeline-automation-rail)"
           strokeDasharray="3 4"
         />
         {rangeSelection ? (
@@ -541,7 +541,7 @@ export function TimelineAutomationLane({
             cx={xOf(playheadSec)}
             cy={yOf(currentValue)}
             r={2.5}
-            fill="#fff"
+            fill="var(--timeline-text-solid)"
             opacity={0.8}
             pointerEvents="none"
           />
@@ -561,7 +561,7 @@ export function TimelineAutomationLane({
 
       {hint ? (
         <div
-          className="hf-automation-hint pointer-events-none absolute rounded-[3px] bg-black/80 px-1 py-0.5 font-mono text-[9px] text-white"
+          className="hf-automation-hint pointer-events-none absolute rounded-[3px] bg-[var(--timeline-overlay-bg)] px-1 py-0.5 font-mono text-[9px] text-[var(--timeline-text-solid)]"
           style={{ left: leftPx + 6, top: 2, zIndex: 3 }}
         >
           {hint}

package/src/player/components/TimelineCanvas.tsx

@@ -94,7 +94,7 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
               left: props.contentOrigin + gap.start * props.pps,
               width: Math.max((gap.end - gap.start) * props.pps, 2),
               height: TRACK_H - CLIP_Y * 2,
-              background: loud ? "rgba(60,230,172,0.18)" : "rgba(60,230,172,0.055)",
+              background: loud ? "var(--timeline-accent-soft)" : "var(--timeline-accent-faint)",
               borderRadius: 4,
               zIndex: 25,
             }}
@@ -112,8 +112,8 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
             left: props.contentOrigin + draggedClip.previewStart * props.pps,
             width: Math.max(draggedClip.element.duration * props.pps, 4),
             height: draggedClipHeight,
-            border: "1px solid color-mix(in srgb, var(--color-accent) 55%, transparent)",
-            background: "color-mix(in srgb, var(--color-accent) 12%, transparent)",
+            border: "1px solid color-mix(in srgb, var(--timeline-accent) 55%, transparent)",
+            background: "color-mix(in srgb, var(--timeline-accent) 12%, transparent)",
             borderRadius: 4,
             zIndex: 30,
           }}
@@ -132,8 +132,8 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
             left: props.contentOrigin + props.dropPreview.start * props.pps,
             width: DROP_PREVIEW_SECONDS * props.pps,
             height: TRACK_H - CLIP_Y * 2,
-            border: "1px solid color-mix(in srgb, var(--color-accent) 55%, transparent)",
-            background: "color-mix(in srgb, var(--color-accent) 12%, transparent)",
+            border: "1px solid color-mix(in srgb, var(--timeline-accent) 55%, transparent)",
+            background: "color-mix(in srgb, var(--timeline-accent) 12%, transparent)",
             borderRadius: 4,
             zIndex: 30,
           }}
@@ -151,8 +151,8 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
             left: props.contentOrigin,
             width: props.trackContentWidth,
             height: 1,
-            background: "#3CE6AC",
-            boxShadow: "0 0 3px rgba(60,230,172,0.5)",
+            background: "var(--timeline-accent)",
+            boxShadow: "0 0 3px var(--timeline-accent-glow)",
             zIndex: 55,
           }}
         />
@@ -167,11 +167,14 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
             top: RULER_H,
             bottom: 0,
             width: 1,
-            background: snapGuide.type === "playhead" ? "#3CE6AC" : "rgba(255,255,255,0.6)",
+            background:
+              snapGuide.type === "playhead"
+                ? "var(--timeline-accent)"
+                : "var(--timeline-snap-guide)",
             boxShadow:
               snapGuide.type === "playhead"
-                ? "0 0 6px rgba(60,230,172,0.5)"
-                : "0 0 6px rgba(255,255,255,0.4)",
+                ? "0 0 6px var(--timeline-accent-glow)"
+                : "0 0 6px var(--timeline-text-dim)",
             zIndex: 60,
           }}
         />
@@ -201,8 +204,8 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
             top: props.marqueeRect.top,
             width: props.marqueeRect.width,
             height: props.marqueeRect.height,
-            background: "rgba(60,230,172,0.10)",
-            border: "1px dashed rgba(60,230,172,0.7)",
+            background: "var(--timeline-accent-fill)",
+            border: "1px dashed var(--timeline-accent-border)",
             borderRadius: 2,
             zIndex: 70,
           }}
@@ -220,9 +223,9 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
             width: Math.abs(props.rangeSelection.end - props.rangeSelection.start) * props.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: "var(--timeline-info-bg)",
+            borderLeft: "1px solid var(--timeline-info-border)",
+            borderRight: "1px solid var(--timeline-info-border)",
             zIndex: 50,
           }}
         />

package/src/player/components/TimelineClip.test.tsx

@@ -69,7 +69,7 @@ function renderClip({
 describe("TimelineClip", () => {
   it("renders the clip label above custom content without showing default timecode", () => {
     const { host, root } = renderClip({
-      element: { id: "hero", label: "Hero", tag: "div", start: 1, duration: 0.5, track: 0 },
+      element: { id: "hero", label: "Hero", tag: "div", start: 1, duration: 1, track: 0 },
     });
 
     expect(host.querySelector(".timeline-clip__label")?.textContent).toBe("Hero");
@@ -78,18 +78,55 @@ describe("TimelineClip", () => {
     act(() => root.unmount());
   });
 
-  it("keeps selected narrow clips labeled even when they render custom content", () => {
+  it("drops the label chip under 60px even when the clip is selected", () => {
     const { host, root } = renderClip({
-      element: { id: "fx", label: "FX", tag: "div", start: 0, duration: 0.1, track: 0 },
+      element: { id: "fx", label: "FX", tag: "div", start: 0, duration: 1, track: 0 },
+      pps: 59,
       isSelected: true,
     });
 
-    expect(host.querySelector(".timeline-clip__label")?.textContent).toBe("FX");
+    expect(host.querySelector(".timeline-clip__label")).toBeNull();
     expect(host.querySelector(".timeline-clip__timecode")).toBeNull();
+    expect(host.querySelector(".timeline-clip")?.getAttribute("data-ladder")).toBe("picture");
 
     act(() => root.unmount());
   });
 
+  it("keeps the label at 60px and fills one frame under 24px", () => {
+    const labeled = renderClip({
+      element: { id: "wide", label: "City", tag: "video", start: 0, duration: 1, track: 0 },
+      pps: 200,
+    });
+    expect(labeled.host.querySelector(".timeline-clip__label")?.textContent).toBe("City");
+    expect(labeled.host.querySelector(".timeline-clip")?.getAttribute("data-ladder")).toBe(
+      "labeled",
+    );
+    expect(labeled.host.querySelector<HTMLElement>(".timeline-clip")?.style.borderRadius).toBe(
+      "var(--timeline-clip-radius)",
+    );
+    act(() => labeled.root.unmount());
+
+    const frame = renderClip({
+      element: { id: "sliver", label: "City", tag: "img", start: 0, duration: 1, track: 0 },
+      pps: 23,
+      isSelected: true,
+    });
+    expect(frame.host.querySelector(".timeline-clip__label")).toBeNull();
+    expect(frame.host.querySelector(".timeline-clip")?.getAttribute("data-ladder")).toBe("frame");
+    act(() => frame.root.unmount());
+  });
+
+  it("gives audio clips the pill radius", () => {
+    const { host, root } = renderClip({
+      element: { id: "vo", label: "Voice", tag: "audio", start: 0, duration: 2, track: 1 },
+      pps: 100,
+    });
+    expect(host.querySelector<HTMLElement>(".timeline-clip")?.style.borderRadius).toBe(
+      "var(--timeline-clip-audio-radius)",
+    );
+    act(() => root.unmount());
+  });
+
   it("marks hidden clips for active-state suppression", () => {
     const { host, root } = renderClip({
       element: {

package/src/player/components/TimelineClip.tsx

@@ -1,6 +1,11 @@
 import { memo, type CSSProperties, type ReactNode } from "react";
 import type { TimelineElement } from "../store/playerStore";
-import { defaultTimelineTheme, getClipHandleOpacity, type TimelineTheme } from "./timelineTheme";
+import {
+  clipWidthLadder,
+  defaultTimelineTheme,
+  getClipHandleOpacity,
+  type TimelineTheme,
+} from "./timelineTheme";
 import type { TimelineEditCapabilities } from "./timelineEditing";
 import { isAudioTimelineElement } from "../../utils/timelineInspector";
 import { timelineClipFocusId } from "./timelineNavigationIdentity";
@@ -60,9 +65,10 @@ export const TimelineClip = memo(function TimelineClip({
   const widthPx = Math.max(el.duration * pps, 4);
   const handleOpacity = getClipHandleOpacity({ isHovered, isSelected, isDragging });
   const displayLabel = el.label || el.id || el.tag;
+  const ladder = clipWidthLadder(widthPx);
   const showHandles = handleOpacity > 0.01 && (widthPx >= 32 || isSelected);
-  const showLabel = widthPx >= 40 || isSelected;
-  const showDefaultText = !hasCustomContent && (widthPx >= 40 || isSelected);
+  const showLabel = ladder === "labeled";
+  const showDefaultText = !hasCustomContent && ladder === "labeled";
   const startLabel = el.start.toFixed(1);
   const endLabel = (el.start + el.duration).toFixed(1);
   const themeVariables = {
@@ -92,7 +98,7 @@ export const TimelineClip = memo(function TimelineClip({
     width: widthPx,
     top: clipY,
     ...(clipHeight === undefined ? { bottom: clipY } : { height: clipHeight }),
-    borderRadius: theme.clipRadius,
+    borderRadius: isAudioClip ? theme.audioClipRadius : theme.clipRadius,
     ...themeVariables,
     zIndex: isDragging ? 20 : isSelected ? 10 : isHovered ? 5 : 1,
     // Regular cursor over clips (CapCut-style, user preference) — no grab hand.
@@ -114,6 +120,7 @@ export const TimelineClip = memo(function TimelineClip({
       data-clip-start={el.start}
       data-clip-end={el.start + el.duration}
       data-clip-hidden={el.hidden ? "true" : undefined}
+      data-ladder={ladder}
       data-active={isActive ? "" : undefined}
       aria-hidden={isGestureActor ? "true" : undefined}
       tabIndex={isGestureActor ? undefined : tabIndex}

package/src/player/components/TimelineClipDiamonds.test.tsx

@@ -258,7 +258,9 @@ describe("TimelineClipDiamonds", () => {
     const selectedDiamond = host.querySelector<HTMLButtonElement>('button[title="60%"]');
     expect(playheadDiamond?.dataset.keyframeAtPlayhead).toBe("true");
     expect(playheadDiamond?.dataset.keyframeSelected).toBe("false");
-    expect(playheadDiamond?.querySelector("path:last-child")?.getAttribute("fill")).toBe("#a3a3a3");
+    expect(playheadDiamond?.querySelector("path:last-child")?.getAttribute("fill")).toBe(
+      "var(--timeline-diamond-muted)",
+    );
     expect(playheadDiamond?.querySelector('path[stroke="#4ba3d2"]')).not.toBeNull();
     expect(selectedDiamond?.dataset.keyframeAtPlayhead).toBe("false");
     expect(selectedDiamond?.dataset.keyframeSelected).toBe("true");

package/src/player/components/TimelineClipDiamonds.tsx

@@ -225,7 +225,7 @@ export const TimelineDiamondLane = memo(function TimelineDiamondLane({
     isSelected && halfFramePct > 0
       ? nearestKeyframeWithin(sorted, currentPercentage, halfFramePct)
       : null;
-  const baseColor = isSelected ? accentColor : "#a3a3a3";
+  const baseColor = isSelected ? accentColor : "var(--timeline-diamond-muted)";
   const baseOpacity = isSelected ? 0.4 : 0.25;
   const canDrag = isSelected && !!onMoveKeyframe;
 
@@ -280,7 +280,7 @@ export const TimelineDiamondLane = memo(function TimelineDiamondLane({
         const isKfSelected = selectedKeyframes.has(kfKey);
         const atPlayhead = kf === playheadKeyframe;
         const isHighlighted = isKfSelected || atPlayhead;
-        const color = isKfSelected ? accentColor : "#a3a3a3";
+        const color = isKfSelected ? accentColor : "var(--timeline-diamond-muted)";
 
         const onPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {
           if (e.button !== 0) return;

package/src/player/components/TimelineDiamondConnectors.tsx

@@ -213,8 +213,8 @@ function SegmentEaseControl({
           zIndex: 3,
           pointerEvents: "auto",
           padding: 0,
-          border: "1px solid rgba(255, 255, 255, 0.14)",
-          background: "#171717",
+          border: "1px solid var(--timeline-diamond-border)",
+          background: "var(--timeline-diamond-bg)",
           cursor: "pointer",
         }}
         onPointerDown={(e) => {

package/src/player/components/TimelineEmptyState.tsx

@@ -18,7 +18,7 @@ export function TimelineEmptyState({
 }: TimelineEmptyStateProps) {
   return (
     <div
-      className={`h-full border-t bg-[#0a0a0b] flex flex-col select-none transition-colors duration-150 ${
+      className={`h-full border-t bg-[var(--timeline-shell-bg)] flex flex-col select-none transition-colors duration-150 ${
         isDragOver ? "border-studio-accent/50 bg-studio-accent/3" : "border-neutral-800/50"
       }`}
       onDragOver={onDragOver}

package/src/player/components/TimelineFxButton.tsx

@@ -79,7 +79,7 @@ function GroupNameDialog({
       <div
         role="dialog"
         aria-label="This track cannot be grouped"
-        className="z-200 w-64 rounded-md border border-white/10 bg-[#1b1b1f] p-3 text-[11px] leading-snug text-white/75 shadow-xl"
+        className="z-200 w-64 rounded-md border border-[var(--timeline-tick-major)] bg-[var(--timeline-dialog-bg)] p-3 text-[11px] leading-snug text-[var(--timeline-text-soft)] shadow-xl"
         style={{ position: "fixed", ...groupDialogPosition(anchorRect) }}
         onPointerDown={(event) => event.stopPropagation()}
         onKeyDown={(event) => {
@@ -97,7 +97,7 @@ function GroupNameDialog({
     <div
       role="dialog"
       aria-label="Name this group"
-      className="z-200 w-64 rounded-md border border-white/10 bg-[#1b1b1f] p-3 text-[11px] text-white/75 shadow-xl"
+      className="z-200 w-64 rounded-md border border-[var(--timeline-tick-major)] bg-[var(--timeline-dialog-bg)] p-3 text-[11px] text-[var(--timeline-text-soft)] shadow-xl"
       style={{ position: "fixed", ...groupDialogPosition(anchorRect) }}
       onPointerDown={(event) => event.stopPropagation()}
       onKeyDown={(event) => {
@@ -108,14 +108,14 @@ function GroupNameDialog({
         if (event.key === "Enter") confirm();
       }}
     >
-      <p className="mb-1.5 font-medium text-white">Name this group</p>
+      <p className="mb-1.5 font-medium text-[var(--timeline-text-solid)]">Name this group</p>
       <input
         ref={inputRef}
         type="text"
         aria-label="Group name"
         value={label}
         onChange={(event) => setLabel(event.currentTarget.value)}
-        className="w-full rounded-sm border border-white/20 bg-black/30 px-1.5 py-1 text-[11px] text-white outline-hidden focus:border-[#3CE6AC]"
+        className="w-full rounded-sm border border-[var(--timeline-border-strong)] bg-[var(--timeline-input-bg)] px-1.5 py-1 text-[11px] text-[var(--timeline-text-solid)] outline-hidden focus:border-[var(--timeline-accent)]"
       />
       {/* The sentence. No jargon, and it names both things a bus does. */}
       <p className="mt-2 leading-snug">
@@ -125,14 +125,14 @@ function GroupNameDialog({
       <div className="mt-2.5 flex justify-end gap-1.5">
         <button
           type="button"
-          className="rounded-sm border border-white/20 px-2 py-1 text-[10px] text-white/75 hover:bg-white/10"
+          className="rounded-sm border border-[var(--timeline-border-strong)] px-2 py-1 text-[10px] text-[var(--timeline-text-soft)] hover:bg-[var(--timeline-tick-major)]"
           onClick={onCancel}
         >
           Cancel
         </button>
         <button
           type="button"
-          className="rounded-sm border border-[#3CE6AC] bg-[#3CE6AC]/15 px-2 py-1 text-[10px] font-semibold text-[#3CE6AC] hover:bg-[#3CE6AC]/25"
+          className="rounded-sm border border-[var(--timeline-accent)] bg-[var(--timeline-accent-button-bg)] px-2 py-1 text-[10px] font-semibold text-[var(--timeline-accent)] hover:bg-[var(--timeline-accent-hover)]"
           onClick={confirm}
         >
           Group
@@ -212,7 +212,7 @@ export function TimelineFxButton(props: TimelineFxButtonProps) {
           ref={buttonRef}
           aria-label="Effects — group these clips first"
           title="Group these clips to add effects to all of them"
-          className="flex h-6 items-center justify-center rounded-sm border-0 bg-transparent px-1 text-[10px] font-semibold text-white/35 hover:text-white/75"
+          className="flex h-6 items-center justify-center rounded-sm border-0 bg-transparent px-1 text-[10px] font-semibold text-[var(--timeline-text-faint)] hover:text-[var(--timeline-text-soft)]"
           onPointerDown={(event) => event.stopPropagation()}
           onClick={(event) => {
             event.stopPropagation();
@@ -253,7 +253,9 @@ export function TimelineFxButton(props: TimelineFxButtonProps) {
         aria-label={nodeCount > 0 ? `Effects — ${nodeCount} applied` : "Effects"}
         title="Effects"
         className={`flex h-6 items-center justify-center gap-0.5 rounded border-0 bg-transparent px-1 text-[10px] font-semibold transition-colors ${
-          open || nodeCount > 0 ? "text-[#3CE6AC]" : "text-white/35 hover:text-white/75"
+          open || nodeCount > 0
+            ? "text-[var(--timeline-accent)]"
+            : "text-[var(--timeline-text-faint)] hover:text-[var(--timeline-text-soft)]"
         }`}
         onPointerDown={(event) => event.stopPropagation()}
         onClick={(event) => {

package/src/player/components/TimelineGroupHeader.tsx

@@ -55,21 +55,24 @@ function GroupNameButton({
       // No `flex-1`: the row's control group owns the slack now (`ml-auto`), so
       // claiming it here would push the controls off the right edge — and the
       // count with them, since it rides inside this button.
-      className="flex h-6 min-w-0 items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 text-left text-[11px] text-white hover:text-[#3CE6AC] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+      className="flex h-6 min-w-0 items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 text-left text-[11px] text-[var(--timeline-text-solid)] hover:text-[var(--timeline-accent)] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)]"
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => {
         event.stopPropagation();
         onOpenFxRack();
       }}
     >
-      <span aria-hidden="true" className="shrink-0 text-[12px] leading-none text-white/50">
+      <span
+        aria-hidden="true"
+        className="shrink-0 text-[12px] leading-none text-[var(--timeline-track-label)]"
+      >
         ▤
       </span>
       <span title={label} className="min-w-0 truncate text-left font-medium leading-tight">
         {label}
       </span>
       <span
-        className="shrink-0 rounded-full bg-white/10 px-1 text-[9px] leading-[14px] tabular-nums text-white/55"
+        className="shrink-0 rounded-full bg-[var(--timeline-tick-major)] px-1 text-[9px] leading-[14px] tabular-nums text-[var(--timeline-handle)]"
         aria-hidden="true"
         title={`${memberCount} tracks`}
       >
@@ -103,7 +106,7 @@ export function TimelineGroupHeader({
       style={{
         width: columnWidth,
         height: TRACK_H,
-        color: "#ffffff",
+        color: "var(--timeline-text-solid)",
         background: theme.gutterBackground,
         borderRight: `1px solid ${theme.gutterBorder}`,
       }}
@@ -119,8 +122,10 @@ export function TimelineGroupHeader({
         // 13px mono, matching the property panel's preset-run caret
         // (`hf-fx-preset-run-caret`) — the same disclosure, so the same glyph
         // at the same size rather than a smaller one unique to this row.
-        className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 font-mono text-[13px] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
-          isExpanded ? "text-white" : "text-white/55 hover:text-white"
+        className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 font-mono text-[13px] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)] ${
+          isExpanded
+            ? "text-[var(--timeline-text-solid)]"
+            : "text-[var(--timeline-handle)] hover:text-[var(--timeline-text-solid)]"
         }`}
         onPointerDown={(event) => event.stopPropagation()}
         onClick={(event) => {
@@ -157,8 +162,10 @@ export function TimelineGroupHeader({
             aria-label={`${isLaneOpen ? "Hide" : "Show"} ${label} lanes`}
             title={`${isLaneOpen ? "Hide" : "Show"} lanes`}
             // Anchored right, matching every other header's lane toggle.
-            className={`ml-auto flex h-6 items-center justify-center gap-0.5 rounded border-0 bg-transparent px-1 text-[11px] leading-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
-              isLaneOpen ? "text-[#3CE6AC]" : "text-white/55 hover:text-white"
+            className={`ml-auto flex h-6 items-center justify-center gap-0.5 rounded border-0 bg-transparent px-1 text-[11px] leading-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)] ${
+              isLaneOpen
+                ? "text-[var(--timeline-accent)]"
+                : "text-[var(--timeline-handle)] hover:text-[var(--timeline-text-solid)]"
             }`}
             onPointerDown={(event) => event.stopPropagation()}
             onClick={(event) => {
@@ -167,7 +174,9 @@ export function TimelineGroupHeader({
             }}
           >
             <span aria-hidden="true">∿</span>
-            <span className="text-[9px] tabular-nums text-white/55">{laneCount}</span>
+            <span className="text-[9px] tabular-nums text-[var(--timeline-handle)]">
+              {laneCount}
+            </span>
           </button>
         )}
       </div>

package/src/player/components/TimelineGroupLaneLabels.tsx

@@ -64,7 +64,7 @@ export function TimelineGroupLaneLabels({
             key={lane.target}
             data-group-lane-label={lane.target}
             aria-label={`Show ${groupLabel} ${parts.name}${parts.param ? ` ${parts.param}` : ""} in the effect rack`}
-            className="absolute left-0 flex items-center gap-1.5 overflow-hidden border-0 px-1.5 text-left text-[10px] text-white/65 hover:text-white focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+            className="absolute left-0 flex items-center gap-1.5 overflow-hidden border-0 px-1.5 text-left text-[10px] text-[var(--timeline-text-secondary)] hover:text-[var(--timeline-text-solid)] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)]"
             style={{
               top: top + index * AUTOMATION_LANE_H,
               width: columnWidth,
@@ -79,16 +79,23 @@ export function TimelineGroupLaneLabels({
               onReveal?.(lane.target);
             }}
           >
-            <span aria-hidden="true" className="shrink-0 text-[11px] text-white/40">
+            <span
+              aria-hidden="true"
+              className="shrink-0 text-[11px] text-[var(--timeline-text-dim)]"
+            >
               ▤
             </span>
             <span className="flex min-w-0 flex-1 flex-col justify-center leading-tight">
-              <span className="truncate font-mono text-[9px] text-white/70">{parts.name}</span>
+              <span className="truncate font-mono text-[9px] text-[var(--timeline-text-bright)]">
+                {parts.name}
+              </span>
               {parts.param ? (
-                <span className="truncate font-mono text-[9px] text-white/40">{parts.param}</span>
+                <span className="truncate font-mono text-[9px] text-[var(--timeline-text-dim)]">
+                  {parts.param}
+                </span>
               ) : null}
             </span>
-            <span className="shrink-0 font-mono text-[9px] tabular-nums text-white/55">
+            <span className="shrink-0 font-mono text-[9px] tabular-nums text-[var(--timeline-handle)]">
               {value.toFixed(2)}
             </span>
           </button>

package/src/player/components/TimelineGroupRow.tsx

@@ -21,7 +21,7 @@ import { usePlayerStore } from "../store/playerStore";
 
 /** Accent rail on a group-owned lane — the same green the member rail uses, so
  *  "this belongs to the group" reads the same in both places (groups doc §5). */
-const GROUP_LANE_ACCENT = "#3CE6AC";
+const GROUP_LANE_ACCENT = "var(--timeline-accent)";
 
 interface TimelineGroupRowProps {
   index: number;

package/src/player/components/TimelineLanes.test.tsx

@@ -432,6 +432,20 @@ describe("TimelineLanes selection", () => {
 });
 
 describe("TimelineLanes clip thumbnails", () => {
+  it("keeps thumbnail content inside a selected clip", () => {
+    const selected = element("clip-a", TRACK_A);
+    const view = renderLanes({
+      elements: [selected],
+      selectedElementIds: new Set([selected.id]),
+      renderClipContent: () => <div className="absolute inset-0 bg-neutral-900" data-thumbnail />,
+    });
+
+    const clip = view.host.querySelector('[data-el-id="clip-a"]');
+    expect(clip?.classList.contains("is-selected")).toBe(true);
+    expect(clip?.querySelector("[data-thumbnail]")).not.toBeNull();
+    act(() => view.root.unmount());
+  });
+
   it("asks for the same frames at rest, hovered and selected", () => {
     const rich: unknown[] = [];
     const renderClipContent = vi.fn(

package/src/player/components/TimelinePropertyLanes.test.tsx

@@ -386,7 +386,7 @@ describe("TimelinePropertyLanes", () => {
     const positionFill = laneDiamonds(host, "position")[0]?.querySelector("path:last-child");
     const visualFill = laneDiamonds(host, "visual")[0]?.querySelector("path:last-child");
     expect(positionFill?.getAttribute("fill")).toBe("#4ba3d2");
-    expect(visualFill?.getAttribute("fill")).toBe("#a3a3a3");
+    expect(visualFill?.getAttribute("fill")).toBe("var(--timeline-diamond-muted)");
     act(() => root.unmount());
   });
 

package/src/player/components/TimelineRazorInteraction.tsx

@@ -54,7 +54,7 @@ export function TimelineRazorGuideOverlay({ x }: { x: number }) {
   return (
     <div
       className="absolute top-0 bottom-0 pointer-events-none z-10"
-      style={{ left: x, width: 1, background: "rgba(239,68,68,0.7)" }}
+      style={{ left: x, width: 1, background: "var(--timeline-danger)" }}
     />
   );
 }

package/src/player/components/TimelineRuler.tsx

@@ -69,7 +69,8 @@ export const TimelineRuler = memo(function TimelineRuler({
                 y1={0}
                 x2={x}
                 y2={totalH}
-                stroke={`rgba(34, 197, 94, ${opacity.toFixed(3)})`}
+                stroke="var(--timeline-beat)"
+                strokeOpacity={opacity}
                 strokeWidth="1"
               />
             );
@@ -99,7 +100,7 @@ export const TimelineRuler = memo(function TimelineRuler({
           style={{
             height: RULER_H,
             width: trackContentWidth,
-            // Ruler background = panel surface (#0A0A0B) — no bottom border,
+            // Ruler background = the panel surface token — no bottom border,
             // no tick lines (CapCut-style clean ruler, labels only).
             background: theme.shellBackground,
           }}

package/src/player/components/TimelineShortcutHint.tsx

@@ -9,11 +9,11 @@ export function TimelineShortcutHint({ theme }: TimelineShortcutHintProps) {
     <div className="absolute bottom-2 right-3 pointer-events-none z-20">
       <div
         className="flex items-center gap-1.5 px-2 py-1 rounded-md border"
-        style={{ background: "rgba(17,23,35,0.84)", borderColor: theme.gutterBorder }}
+        style={{ background: "var(--timeline-shortcut-bg)", borderColor: theme.gutterBorder }}
       >
         <kbd
           className="text-[9px] font-mono px-1 py-0.5 rounded-sm"
-          style={{ color: theme.textSecondary, background: "rgba(255,255,255,0.06)" }}
+          style={{ color: theme.textSecondary, background: "var(--timeline-tick-minor)" }}
         >
           Shift
         </kbd>

package/src/player/components/TimelineTrackHeader.test.tsx

@@ -793,7 +793,7 @@ describe("TimelineTrackHeader", () => {
         isGroupMember: true,
       });
       expect(header()?.style.paddingLeft).toBe("14px");
-      expect(header()?.style.borderLeft).toContain("2px");
+      expect(header()?.style.borderLeft).toContain("var(--timeline-accent-rail)");
       act(() => view.root.unmount());
     });
 

package/src/player/components/TimelineTrackHeader.tsx

@@ -26,12 +26,10 @@ import { useMemo } from "react";
 
 /** Accent rail + inset marking a row as a group MEMBER, matching the level-2
  *  nesting its `aria-level` already reports. */
-const GROUP_MEMBER_RAIL = "#3CE6AC59";
+const GROUP_MEMBER_RAIL = "var(--timeline-accent-rail)";
 const GROUP_MEMBER_INDENT = 14;
-/** A hair lighter than `gutterBackground`, so a member row reads as sitting
- *  INSIDE its group rather than beside it. Overlaid rather than hard-coded so
- *  it tracks whatever the theme's gutter is. */
-const GROUP_MEMBER_TINT = "rgba(255,255,255,0.035)";
+/** A neutral wash keeps group membership visible without changing the row's hue. */
+const GROUP_MEMBER_TINT = "var(--timeline-group-member-tint)";
 
 /** The gutter fill for a row, tinted when it belongs to a group. */
 export function gutterFill(base: string, isGroupMember: boolean): string {
@@ -288,7 +286,7 @@ export function TimelineTrackHeader({
           <div
             className={
               showTrackLabel
-                ? "flex flex-col justify-center gap-0.5 px-1.5 text-white/55"
+                ? "flex flex-col justify-center gap-0.5 px-1.5 text-[var(--timeline-handle)]"
                 : "flex flex-col items-center justify-center gap-0.5"
             }
             style={{ height: TRACK_H }}

package/src/player/components/TimelineTrackPlainHeader.tsx

@@ -39,8 +39,10 @@ export function VisibilityButton({
       type="button"
       aria-label={label}
       title={label}
-      className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 transition-colors focus-visible:outline-solid focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-[#3CE6AC] ${
-        hidden ? "text-[#3CE6AC] hover:text-white" : "text-white/35 hover:text-white/75"
+      className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 transition-colors focus-visible:outline-solid focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-[var(--timeline-accent)] ${
+        hidden
+          ? "text-[var(--timeline-accent)] hover:text-[var(--timeline-text-solid)]"
+          : "text-[var(--timeline-text-faint)] hover:text-[var(--timeline-text-soft)]"
       }`}
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => {
@@ -89,7 +91,12 @@ export function PlainTrackHeader({
           and the name gives way instead. */}
       <div className="flex min-w-0 items-center gap-1">
         {isAudioTrack && (
-          <Music size={12} weight="fill" aria-hidden="true" className="text-white/35" />
+          <Music
+            size={12}
+            weight="fill"
+            aria-hidden="true"
+            className="text-[var(--timeline-text-faint)]"
+          />
         )}
         {/* No `flex-1`: the name takes only the width it needs, so the clip
             count sits against it rather than being pushed out to meet the