@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/shotTokens.css

@@ -1,4 +1,5 @@
-/* The shot lane's palette, and the ONE place it is defined.
+/* The shot lane's palette: its SIGNAL vocabulary and the concrete values Three
+ * reads, the ONE place they are defined.
  *
  * ── WHY THIS FILE EXISTS ────────────────────────────────────────────────
  *
@@ -10,61 +11,36 @@
  * reading a token nobody had overridden for them.
  *
  * So the palette lives here, both documents import it, and there is exactly
- * one definition to change. This mirrors the split tokens.css/styles.css
- * already models in @dailies-studio/ui: the stage takes the PALETTE and none
- * of the widget rules.
+ * one definition to change. The house surfaces, lines, ink and accent come
+ * from @dailies-studio/ui tokens.css; this file never redeclares a name that
+ * file owns (a test says so). What stays here is functional colour, not
+ * brand: camera bars, axes, markers, audio, the working view's materials.
  *
- * ── WHY IT OVERRIDES THE HOUSE ACCENT ───────────────────────────────────
- *
- * This lane is the Raylight clone, and Raylight's editor is near-black with a
- * BLUE accent used sparingly: one primary button, the playhead, the armed
- * tool. The house rose reads as an alert colour, and applied at once to every
- * toggle, tab, scene bar and selection outline it made the editor look like a
- * standing error state. The override is scoped to this lane; motion, canvas,
- * scene and gallery keep the house palette untouched.
+ * The stage takes this file as TEXT and rescopes it onto its furniture
+ * (stage/furnitureTokens.ts), so nothing here lands on the authored root.
  */
 :root {
-  /* NOT aliased to --font. That token is a `font:` SHORTHAND
-     (`12px/1.45 system-ui, …`), so feeding it to `font-family` is an invalid
-     declaration the browser drops, which lands the whole document on the
-     default serif. Rules that want a family use this; rules that want the
-     whole shorthand use `font: var(--font)`. */
-  --font-ui: system-ui, "Segoe UI", sans-serif;
-
-  /* Surfaces, darkest to lightest. Raylight sits the panels a shade off pure
-     black and the controls a shade above the panels, so a field reads as a
-     recess without needing a border on every side. */
-  --bg: #000000;
-  --panel: #0c0c0e;
-  --panel-raised: #141417;
-  --control: #1b1b1f;
-  --control-hover: #26262c;
-  --input-bg: #1b1b1f;
-
-  --border: #232328;
-  --border-soft: #1a1a1e;
-  --text: #f2f2f5;
-  --text-dim: #8e8e97;
-  --text-faint: #5d5d66;
-
-  --accent: #0a84ff;
-  --accent-hover: #3d9dff;
-  --accent-soft: rgba(10, 132, 255, 0.16);
-  --accent-quiet: rgba(10, 132, 255, 0.12);
+  /* Contextual contrast. Filled status controls keep white ink in every
+     theme, while translucent timeline marks need the opposite ink on paper. */
+  --on-signal: #ffffff;
+  --timeline-ink: #ffffff;
+  --selection-outline: #ffffff;
+  --audio-waveform: var(--audio-clip);
+
+  /* A lane signal of its own, not the house warning: the amber of a live snap
+     and of the warm accents that point at one. */
   --accent-warm: #f5a524;
-  --danger: #ff4d4f;
-  --danger-text: #ff8a8c;
-  --warn: #f5a524;
 
-  /* The stage's own vocabulary. All three were undefined, so the overlays ran
-     on their hardcoded fallbacks: red guides and a grey frame border that
-     read as a stray rectangle rather than as the exportable edge.
+  /* The stage's own vocabulary.
 
      A SNAP GUIDE IS DELIBERATELY NOT THE ACCENT. It appears while a drag is
      in flight, on top of a selection already drawn in accent, and two
      identical colours mean the author cannot tell the thing they are moving
      from the thing they are aligning to. */
   --guide: #f5a524;
+  /* A guide the author placed from a ruler. Violet, so it never reads as the
+     amber live snap or the accent selection it sits beside. */
+  --user-guide: #c46cff;
   --frame-border: rgba(255, 255, 255, 0.22);
   --marquee: var(--accent);
 
@@ -77,6 +53,16 @@
      document — so it lives here with the rest of the palette. */
   --frustum: #eab308;
 
+  /* Concrete values only. Three reads these strings directly and cannot
+     resolve var() or color-mix() as material colours. The backdrop IS the
+     house well (--surface-well); the working ground is a neutral step above
+     it, with no hue: the picture is judged on it. */
+  --stage-backdrop: #050505;
+  --working-bg: #141414;
+  --working-clay: #8a8a93;
+  --working-wire: #b8b8c2;
+  --gizmo-hot: #ffffff;
+
   /* The working pane's placement aids: the ground grid, and the three DESIGN
      axes shared by the drag gizmo and the corner nav ball.
 
@@ -88,37 +74,74 @@
 
      The grid is nearly the panel colour on purpose: it is furniture under a
      picture being judged, and a bright floor competes with the shot. */
-  --grid: #2a2a31;
+  --grid: #2a2a2a;
   --axis-x: #ef4444;
   --axis-y: #22c55e;
   --axis-z: #3b82f6;
 
-  /* The seam between the two stage panes. Deliberately `--border` and not the
+  /* The seam between the two stage panes. Deliberately a line and not the
      accent: it is furniture, drawn over a picture the author is judging, and
      the moment it is bright it competes with the shot. Defined here rather than
      in the chrome's stylesheet because the SVG that draws it lives in the STAGE
      document, which inherits nothing from the chrome. */
-  --stage-divider: var(--border);
+  --stage-divider: var(--line);
 
-  /* The timeline vocabulary. Raylight draws a block as a DARK FILL WITH A
-     BRIGHT BORDER rather than a solid bar, which keeps forty overlapping
-     blocks legible instead of a wall of colour and gives every lane its own
-     hue. One hue per lane defines both halves. */
-  --block-in: #38bdf8;
+  /* The timeline vocabulary. Raylight draws a camera move as a DARK FILL WITH
+     A BRIGHT BORDER rather than a solid bar, which keeps forty overlapping
+     moves legible instead of a wall of colour. One hue defines both halves. */
   --block-during: #a78bfa;
-  --block-out: #f472b6;
-  --scene-bar: #34d399;
+  /* THE LIVE FILL, AND IT MEANS ONE THING: the playhead is inside this clip
+     right now. It is the accent, solid, with white type (states.css): the one
+     solid accent in the lane, where every clip at rest is the light option A
+     wash. Nothing wears it at rest. It was a green until the 2026-10 design
+     review, which moved the live state onto the accent. `--block-during`
+     above stays, because it answers a different question (this is a camera
+     move). */
+  --bar-live: var(--accent);
+
+  /* AND THE STATE A BAR IS IN THE REST OF THE TIME, which is every bar on
+     screen but one. Four steps, named here rather than spelled as percentages
+     at the seven rules that draw them.
+
+     AN INK WASH AND NOT A SURFACE STEP: mixing toward the ink steps away from
+     the panel in BOTH themes, because the ink is what inverts between them.
+     The ink is the house --wash-ink, white in dark and the cool #1c1c41 in
+     light, so the bars sit in the same family as every other light step.
+
+     Only the CHROME reads these (the stage draws no timeline), so the mixes
+     are resolved once on :root and the stage-furniture scope below never
+     needs them. */
+  --bar-ink: var(--wash-ink);
+  --bar-rest: color-mix(in srgb, var(--bar-ink) 10%, transparent);
+  --bar-rest-hover: color-mix(in srgb, var(--bar-ink) 16%, transparent);
+  --bar-rest-line: color-mix(in srgb, var(--bar-ink) 22%, transparent);
+  --bar-rest-line-hover: color-mix(in srgb, var(--bar-ink) 34%, transparent);
+  /* THE CONTROL RECIPE, which is how the boards draw a lifetime bar and a
+     block at rest: the house control ground, its strong edge, and a 1x8 grip
+     on each edge that can be dragged. Named here, apart from the four wash
+     steps above, because the storyboard and the shot bar still read those.
+     Each one restates a house token that already flips with the appearance;
+     the light block below restates them again for the stage-furniture scope,
+     the same way it restates `--bar-ink`. */
+  --bar-ground: var(--fill-rest);
+  --bar-ground-hover: var(--fill-hover);
+  --bar-edge: var(--line-strong);
+  --bar-grip: var(--ink-3);
   --playhead: var(--accent);
 
-  /* The audio lane. A distinct hue from every block slot AND from the scene
-     bar, because the whole point of putting the score under the video is that
-     the author can find it without reading a label: an audio clip that shared
-     the During purple would read as one more animation block. Teal is the one
-     band left between the scene green and the In blue. */
+  /* The audio lane. A distinct hue from every block slot AND from the live
+     green, because the whole point of putting the score under the video is
+     that the author can find it without reading a label: an audio clip that
+     shared the During purple would read as one more animation block. Teal is
+     the one band left between that green and the In blue. */
   --audio-clip: #2dd4bf;
   /* The gain rubber band and the fade ramps, which are drawn ON the clip and
      must stay readable over the waveform under them. */
   --audio-line: #fef08a;
+  /* The sound clip's name chip: a deep teal plate under light teal type, so
+     the name reads over the waveform it sits on. */
+  --audio-chip-bg: #0f2a27;
+  --audio-chip-ink: #7fe8d8;
 
   /* The marker strip: an ORANGE band carrying WHITE diamonds, which is the
      reference editor's own pairing and is not arbitrary. A marker is a note
@@ -128,4 +151,72 @@
      hue fill is a smudge. `MarkerRef.color` overrides the diamond only. */
   --marker: #f97316;
   --marker-pin: #ffffff;
+
+  /* The graph editor's curve colours, in list order: each curve's dot and its
+     line share one, so the author matches a line to its name by colour. The
+     first is the accent, the single-curve look the graph always had. */
+  --curve-1: var(--accent);
+  --curve-2: #f5c451;
+  --curve-3: #ff6b9a;
+  --curve-4: #4ade80;
+
+  /* An MCP agent at work (state/agentActivity.ts): its face, its dots and its
+     outline. Only ever the Agent's (presence.ts AGENT_COLOR holds the dark
+     value for the inline styles that need a concrete colour). */
+  --agent: #34d399;
+}
+
+/* The light appearance. The signal HUES hold; their lightness is lowered
+   until each reads at 3:1 on the darkest light surface, the well (#d9d9dc),
+   because a keyframe or a live bar that vanishes on paper is a signal that
+   is not sent. Context-dependent ink, furniture and the working view's
+   materials change with it. The second selector is the stage's furniture
+   scope: the stage rescopes this file anyway, and the chrome ignores it. */
+:root[data-theme="light"],
+:root[data-dailies-studio-theme="light"] [data-dailies-stage-furniture] {
+  --on-signal: #ffffff;
+  --timeline-ink: #1c1c1c;
+  --selection-outline: #1c1c1c;
+  --audio-waveform: var(--audio-clip);
+
+  --frame-border: rgba(28, 28, 28, 0.24);
+  --marquee: var(--accent);
+  --stage-divider: var(--line);
+  --bar-ink: var(--wash-ink);
+  --bar-ground: var(--fill-rest);
+  --bar-ground-hover: var(--fill-hover);
+  --bar-edge: var(--line-strong);
+  --bar-grip: var(--ink-3);
+  --playhead: var(--accent);
+
+  --accent-warm: #a96e04;
+  --guide: #a96e04;
+  --user-guide: #8a2fd0;
+  --block-during: #8668d4;
+  /* Restated, so a light-themed subtree resolves its own accent. */
+  --bar-live: var(--accent);
+  --audio-clip: #0a8a7c;
+  --audio-line: #8a7c04;
+  --audio-chip-bg: #cdefea;
+  --audio-chip-ink: #075e55;
+  --marker: #c95902;
+  --marker-pin: #ffffff;
+  --curve-1: var(--accent);
+  --curve-2: #8a6d00;
+  --curve-3: #c2386b;
+  --curve-4: #15803d;
+  --agent: #0b8a5f;
+
+  /* These are consumed by WebGL as parsed colour strings. Keep each value
+     concrete. The backdrop and the working ground are the light well. */
+  --stage-backdrop: #d9d9dc;
+  --working-bg: #d9d9dc;
+  --working-clay: #777982;
+  --working-wire: #303138;
+  --grid: #c4c4c4;
+  --gizmo-hot: #1c1c1c;
+  --frustum: #9b7500;
+  --axis-x: #e4383b;
+  --axis-y: #068e3f;
+  --axis-z: #3077ea;
 }