@hyperframes/studio 0.8.104 → 0.8.106

package/src/styles/components.css

@@ -253,6 +253,32 @@
   border-radius: var(--timeline-clip-audio-radius);
 }
 
+.timeline-fade-tab {
+  position: absolute;
+  border-radius: 2px;
+  background: var(--timeline-fade-dot);
+  box-shadow:
+    0 0 0 1px var(--timeline-fade-dot-ring),
+    0 1px 3px var(--timeline-fade-dot-ring);
+  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.timeline-fade-handle:hover .timeline-fade-tab,
+.timeline-fade-handle[data-dragging] .timeline-fade-tab {
+  transform: scaleY(1.2);
+}
+
+.timeline-fade-handle:focus-visible .timeline-fade-tab {
+  outline: 2px solid var(--timeline-accent);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .timeline-fade-tab {
+    transition: none;
+  }
+}
+
 .timeline-clip.is-audio.is-hovered {
   background-color: var(--timeline-clip-audio-bg-hover);
 }

package/src/styles/hex-baseline.json

@@ -1,41 +1,32 @@
 {
-  "total": 297,
+  "total": 226,
   "files": {
     "packages/studio/src/captions/components/CaptionOverlay.tsx": 5,
     "packages/studio/src/captions/components/CaptionTimeline.tsx": 11,
     "packages/studio/src/captions/generator.ts": 1,
     "packages/studio/src/captions/parser.ts": 1,
     "packages/studio/src/captions/types.ts": 4,
-    "packages/studio/src/components/StudioToast.tsx": 10,
-    "packages/studio/src/components/TimelineToolbar.tsx": 2,
+    "packages/studio/src/components/TimelineToolbar.tsx": 1,
     "packages/studio/src/components/editor/ArcPathControls.tsx": 1,
-    "packages/studio/src/components/editor/BorderRadiusEditor.tsx": 10,
+    "packages/studio/src/components/editor/BorderRadiusEditor.tsx": 2,
     "packages/studio/src/components/editor/DomEditCropHandles.tsx": 1,
-    "packages/studio/src/components/editor/EaseCurveSection.tsx": 2,
-    "packages/studio/src/components/editor/FileTree.tsx": 2,
-    "packages/studio/src/components/editor/FileTreeIcons.tsx": 17,
-    "packages/studio/src/components/editor/FileTreeNodes.tsx": 4,
+    "packages/studio/src/components/editor/FileTreeIcons.tsx": 7,
     "packages/studio/src/components/editor/GestureTrailOverlay.tsx": 1,
     "packages/studio/src/components/editor/GridOverlay.tsx": 4,
-    "packages/studio/src/components/editor/InlineTextToolbar.tsx": 2,
-    "packages/studio/src/components/editor/KeyframeDiamond.tsx": 2,
-    "packages/studio/src/components/editor/KeyframeNavigation.tsx": 2,
+    "packages/studio/src/components/editor/InlineTextToolbar.tsx": 1,
     "packages/studio/src/components/editor/MotionPathNode.tsx": 5,
     "packages/studio/src/components/editor/SnapGuideOverlay.tsx": 3,
-    "packages/studio/src/components/editor/TimelineFxPopover.tsx": 1,
-    "packages/studio/src/components/editor/Transform3DCube.tsx": 6,
+    "packages/studio/src/components/editor/Transform3DCube.tsx": 5,
     "packages/studio/src/components/editor/colorValue.ts": 3,
     "packages/studio/src/components/editor/domEditingElement.ts": 1,
-    "packages/studio/src/components/editor/easeCurveSvg.tsx": 2,
     "packages/studio/src/components/editor/gradientValue.ts": 6,
     "packages/studio/src/components/editor/panelTokens.ts": 4,
     "packages/studio/src/components/editor/propertyPanelColor.tsx": 7,
-    "packages/studio/src/components/editor/propertyPanelColorCurveGraph.tsx": 17,
+    "packages/studio/src/components/editor/propertyPanelColorCurveGraph.tsx": 16,
     "packages/studio/src/components/editor/propertyPanelColorScopes.tsx": 8,
     "packages/studio/src/components/editor/propertyPanelColorWheels.tsx": 8,
     "packages/studio/src/components/editor/propertyPanelFlatEffectsSection.tsx": 5,
     "packages/studio/src/components/editor/propertyPanelFlatStyleSections.tsx": 2,
-    "packages/studio/src/components/editor/propertyPanelFxCarveModule.tsx": 1,
     "packages/studio/src/components/editor/propertyPanelFxFamily.ts": 1,
     "packages/studio/src/components/editor/propertyPanelFxPresetStyle.ts": 24,
     "packages/studio/src/components/editor/propertyPanelHelpers.ts": 4,
@@ -43,7 +34,6 @@
     "packages/studio/src/components/editor/propertyPanelSections.tsx": 1,
     "packages/studio/src/components/editor/propertyPanelStyleSections.tsx": 3,
     "packages/studio/src/components/editor/transform3dProjection.ts": 3,
-    "packages/studio/src/components/feedback/StudioFeedbackCard.tsx": 10,
     "packages/studio/src/components/panels/VariablesBindElement.tsx": 2,
     "packages/studio/src/components/panels/VariablesValueControls.tsx": 2,
     "packages/studio/src/components/sidebar/AudioRow.tsx": 2,
@@ -54,9 +44,7 @@
     "packages/studio/src/player/components/CompositionThumbnail.tsx": 2,
     "packages/studio/src/player/components/Player.tsx": 2,
     "packages/studio/src/player/components/PlayerControls.tsx": 1,
-    "packages/studio/src/player/components/ShortcutsPanel.tsx": 7,
     "packages/studio/src/player/components/SpeedMenu.tsx": 2,
-    "packages/studio/src/player/components/trackHeaderLabelRows.tsx": 6,
     "packages/studio/src/styles/components.css": 48,
     "packages/studio/src/telemetry/client.ts": 1,
     "packages/studio/src/webmcp/webmcpTestUtils.ts": 1

package/src/styles/studio.css

@@ -16,13 +16,10 @@
   }
 }
 
-/*
- * Studio is a dark-only UI — pin the user-agent color scheme to dark so that
- * browser-native chrome (scrollbars, form controls, focus rings) picks the
- * matching palette instead of defaulting to light against our #0a0a0a body.
- */
-:root {
-  color-scheme: dark;
+[data-theme-reveal]::view-transition-old(root),
+[data-theme-reveal]::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
 }
 
 body {

package/src/styles/tailwind-preset.shared.js

@@ -1,6 +1,7 @@
 /** @deprecated Superseded by `src/styles/theme.css` (published as
  * `@hyperframes/studio/theme.css`); kept one more major for Tailwind v3
- * consumers. Values are byte-identical; theme.test.ts fails if they drift. */
+ * consumers, frozen at the colours before Graphite (theme.css is light-dark() and colour-mix
+ * now, which v3 cannot read). */
 const studioPreset = {
   theme: {
     extend: {

package/src/styles/theme.css

@@ -5,72 +5,120 @@
 @theme static {
   /* ---------------------------------------------------------------- colour */
 
-  /* Background levels, darkest (app shell) to lightest (inset panel body). */
-  --color-bg-0: #0a0a0a;
-  --color-bg-1: #0c0c0e;
-  --color-bg-2: #121214;
-
-  /* Raised surfaces. */
-  --color-surface: #18181b;
-  --color-surface-alt: #141414;
-  --color-input: #161618;
-  --color-hover: #27272a;
-
-  /* Separators, weakest to strongest. */
-  --color-hairline: #1a1a1c;
-  --color-border: #1e1e1e;
-  --color-border-input: #27272a;
-  --color-border-strong: #262626;
-
-  /* Text, brightest (0) to dimmest (5). */
-  --color-text-0: #fafafa;
-  --color-text-1: #e4e4e7;
-  --color-text-2: #a1a1aa;
-  --color-text-3: #71717a;
-  --color-text-4: #52525b;
-  --color-text-5: #3f3f46;
-  --color-text-body: #e5e5e5;
-  --color-text-muted: #737373;
+  /* Graphite. Each colour is `light-dark(light, dark)`, resolved where it is painted, so the
+   * colour-scheme decides: Studio is dark, `data-theme="paper"` makes it light, and the player
+   * keeps a dark scheme in both. Text clears 4.5:1 and icons 3:1 on every surface below. */
+
+  /* Surfaces: the app shell first, menus and popovers last. */
+  --color-bg-0: light-dark(oklch(0.955 0.005 70), oklch(0.235 0.007 70));
+  --color-bg-1: var(--color-bg-0);
+  --color-bg-2: var(--color-surface);
+  --color-input: light-dark(oklch(1 0 70), oklch(0.25 0.007 70));
+  --color-surface: light-dark(oklch(0.987 0.005 70), oklch(0.265 0.007 70));
+  --color-surface-alt: var(--color-surface);
+  /* Menus, popovers and tooltips. */
+  --color-raised: light-dark(oklch(1 0 70), oklch(0.295 0.007 70));
+
+  /* States, washes of the brightest text so they work on any surface. `on` is a toggle that is on. */
+  --color-hover: light-dark(
+    color-mix(in oklab, var(--color-text-0) 5.5%, transparent),
+    color-mix(in oklab, var(--color-text-0) 7.5%, transparent)
+  );
+  --color-press: light-dark(
+    color-mix(in oklab, var(--color-text-0) 9.5%, transparent),
+    color-mix(in oklab, var(--color-text-0) 13%, transparent)
+  );
+  --color-on: light-dark(
+    color-mix(in oklab, var(--color-accent) 13%, transparent),
+    color-mix(in oklab, var(--color-accent) 16%, transparent)
+  );
+  --color-on-hover: light-dark(
+    color-mix(in oklab, var(--color-accent) 22%, transparent),
+    color-mix(in oklab, var(--color-accent) 27%, transparent)
+  );
+
+  /* Separators. */
+  --color-border: light-dark(
+    color-mix(in oklab, var(--color-text-0) 8%, transparent),
+    color-mix(in oklab, var(--color-text-0) 7.5%, transparent)
+  );
+  --color-hairline: var(--color-border);
+  --color-border-strong: light-dark(
+    color-mix(in oklab, var(--color-text-0) 15%, transparent),
+    color-mix(in oklab, var(--color-text-0) 14%, transparent)
+  );
+  --color-border-input: var(--color-border-strong);
+
+  /* Text: primary, secondary, muted (4.5:1), and off (3:1, disabled controls only). */
+  --color-text-0: light-dark(oklch(0.205 0.003 70), oklch(0.965 0.004 70));
+  --color-text-1: var(--color-text-0);
+  --color-text-body: var(--color-text-0);
+  --color-text-2: light-dark(oklch(0.403 0.003 70), oklch(0.908 0.004 70));
+  --color-text-3: var(--color-text-2);
+  --color-text-muted: light-dark(oklch(0.503 0.003 70), oklch(0.777 0.004 70));
+  --color-text-4: var(--color-text-muted);
+  --color-text-5: var(--color-text-muted);
+  --color-text-off: light-dark(oklch(0.597 0.003 70), oklch(0.67 0.004 70));
 
   /* Roles. Selection and playhead are reserved and differ from the accent so a
-   * selected clip, the playhead and an accented control stay tellable apart. */
-  --color-accent: #3ce6ac;
-  --color-selection: #4ba3d2;
-  --color-playhead: #ffffff;
-  --color-danger: #ef4444;
-  --color-media: #00e3ff;
-  --color-container: #f5a623;
+   * selected clip, the playhead and an accented control stay tellable apart.
+   * `accent-ink` is accent text on a surface; `on-accent` is text on an accent fill. */
+  --color-accent: light-dark(oklch(0.536 0.114 164), oklch(0.82 0.159 164));
+  --color-accent-hover: light-dark(oklch(0.486 0.103 164), oklch(0.87 0.159 164));
+  --color-on-accent: light-dark(oklch(1 0 0), oklch(0.2 0.043 164));
+  --color-accent-ink: light-dark(oklch(0.45 0.096 164), oklch(0.827 0.159 164));
+  --color-ring: var(--color-accent-ink);
+  --color-selection: light-dark(oklch(0.5 0.13 240), #4ba3d2);
+  --color-playhead: var(--color-text-0);
+  --color-danger: oklch(0.56 0.19 25);
+  --color-danger-ink: light-dark(oklch(0.45 0.17 25), oklch(0.791 0.12 25));
+  --color-warning-ink: light-dark(oklch(0.5 0.12 70), oklch(82.8% 0.189 84.429));
+  --color-on-danger: oklch(1 0 0);
+  --color-media: light-dark(oklch(0.5 0.1 215), #00e3ff);
+  --color-container: light-dark(oklch(0.55 0.13 70), #f5a623);
+
+  /* Code editor syntax: One Light and One Dark hues, held at 4.5:1 on a line, the active line and a selection on it. */
+  --color-code-keyword: light-dark(oklch(0.509 0.211 329), oklch(0.829 0.164 318));
+  --color-code-name: light-dark(oklch(0.504 0.179 28), oklch(0.856 0.145 17));
+  --color-code-function: light-dark(oklch(0.492 0.193 263), oklch(0.805 0.121 245));
+  --color-code-constant: light-dark(oklch(0.495 0.13 50), oklch(0.815 0.11 50));
+  --color-code-type: light-dark(oklch(0.48 0.12 92), oklch(0.805 0.1 92));
+  --color-code-operator: light-dark(oklch(0.471 0.127 237), oklch(0.793 0.092 206));
+  --color-code-comment: light-dark(oklch(0.48 0.009 279), oklch(0.806 0.03 262));
+  --color-code-string: light-dark(oklch(0.468 0.142 143), oklch(0.793 0.11 133));
 
   /* The two stops of the HeyGen brand gradient, worn by the header logo. Fixed brand values
    * rather than roles, so they are not reachable as a background or text colour by mistake. */
   --color-brand-gradient-from: #06e3fa;
   --color-brand-gradient-to: #4fdb5e;
 
-  /* The timeline's own surfaces: darker and bluer than the shared scale, so they
-   * get their own names instead of snapping to the nearest --color-bg/-surface
-   * step (a host themes the timeline by overriding these). */
-  --timeline-shell-bg: #0a0a0b;
-  --timeline-shell-border: rgba(255, 255, 255, 0.05);
-  --timeline-ruler-border: rgba(255, 255, 255, 0.16);
-  --timeline-row-bg: #101014;
-  --timeline-row-border: rgba(255, 255, 255, 0.06);
-  --timeline-gutter-bg: #0e0f12;
-  --timeline-gutter-border: rgba(255, 255, 255, 0.1);
-  --timeline-text-primary: rgba(255, 255, 255, 0.92);
-  --timeline-text-secondary: rgba(255, 255, 255, 0.62);
-  --timeline-tick-text: rgba(255, 255, 255, 0.34);
-  --timeline-tick-major: rgba(255, 255, 255, 0.1);
-  --timeline-tick-minor: rgba(255, 255, 255, 0.06);
-  --timeline-clip-bg: rgba(255, 255, 255, 0.12);
-  --timeline-clip-label-active: rgba(232, 255, 247, 0.95);
+  /* The timeline's own surfaces and inks, named so a host can theme the timeline alone. */
+  --timeline-shell-bg: var(--color-surface);
+  --timeline-shell-border: var(--color-border);
+  --timeline-ruler-border: color-mix(in oklab, var(--color-text-0) 16%, transparent);
+  --timeline-row-bg: light-dark(oklch(0.997 0.002 70), oklch(0.275 0.007 70));
+  --timeline-row-border: color-mix(in oklab, var(--color-text-0) 6%, transparent);
+  --timeline-gutter-bg: light-dark(oklch(0.967 0.005 70), oklch(0.253 0.007 70));
+  --timeline-gutter-border: color-mix(in oklab, var(--color-text-0) 10%, transparent);
+  --timeline-text-primary: var(--color-text-0);
+  --timeline-text-secondary: var(--color-text-2);
+  --timeline-tick-text: var(--color-text-2);
+  --timeline-tick-major: color-mix(in oklab, var(--color-text-0) 10%, transparent);
+  --timeline-tick-minor: color-mix(in oklab, var(--color-text-0) 6%, transparent);
+  --timeline-clip-bg: light-dark(
+    color-mix(in oklab, var(--color-text-0) 12%, transparent),
+    color-mix(in oklab, var(--color-text-0) 13%, transparent)
+  );
+  --timeline-clip-label-active: light-dark(#0b3d2c, rgba(232, 255, 247, 0.95));
   --timeline-clip-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
-  --timeline-clip-audio-bg: rgba(167, 139, 250, 0.16);
-  --timeline-clip-audio-border: rgba(167, 139, 250, 0.4);
-  --timeline-clip-audio-bg-hover: rgba(167, 139, 250, 0.24);
-  --timeline-clip-audio-bg-dragging: rgba(60, 52, 84, 0.96);
+  /* Audio clips are a solid fill that carries white ink in both themes. */
+  --timeline-clip-audio-bg: oklch(0.45 0.12 300);
+  --timeline-clip-audio-border: oklch(0.37 0.12 300);
+  --timeline-clip-audio-bg-hover: oklch(0.49 0.12 300);
+  --timeline-clip-audio-bg-dragging: oklch(0.42 0.12 300 / 0.96);
   --timeline-clip-audio-muted-bg: rgb(72, 74, 78);
-  --timeline-audio-link: #a0aaa4;
-  --timeline-clip-selection: rgba(255, 255, 255, 0.85);
+  --timeline-audio-link: light-dark(#626d66, #a0aaa4);
+  --timeline-clip-selection: light-dark(#0f766e, rgba(255, 255, 255, 0.85));
   --timeline-clip-selection-highlight: rgb(255 255 255 / 0.55);
   --timeline-clip-radius: 8px;
   --timeline-clip-audio-radius: 21px;
@@ -79,7 +127,7 @@
   --timeline-clip-chip-bg: rgba(15, 22, 18, 0.73);
   --timeline-clip-chip-audio-bg: rgba(25, 16, 38, 0.7);
   --timeline-clip-chip-text: #ffffff;
-  --timeline-shortcut-bg: rgba(17, 23, 35, 0.84);
+  --timeline-shortcut-bg: color-mix(in oklab, var(--color-raised) 94%, transparent);
   /* Composition and text clips draw their frame as it is, like video filmstrips; a host may dim them. */
   --timeline-composition-thumbnail-opacity: 1;
   --timeline-composition-thumbnail-blend: normal;
@@ -105,58 +153,82 @@
     transparent 2px 5px
   );
   --timeline-waveform-label-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
-  --timeline-clip-bg-active: rgba(60, 230, 172, 0.2);
-  --timeline-clip-bg-hover: rgba(255, 255, 255, 0.16);
-  --timeline-clip-bg-dragging: rgba(38, 42, 52, 0.96);
-  --timeline-clip-border: rgba(255, 255, 255, 0.22);
-  --timeline-clip-border-hover: rgba(60, 230, 172, 0.75);
-  --timeline-clip-border-active: rgba(60, 230, 172, 0.55);
-  --timeline-handle: rgba(255, 255, 255, 0.55);
+  --timeline-clip-bg-active: color-mix(in oklab, var(--color-accent) 20%, transparent);
+  --timeline-clip-bg-hover: light-dark(
+    color-mix(in oklab, var(--color-text-0) 26%, transparent),
+    color-mix(in oklab, var(--color-text-0) 16%, transparent)
+  );
+  --timeline-clip-bg-dragging: color-mix(in oklab, var(--color-raised) 96%, transparent);
+  --timeline-clip-border: light-dark(
+    color-mix(in oklab, var(--color-text-0) 40%, transparent),
+    color-mix(in oklab, var(--color-text-0) 30%, transparent)
+  );
+  --timeline-clip-border-hover: color-mix(in oklab, var(--color-accent) 75%, transparent);
+  --timeline-clip-border-active: light-dark(
+    color-mix(in oklab, var(--color-accent) 90%, transparent),
+    color-mix(in oklab, var(--color-accent) 55%, transparent)
+  );
+  --timeline-handle: var(--color-text-0);
   /* Audio clip fades: the shaded wedge over the faded gain, and the corner dots. */
   --timeline-fade-shade: rgba(0, 0, 0, 0.38);
   --timeline-fade-dot: #fff;
   --timeline-fade-dot-ring: rgba(0, 0, 0, 0.55);
-  --timeline-resize-seam: rgba(255, 255, 255, 0.12);
-  --timeline-resize-active: rgba(255, 255, 255, 0.24);
-  --timeline-track-clip-fill: rgba(255, 255, 255, 0.055);
-  --timeline-track-clip-active: rgba(60, 230, 172, 0.16);
-  --timeline-track-label: rgba(255, 255, 255, 0.5);
-  --timeline-border-strong: rgba(255, 255, 255, 0.2);
-  --timeline-group-member-tint: rgba(255, 255, 255, 0.035);
-  --timeline-overlay-text: rgba(255, 255, 255, 0.8);
-  --timeline-accent: #3ce6ac;
-  --timeline-accent-soft: rgba(60, 230, 172, 0.18);
-  --timeline-accent-faint: rgba(60, 230, 172, 0.055);
-  --timeline-accent-fill: rgba(60, 230, 172, 0.1);
-  --timeline-accent-glow: rgba(60, 230, 172, 0.5);
-  --timeline-accent-border: rgba(60, 230, 172, 0.7);
-  --timeline-accent-rail: rgba(60, 230, 172, 0.35);
-  --timeline-accent-hover: rgba(60, 230, 172, 0.25);
-  --timeline-accent-button-bg: rgba(60, 230, 172, 0.15);
-  --timeline-danger: rgba(239, 68, 68, 0.7);
+  --timeline-resize-seam: color-mix(in oklab, var(--color-text-0) 12%, transparent);
+  --timeline-resize-active: color-mix(in oklab, var(--color-text-0) 24%, transparent);
+  --timeline-track-clip-fill: color-mix(in oklab, var(--color-text-0) 8%, transparent);
+  --timeline-track-clip-active: color-mix(in oklab, var(--color-accent) 20%, transparent);
+  --timeline-track-label: var(--color-text-muted);
+  --timeline-border-strong: color-mix(in oklab, var(--color-text-0) 20%, transparent);
+  --timeline-group-member-tint: color-mix(in oklab, var(--color-text-0) 3.5%, transparent);
+  --timeline-overlay-text: var(--color-text-2);
+  --timeline-accent: var(--color-accent);
+  --timeline-accent-soft: color-mix(in oklab, var(--color-accent) 18%, transparent);
+  --timeline-accent-faint: color-mix(in oklab, var(--color-accent) 5.5%, transparent);
+  --timeline-accent-fill: color-mix(in oklab, var(--color-accent) 10%, transparent);
+  --timeline-accent-glow: color-mix(in oklab, var(--color-accent) 50%, transparent);
+  --timeline-accent-border: color-mix(in oklab, var(--color-accent) 70%, transparent);
+  --timeline-accent-rail: color-mix(in oklab, var(--color-accent) 35%, transparent);
+  --timeline-accent-hover: var(--color-on-hover);
+  --timeline-accent-button-bg: var(--color-on);
+  --timeline-danger: color-mix(in oklab, var(--color-danger) 70%, transparent);
   --timeline-info-bg: rgba(59, 130, 246, 0.12);
   --timeline-info-border: rgba(59, 130, 246, 0.4);
-  --timeline-dialog-bg: #1b1b1f;
-  --timeline-diamond-bg: #171717;
-  --timeline-diamond-border: rgba(255, 255, 255, 0.14);
-  --timeline-text-solid: #ffffff;
-  --timeline-text-faint: rgba(255, 255, 255, 0.35);
-  --timeline-text-dim: rgba(255, 255, 255, 0.4);
-  --timeline-text-soft: rgba(255, 255, 255, 0.75);
-  --timeline-text-bright: rgba(255, 255, 255, 0.7);
-  --timeline-snap-guide: rgba(255, 255, 255, 0.6);
-  --timeline-overlay-bg: rgba(0, 0, 0, 0.8);
-  --timeline-overlay-bg-strong: rgba(0, 0, 0, 0.85);
-  --timeline-input-bg: rgba(0, 0, 0, 0.3);
-  --timeline-automation-rail: rgba(255, 255, 255, 0.08);
-  --timeline-automation-point-muted: rgba(0, 0, 0, 0.5);
-  --timeline-diamond-muted: #a3a3a3;
+  --timeline-dialog-bg: var(--color-raised);
+  --timeline-diamond-bg: var(--color-raised);
+  --timeline-diamond-border: color-mix(in oklab, var(--color-text-0) 14%, transparent);
+  --timeline-text-solid: var(--color-text-0);
+  --timeline-text-faint: var(--color-text-off);
+  --timeline-text-dim: var(--color-text-muted);
+  --timeline-text-soft: var(--color-text-2);
+  --timeline-text-bright: var(--color-text-2);
+  --timeline-snap-guide: color-mix(in oklab, var(--color-text-0) 60%, transparent);
+  --timeline-overlay-bg: light-dark(oklch(1 0 70 / 0.9), rgba(0, 0, 0, 0.8));
+  --timeline-overlay-bg-strong: light-dark(oklch(1 0 70 / 0.95), rgba(0, 0, 0, 0.85));
+  --timeline-input-bg: light-dark(
+    color-mix(in oklab, var(--color-text-0) 5%, transparent),
+    rgba(0, 0, 0, 0.3)
+  );
+  --timeline-automation-rail: color-mix(in oklab, var(--color-text-0) 8%, transparent);
+  --timeline-automation-point-muted: light-dark(
+    color-mix(in oklab, var(--color-text-0) 30%, transparent),
+    rgba(0, 0, 0, 0.5)
+  );
+  --timeline-diamond-muted: var(--color-text-muted);
   --timeline-beat: rgb(34, 197, 94);
-  --timeline-clip-shadow-dragging: rgba(0, 0, 0, 0.4);
-  --timeline-playhead-glow: rgba(60, 230, 172, 0.14);
-  --timeline-playhead-shadow: rgba(0, 0, 0, 0.55);
-  --timeline-transition-zone: rgba(255, 255, 255, 0.2);
-  --timeline-transition-badge: rgba(237, 244, 239, 0.98);
+  --timeline-clip-shadow-dragging: light-dark(
+    color-mix(in oklab, var(--color-text-0) 16%, transparent),
+    rgba(0, 0, 0, 0.4)
+  );
+  --timeline-playhead-glow: color-mix(in oklab, var(--color-accent) 14%, transparent);
+  --timeline-playhead-shadow: light-dark(
+    color-mix(in oklab, var(--color-text-0) 20%, transparent),
+    rgba(0, 0, 0, 0.55)
+  );
+  --timeline-transition-zone: light-dark(
+    color-mix(in oklab, var(--color-text-0) 12%, transparent),
+    color-mix(in oklab, var(--color-text-0) 20%, transparent)
+  );
+  --timeline-transition-badge: light-dark(#ffffff, rgba(237, 244, 239, 0.98));
   --timeline-transition-badge-ink: rgba(36, 56, 45, 0.96);
 
   /* -------------------------------------------------------------- geometry */
@@ -197,14 +269,16 @@
 
   /* ---------------------------------------------------------------- shadow */
 
-  /* Floating chrome over a near-black canvas: the hairline ring does the edge
-   * definition that a light-mode drop shadow cannot. */
-  --shadow-menu: 0 8px 24px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.4);
-  --shadow-popover: 0 16px 40px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.45);
+  /* Floating chrome: a drop shadow plus a hairline ring that defines the edge. */
+  --shadow-menu:
+    0 8px 24px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.45)),
+    0 0 0 1px light-dark(rgb(0 0 0 / 0.07), rgb(0 0 0 / 0.4));
+  --shadow-popover:
+    0 16px 40px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.55)),
+    0 0 0 1px light-dark(rgb(0 0 0 / 0.07), rgb(0 0 0 / 0.45));
 
-  /* The primary button is the one light surface in a dark UI, so it reads as a
-   * raised key rather than a floating panel: a tight contact shadow, a soft
-   * ambient one, and an inner top highlight. */
+  /* The primary button reads as a raised key rather than a floating panel: a tight
+   * contact shadow, a soft ambient one, and an inner top highlight. */
   --shadow-btn-primary:
     0 1px 2px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.65);
 
@@ -277,9 +351,9 @@
    * strip sits below the card body and the shown tab is a fill in the body colour. */
   --panel-shell-bg: var(--color-bg-1);
   --panel-card-bg: var(--color-surface);
-  --panel-card-border: #303034;
+  --panel-card-border: var(--color-border-strong);
   --panel-strip-bg: var(--color-bg-0);
-  --panel-tab-bg-hover: #202023;
+  --panel-tab-bg-hover: var(--color-hover);
 
   /* Names Studio's markup invented that no config ever defined, so the classes
    * compiled to nothing. Aliased to the token that was meant, rather than
@@ -291,9 +365,9 @@
 
   /* ------------------------------------------- deprecated: Tailwind palette */
 
-  /* Verbatim Tailwind 4.3.3 defaults for stock colours markup still names, so
-   * `--color-*: initial` does not blank them. U12 deletes this block;
-   * `theme.test.ts` fails if a value drifts from upstream. */
+  /* Stock colours markup still names, so `--color-*: initial` does not blank them. U12 deletes
+   * this block. The neutral scale is Graphite's roles by the job each step does in markup (light
+   * steps text, dark steps surfaces and lines); the rest are verbatim Tailwind 4.3.3 defaults. */
   --color-amber-50: oklch(98.7% 0.022 95.277);
   --color-amber-100: oklch(96.2% 0.059 95.617);
   --color-amber-200: oklch(92.4% 0.12 95.746);
@@ -315,17 +389,17 @@
   --color-green-400: oklch(79.2% 0.209 151.711);
   --color-green-500: oklch(72.3% 0.219 149.579);
   --color-green-600: oklch(62.7% 0.194 149.214);
-  --color-neutral-50: oklch(98.5% 0 none);
-  --color-neutral-100: oklch(97% 0 none);
-  --color-neutral-200: oklch(92.2% 0 none);
-  --color-neutral-300: oklch(87% 0 none);
-  --color-neutral-400: oklch(70.8% 0 none);
-  --color-neutral-500: oklch(55.6% 0 none);
-  --color-neutral-600: oklch(43.9% 0 none);
-  --color-neutral-700: oklch(37.1% 0 none);
-  --color-neutral-800: oklch(26.9% 0 none);
-  --color-neutral-900: oklch(20.5% 0 none);
-  --color-neutral-950: oklch(14.5% 0 none);
+  --color-neutral-50: var(--color-text-0);
+  --color-neutral-100: var(--color-text-0);
+  --color-neutral-200: var(--color-text-0);
+  --color-neutral-300: var(--color-text-2);
+  --color-neutral-400: var(--color-text-2);
+  --color-neutral-500: var(--color-text-muted);
+  --color-neutral-600: var(--color-text-muted);
+  --color-neutral-700: var(--color-border-strong);
+  --color-neutral-800: var(--color-border);
+  --color-neutral-900: var(--color-surface);
+  --color-neutral-950: var(--color-bg-0);
   --color-orange-300: oklch(83.7% 0.128 66.29);
   --color-orange-400: oklch(75% 0.183 55.934);
   --color-pink-400: oklch(71.8% 0.202 349.761);
@@ -359,31 +433,24 @@
   --color-white: #fff;
 }
 
-/* One paper block. A host sets data-theme="paper" on the document element. */
+/* The colour-scheme picks each token's light or dark half: dark unless the document element
+ * has data-theme="paper". Base layer, so a host's own colour-scheme wins. */
+@layer base {
+  :root {
+    color-scheme: dark;
+  }
+  :root:where([data-theme="paper"]) {
+    color-scheme: light;
+  }
+}
 :root[data-theme="paper"] {
-  --timeline-shell-bg: #f4f6f3;
-  --timeline-row-bg: #edf0ed;
-  --timeline-clip-bg: #c9d1cb;
+  --timeline-clip-label-shadow: none;
   --timeline-clip-shadow: 0 2px 6px rgb(0 0 0 / 0.12);
-  --timeline-clip-highlight: rgb(255 255 255 / 0.08);
-  --timeline-clip-selection: #0f766e;
-  --timeline-clip-selection-highlight: rgb(255 255 255 / 0.55);
-  --timeline-clip-chip-bg: rgba(15, 22, 18, 0.73);
-  --timeline-clip-chip-audio-bg: rgba(25, 16, 38, 0.7);
-  --timeline-clip-chip-text: #ffffff;
-  --timeline-clip-audio-bg: rgb(150, 128, 180);
-  --timeline-clip-audio-bg-hover: rgb(135, 109, 170);
-  --timeline-clip-audio-bg-dragging: rgb(232, 224, 242);
-  --timeline-clip-audio-border: rgba(113, 80, 155, 0.45);
-  --timeline-clip-audio-muted-bg: rgb(156, 161, 157);
-  --timeline-audio-link: #626d66;
-  --timeline-waveform-bar-rgb: 20, 12, 32;
-  --timeline-waveform-muted-rgb: 24, 28, 26;
-  --timeline-waveform-baseline-rgb: 76, 62, 88;
-  --timeline-waveform-error: repeating-linear-gradient(
+  --timeline-thumbnail-shimmer: linear-gradient(
     90deg,
-    rgba(20, 12, 32, 0.35) 0 2px,
-    transparent 2px 5px
+    rgba(24, 24, 27, 0.02) 0%,
+    rgba(24, 24, 27, 0.05) 50%,
+    rgba(24, 24, 27, 0.02) 100%
   );
 }
 

package/src/styles/theme.test.ts

@@ -2,7 +2,7 @@
 
 /** Guards the ways `theme.css` can silently break: a dropped CSS custom
  * property, a utility that stops compiling, the stock Tailwind palette
- * leaking back in, or the JS preset / legacy colours drifting from it. */
+ * leaking back in, or the legacy colours drifting from it. */
 
 import { readFileSync } from "node:fs";
 import path from "node:path";
@@ -11,7 +11,6 @@ import { createRoot } from "react-dom/client";
 import { Gear, IconContext } from "@phosphor-icons/react";
 import { compile } from "tailwindcss";
 import { afterEach, describe, expect, it } from "vitest";
-import studioPreset from "./tailwind-preset.shared.js";
 import { readIconTokens } from "./iconTokens";
 import { loadStylesheet, STYLES_DIR, TAILWIND_DIR } from "./styleSources";
 
@@ -52,7 +51,9 @@ describe("studio theme", () => {
   it("emits the semantic palette as custom properties and as utilities", async () => {
     const css = await build("studio.css", ["bg-accent", "text-text-2", "border-border"]);
 
-    expect(rootVariables(css).get("--color-accent")).toBe("#3ce6ac");
+    expect(rootVariables(css).get("--color-accent")).toBe(
+      "light-dark(oklch(0.536 0.114 164), oklch(0.82 0.159 164))",
+    );
     expect(css).toContain(".bg-accent {");
     expect(css).toContain("background-color: var(--color-accent)");
   });
@@ -127,7 +128,7 @@ describe("studio theme", () => {
     expect(css).toContain(".duration-open {");
   });
 
-  it("keeps every legacy Tailwind palette entry at its upstream default value", async () => {
+  it("keeps every legacy Tailwind palette entry that is not a role at its upstream value", async () => {
     // These are copies of Tailwind's own values, kept only so existing markup
     // renders unchanged. A Tailwind upgrade that moves one of them would
     // otherwise silently change Studio's colors.
@@ -138,7 +139,9 @@ describe("studio theme", () => {
         ),
       ].map(([, name, value]) => [name, value.trim()]),
     );
-    const legacy = [...themeSource.matchAll(/\n\s*(--color-[a-z]+-(?:50|\d00|950)):\s*([^;]+);/g)];
+    const legacy = [
+      ...themeSource.matchAll(/\n\s*(--color-[a-z]+-(?:50|\d00|950)):\s*([^;]+);/g),
+    ].filter(([, , value]) => !value.trim().startsWith("var("));
 
     expect(legacy.length).toBeGreaterThan(0);
     for (const [, name, value] of legacy) {
@@ -147,11 +150,12 @@ describe("studio theme", () => {
     }
   });
 
-  it("keeps the deprecated JS preset in step with the CSS it shadows", () => {
-    const colors = studioPreset.theme.extend.colors;
+  it("maps every neutral step onto a Graphite role, so the stock scale follows the theme", () => {
+    const steps = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 
-    expect(colors.studio.accent.toLowerCase()).toBe(declaredValue("--color-accent"));
-    expect(colors.panel.surface.toLowerCase()).toBe(declaredValue("--color-surface"));
+    for (const step of steps) {
+      expect(declaredValue(`--color-neutral-${step}`)).toMatch(/^var\(--color-[a-z0-9-]+\)$/);
+    }
   });
 
   it("reads the icon defaults off the theme rather than hard-coding them", () => {