@bycrux/editor 1.2.2 → 1.4.0

package/src/video/RenderModal.tsx

@@ -115,12 +115,10 @@ interface RenderModalProps<P extends Project = Project> {
   preRenderOptions?: PreRenderOptions
   /** Editor theme mode — light/dark. The export dialog and progress/error
    *  panels follow `--editor-surface`, so warning/error hues need to darken
-   *  in light mode. The render-log terminal boxes stay dark by design and so
-   *  take no mode: they are painted an OPAQUE near-black (`#0a0e17`/`#0e131f`)
-   *  rather than a translucent `bg-black/40`, which would have composited to
-   *  mid-grey over a light surface instead of staying a terminal. Those two
-   *  values are exactly what the old translucent blacks composited to over the
-   *  dark `--editor-surface`, so dark mode is unchanged. Absent -> dark,
+   *  in light mode. The render-log terminal boxes stay dark by design: they are
+   *  painted an OPAQUE near-black (`#0a0e17`) with fixed white text, so they
+   *  read the same under either theme. The phase stepper and footer buttons
+   *  follow the theme tokens instead. Absent -> dark,
    *  matching every existing caller. */
   mode?: 'light' | 'dark'
 }
@@ -290,10 +288,10 @@ function PhaseStepper({ current, phases }: { current: RenderPhase; phases: Rende
             <span
               className={
                 complete
-                  ? 'text-sm text-[var(--editor-text)]/70'
+                  ? 'text-sm text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]'
                   : active
                     ? 'text-sm font-semibold text-[var(--editor-text)]'
-                    : 'text-sm text-[var(--editor-text)]/35'
+                    : 'text-sm text-[color-mix(in_srgb,var(--editor-text)_35%,transparent)]'
               }
             >
               {phaseLabel(phase)}
@@ -309,15 +307,15 @@ function PhaseStepper({ current, phases }: { current: RenderPhase; phases: Rende
 
 function LogLine({ text }: { text: string }) {
   const t = text.replace(/^\[montaj render\]\s*/, '')
-  let color = 'text-[var(--editor-text)]/60'
+  let color = 'text-white/60'
   if (/ready|complete|done|encoded|assembled/i.test(t))  color = 'text-green-400'
   else if (/rendering|bundling|launching|browsers/i.test(t)) color = 'text-sky-400'
   else if (/trimming|building|composing/i.test(t))       color = 'text-amber-400'
-  else if (/frame\s+\d+\/\d+/i.test(t))                  color = 'text-[var(--editor-text)]/55'
+  else if (/frame\s+\d+\/\d+/i.test(t))                  color = 'text-white/55'
   else if (/error|fail|warn/i.test(t))                   color = 'text-red-400'
 
   const prefix = text.startsWith('[montaj render]')
-    ? <span className="text-[var(--editor-text)]/40">[render] </span>
+    ? <span className="text-white/40">[render] </span>
     : null
 
   return (
@@ -385,7 +383,7 @@ function ProgressBar({ value }: { value: number | null }) {
   return (
     <div className="w-full max-w-xs" role="progressbar" aria-label="Render progress"
       aria-valuenow={pct === null ? undefined : Math.round(pct)} aria-valuemin={0} aria-valuemax={100}>
-      <div className="h-1.5 w-full overflow-hidden rounded-full bg-[var(--editor-text)]/10">
+      <div className="h-1.5 w-full overflow-hidden rounded-full bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)]">
         {pct === null ? (
           <>
             <style>{'@keyframes montajRenderIndet{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}'}</style>
@@ -792,16 +790,16 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
     }
     return (<>
       {createPortal(
-      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md p-4">
-        <div className="w-full max-w-3xl bg-[var(--editor-surface)] border border-white/10 rounded-2xl shadow-2xl flex flex-col overflow-hidden">
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md p-4 text-[var(--editor-text)]">
+        <div className="w-full max-w-3xl bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex flex-col overflow-hidden">
 
           {/* Header */}
-          <div className="flex items-center justify-between px-5 py-4 border-b border-white/10">
+          <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
             <h2 className="text-sm font-semibold text-[var(--editor-text)]">Export</h2>
             <button
               onClick={handleCancel}
               aria-label="Close"
-              className="text-[var(--editor-text)]/55 hover:text-[var(--editor-text)] transition-colors text-lg leading-none"
+              className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none"
             >
               ×
             </button>
@@ -813,7 +811,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
             {/* Left — cover preview + editor */}
             <div className="md:w-64 shrink-0 flex flex-col gap-2">
               <div
-                className="relative mx-auto max-w-full overflow-hidden rounded-lg border border-white/10 bg-black/40 flex items-center justify-center"
+                className="relative mx-auto max-w-full overflow-hidden rounded-lg border border-[var(--editor-border)] bg-black/40 flex items-center justify-center"
                 style={coverPortrait
                   ? { aspectRatio: coverAspect, height: 'min(46vh, 22rem)' }
                   : { aspectRatio: coverAspect, width: '100%' }}
@@ -827,7 +825,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 ) : coverLoading ? (
                   <Loader size="md" label="Loading cover" />
                 ) : (
-                  <span className="text-[11px] text-[var(--editor-text)]/40">No preview</span>
+                  <span className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">No preview</span>
                 )}
               </div>
               {adapter.getSampleFrame && (
@@ -835,7 +833,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                   <button
                     onClick={() => setCoverEditing(o => !o)}
                     aria-expanded={coverEditing}
-                    className="self-start text-xs text-[var(--editor-text)]/70 hover:text-[var(--editor-text)] transition-colors"
+                    className="self-start text-xs text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] hover:text-[var(--editor-text)] transition-colors"
                   >
                     {coverEditing ? 'Done' : 'Edit cover'}
                   </button>
@@ -857,7 +855,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                               className={`relative shrink-0 overflow-hidden rounded border transition-colors ${
                                 active
                                   ? 'border-[var(--editor-accent)] ring-1 ring-[var(--editor-accent)]'
-                                  : 'border-white/10 hover:border-white/40'
+                                  : 'border-[var(--editor-border)] hover:border-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]'
                               }`}
                               style={{ aspectRatio: coverAspect, height: 72 }}
                             >
@@ -869,7 +867,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                         })}
                       </div>
                     ) : (
-                      <p className="text-[11px] text-[var(--editor-text)]/40">No frames to pick from.</p>
+                      <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">No frames to pick from.</p>
                     )
                   )}
                 </>
@@ -880,7 +878,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
             <div className="flex-1 min-w-0 flex flex-col gap-4">
               {/* Name */}
               <label className="flex flex-col gap-1.5">
-                <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">Name</span>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Name</span>
                 <input
                   type="text"
                   value={name}
@@ -892,9 +890,9 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
               {/* Save to */}
               <div className="flex flex-col gap-1">
-                <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">Save to</span>
-                <span className="text-xs font-mono text-[var(--editor-text)]/70 truncate">output/{outputName}.mp4</span>
-                <span className="text-[11px] text-[var(--editor-text)]/45">Download after export.</span>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Save to</span>
+                <span className="text-xs font-mono text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] truncate">output/{outputName}.mp4</span>
+                <span className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Download after export.</span>
               </div>
 
               {/* Resolution — source-capped tier picker. Only rendered when the
@@ -908,7 +906,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 const currentShort = Math.min(...res.value)
                 return (
                   <div className="flex flex-col gap-2">
-                    <p className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">Resolution</p>
+                    <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Resolution</p>
                     <div role="radiogroup" aria-label="Resolution" className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                       {res.available.map(([w, h]) => {
                         const short = Math.min(w, h)
@@ -921,12 +919,12 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                             onClick={() => res.set([w, h])}
                             className={`flex flex-col gap-1 rounded-lg border p-2.5 text-left transition-colors ${
                               active
-                                ? 'border-violet-400/60 bg-violet-400/10'
-                                : 'border-[var(--editor-border)] hover:bg-[var(--editor-text)]/5'
+                                ? 'border-[var(--editor-accent)] bg-[color-mix(in_srgb,var(--editor-accent)_12%,transparent)]'
+                                : 'border-[var(--editor-border)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
                             }`}
                           >
                             <span className="text-xs font-semibold text-[var(--editor-text)]">{resLabel([w, h])}</span>
-                            <span className="text-[10px] leading-snug text-[var(--editor-text)]/55">{w} × {h}</span>
+                            <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">{w} × {h}</span>
                           </button>
                         )
                       })}
@@ -940,7 +938,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 const fps = preRenderOptions.fps
                 return (
                   <div className="flex flex-col gap-2">
-                    <p className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">Frame rate</p>
+                    <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Frame rate</p>
                     <div role="radiogroup" aria-label="Frame rate" className="grid grid-cols-3 gap-2">
                       {fps.available.map(f => {
                         const active = f === fps.value
@@ -953,12 +951,12 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                             onClick={() => fps.set(f)}
                             className={`flex flex-col gap-1 rounded-lg border p-2.5 text-left transition-colors ${
                               active
-                                ? 'border-violet-400/60 bg-violet-400/10'
-                                : 'border-[var(--editor-border)] hover:bg-[var(--editor-text)]/5'
+                                ? 'border-[var(--editor-accent)] bg-[color-mix(in_srgb,var(--editor-accent)_12%,transparent)]'
+                                : 'border-[var(--editor-border)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
                             }`}
                           >
                             <span className="text-xs font-semibold text-[var(--editor-text)]">{f} fps</span>
-                            <span className="text-[10px] leading-snug text-[var(--editor-text)]/55">{hint}</span>
+                            <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">{hint}</span>
                           </button>
                         )
                       })}
@@ -972,7 +970,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 <>
                   {/* Format */}
                   <div className="flex flex-col gap-2">
-                    <p className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">Format</p>
+                    <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Format</p>
                     <div role="radiogroup" aria-label="Format" className="grid grid-cols-3 gap-2">
                       {EXPORT_CHOICES.map(choice => {
                         const active = choice.id === exportChoice
@@ -984,12 +982,12 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                             onClick={() => setExport(choice.id)}
                             className={`flex flex-col gap-1 rounded-lg border p-2.5 text-left transition-colors ${
                               active
-                                ? 'border-violet-400/60 bg-violet-400/10'
-                                : 'border-[var(--editor-border)] hover:bg-[var(--editor-text)]/5'
+                                ? 'border-[var(--editor-accent)] bg-[color-mix(in_srgb,var(--editor-accent)_12%,transparent)]'
+                                : 'border-[var(--editor-border)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
                             }`}
                           >
                             <span className="text-xs font-semibold text-[var(--editor-text)]">{choice.label}</span>
-                            <span className="text-[10px] leading-snug text-[var(--editor-text)]/55">{choice.blurb}</span>
+                            <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">{choice.blurb}</span>
                           </button>
                         )
                       })}
@@ -1010,7 +1008,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                         <button
                           onClick={() => setImageColor(o => !o)}
                           aria-expanded={imageColorOpen}
-                          className="flex items-center gap-1.5 self-start text-xs text-[var(--editor-text)]/70 hover:text-[var(--editor-text)] transition-colors"
+                          className="flex items-center gap-1.5 self-start text-xs text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] hover:text-[var(--editor-text)] transition-colors"
                         >
                           {imageColorOpen ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
                           Image color
@@ -1018,7 +1016,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
                         {imageColorOpen ? (
                           <div className="flex flex-col gap-2">
-                            <p className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">
+                            <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                               How photos and logos convert for HDR
                             </p>
                             <div role="radiogroup" aria-label="Image color" className="grid grid-cols-2 gap-2">
@@ -1032,8 +1030,8 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                                     onClick={() => it.set(t.id)}
                                     className={`flex flex-col gap-1.5 rounded-lg border p-2 text-left transition-colors ${
                                       active
-                                        ? 'border-violet-400/60 bg-violet-400/10'
-                                        : 'border-[var(--editor-border)] hover:bg-[var(--editor-text)]/5'
+                                        ? 'border-[var(--editor-accent)] bg-[color-mix(in_srgb,var(--editor-accent)_12%,transparent)]'
+                                        : 'border-[var(--editor-border)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
                                     }`}
                                   >
                                     <img
@@ -1044,17 +1042,17 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                                     <span className="text-xs font-semibold text-[var(--editor-text)] flex items-center gap-1.5">
                                       {t.label}
                                       {t.id === DEFAULT_IMAGE_TONE && (
-                                        <span className="text-[9px] font-normal px-1 py-px rounded bg-[var(--editor-text)]/10 text-[var(--editor-text)]/55">default</span>
+                                        <span className="text-[9px] font-normal px-1 py-px rounded bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">default</span>
                                       )}
                                     </span>
-                                    <span className="text-[10px] leading-snug text-[var(--editor-text)]/60">{t.summary}</span>
+                                    <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">{t.summary}</span>
                                   </button>
                                 )
                               })}
                             </div>
                           </div>
                         ) : (
-                          <p className="text-[11px] text-[var(--editor-text)]/45">
+                          <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                             Photos and logos use the {toneInfo.label} conversion. Open to change.
                           </p>
                         )}
@@ -1067,7 +1065,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                     <button
                       onClick={() => setAdvanced(o => !o)}
                       aria-expanded={advancedOpen}
-                      className="flex items-center gap-1.5 self-start text-xs text-[var(--editor-text)]/70 hover:text-[var(--editor-text)] transition-colors"
+                      className="flex items-center gap-1.5 self-start text-xs text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] hover:text-[var(--editor-text)] transition-colors"
                     >
                       {advancedOpen ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
                       Advanced
@@ -1075,7 +1073,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
                     {advancedOpen ? (
                       <div className="flex flex-col gap-2">
-                        <p className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                           Tone curve for SDR
                         </p>
                         <div role="radiogroup" aria-label="Tone curve for SDR" className="grid grid-cols-2 gap-2">
@@ -1090,8 +1088,8 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                                 onClick={() => setSdrCurve(curve.id)}
                                 className={`flex flex-col gap-1.5 rounded-lg border p-2 text-left transition-colors ${
                                   active
-                                    ? 'border-violet-400/60 bg-violet-400/10'
-                                    : 'border-[var(--editor-border)] hover:bg-[var(--editor-text)]/5'
+                                    ? 'border-[var(--editor-accent)] bg-[color-mix(in_srgb,var(--editor-accent)_12%,transparent)]'
+                                    : 'border-[var(--editor-border)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
                                 }`}
                               >
                                 {thumb ? (
@@ -1120,17 +1118,17 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                                     </span>
                                   </span>
                                 ) : thumbsPending ? (
-                                  <span style={{ aspectRatio: coverAspect }} className="w-full rounded border border-[var(--editor-border)] bg-[var(--editor-text)]/5 flex items-center justify-center">
+                                  <span style={{ aspectRatio: coverAspect }} className="w-full rounded border border-[var(--editor-border)] bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)] flex items-center justify-center">
                                     <Loader size="sm" />
                                   </span>
                                 ) : null}
                                 <span className="text-xs font-semibold text-[var(--editor-text)] flex items-center gap-1.5">
                                   {curve.label}
                                   {curve.id === DEFAULT_SDR_CURVE && (
-                                    <span className="text-[9px] font-normal px-1 py-px rounded bg-[var(--editor-text)]/10 text-[var(--editor-text)]/55">default</span>
+                                    <span className="text-[9px] font-normal px-1 py-px rounded bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">default</span>
                                   )}
                                 </span>
-                                <span className="text-[10px] leading-snug text-[var(--editor-text)]/60">{curve.blurb}</span>
+                                <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">{curve.blurb}</span>
                               </button>
                             )
                           })}
@@ -1139,7 +1137,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                           data-testid="sdr-honesty-line"
                           className={`text-[11px] leading-snug ${
                             sdrCurve === DEFAULT_SDR_CURVE
-                              ? 'text-[var(--editor-text)]/55'
+                              ? 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]'
                               : (mode === 'light' ? 'text-amber-700' : 'text-amber-400/90')
                           }`}
                         >
@@ -1147,7 +1145,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                         </p>
                       </div>
                     ) : (
-                      <p className="text-[11px] text-[var(--editor-text)]/45">
+                      <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                         SDR files use the {curveInfo.label} look. Open Advanced to compare curves.
                       </p>
                     )}
@@ -1159,13 +1157,13 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
           {/* Footer — duration on the left, actions on the right. */}
           <div className="flex items-center justify-between gap-2 px-5 py-3 border-t border-[var(--editor-border)]">
-            <span className="text-xs text-[var(--editor-text)]/50 tabular-nums">
+            <span className="text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] tabular-nums">
               {durationSec > 0 ? formatTimecode(durationSec) : ''}
             </span>
             <div className="flex items-center gap-2">
               <button
                 onClick={handleCancel}
-                className="text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)]/80 hover:opacity-90 transition-colors"
+                className="text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] hover:opacity-90 transition-colors"
               >
                 Cancel
               </button>
@@ -1183,7 +1181,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
       )}
       {expandedCurve && expandedUrl && createPortal(
         <div
-          className="fixed inset-0 z-[60] flex flex-col items-center justify-center gap-3 bg-black/90 p-6"
+          className="fixed inset-0 z-[60] flex flex-col items-center justify-center gap-3 bg-black/90 p-6 text-white"
           onClick={() => setExpandedCurveId(null)}
           role="dialog"
           aria-label={`${expandedCurve.label} preview`}
@@ -1243,7 +1241,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
     // block for this `fixed` overlay, sizing it to the scrolled page height and
     // centering the panel off-screen below the fold.
     return createPortal(
-      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black">
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black text-[var(--editor-text)]">
         <div className="w-[96vw] h-[96vh] bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex overflow-hidden">
 
           {/* Left — video */}
@@ -1257,7 +1255,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 className="h-full w-full object-contain"
               />
             ) : (
-              <p className="text-sm text-[var(--editor-text)]/60">Render complete.</p>
+              <p className="text-sm text-white/60">Render complete.</p>
             )}
           </div>
 
@@ -1268,10 +1266,10 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 <span className="w-2 h-2 rounded-full bg-green-400" />
                 <div>
                   <p className="text-sm font-semibold text-[var(--editor-text)]">Render complete</p>
-                  <p className="text-xs text-[var(--editor-text)]/60">Saved to your library.</p>
+                  <p className="text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Saved to your library.</p>
                 </div>
               </div>
-              <button onClick={onClose} className="text-[var(--editor-text)]/55 hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
+              <button onClick={onClose} className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
             </div>
 
             <div className="flex flex-col gap-3 p-5 flex-1">
@@ -1281,7 +1279,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 <a
                   href={videoUrl}
                   download={downloadName}
-                  className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-green-800/60 border border-green-700 text-green-200 hover:bg-green-700/60 transition-colors font-medium"
+                  className={`w-full text-center text-sm px-4 py-2.5 rounded-lg border transition-colors font-medium ${mode === 'light' ? 'bg-green-600 border-green-700 text-white hover:bg-green-700' : 'bg-green-800/60 border-green-700 text-green-200 hover:bg-green-700/60'}`}
                 >
                   {extraOutputs.length > 0 ? 'Download HDR master' : 'Download'}
                 </a>
@@ -1292,14 +1290,14 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                   key={p}
                   href={adapter.fileUrl(p)}
                   download={basename(p)}
-                  className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-[var(--editor-surface)] border border-green-800 text-green-200/90 hover:bg-green-900/40 transition-colors font-medium"
+                  className={`w-full text-center text-sm px-4 py-2.5 rounded-lg bg-[var(--editor-surface)] border transition-colors font-medium ${mode === 'light' ? 'border-green-600 text-green-700 hover:bg-green-50' : 'border-green-800 text-green-200/90 hover:bg-green-900/40'}`}
                 >
                   Download SDR version
                 </a>
               ))}
               <button
                 onClick={onClose}
-                className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)]/80 hover:opacity-90 transition-colors"
+                className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] hover:opacity-90 transition-colors"
               >
                 Close
               </button>
@@ -1312,11 +1310,11 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
   }
 
   return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md p-4">
-      <div className="w-full max-w-md bg-[var(--editor-surface)] border border-white/10 rounded-2xl shadow-2xl flex flex-col overflow-hidden">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md p-4 text-[var(--editor-text)]">
+      <div className="w-full max-w-md bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex flex-col overflow-hidden">
 
         {/* Header */}
-        <div className="flex items-center justify-between px-5 py-4 border-b border-white/10">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
           <div className="flex items-center gap-2.5">
             {status === 'running' && <span className="w-2 h-2 rounded-full bg-[var(--editor-accent)] animate-pulse" />}
             {status === 'error'   && <span className="w-2 h-2 rounded-full bg-red-400" />}
@@ -1325,7 +1323,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
             </h2>
           </div>
           {status !== 'running' && (
-            <button onClick={onClose} className="text-[var(--editor-text)]/55 hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
+            <button onClick={onClose} className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
           )}
         </div>
 
@@ -1336,7 +1334,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
             <div className="flex flex-col items-center gap-1 text-center">
               <h3 className="text-base font-semibold text-[var(--editor-text)]">Exporting your video</h3>
-              <p className="text-xs text-[var(--editor-text)]/50">This can take a few minutes for longer videos.</p>
+              <p className="text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">This can take a few minutes for longer videos.</p>
             </div>
 
             {/* Progress bar — always visible while rendering, above the stepper
@@ -1355,7 +1353,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
             {/* Granular phase progress (poll hosts advance through phases). */}
             {view !== 'logs' && (
-              <div className="w-full max-w-xs rounded-xl border border-white/10 bg-[#0e131f] px-4 py-3">
+              <div className="w-full max-w-xs rounded-xl border border-[var(--editor-border)] bg-[color-mix(in_srgb,var(--editor-text)_4%,var(--editor-surface))] px-4 py-3">
                 <PhaseStepper current={phase} phases={stepperPhases(renderOpts)} />
               </div>
             )}
@@ -1366,7 +1364,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 <button
                   onClick={() => setShowLog(o => !o)}
                   aria-expanded={showLog}
-                  className="mx-auto flex items-center gap-1 text-[11px] text-[var(--editor-text)]/50 hover:text-[var(--editor-text)]/80 transition-colors"
+                  className="mx-auto flex items-center gap-1 text-[11px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] transition-colors"
                 >
                   {showLog ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
                   {showLog ? 'Hide render log' : 'Show render log'}
@@ -1375,17 +1373,17 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                   <div className="relative mt-2">
                     <button
                       onClick={() => navigator.clipboard.writeText(logs.join('\n'))}
-                      className="absolute top-2 right-2 z-10 rounded border border-white/10 bg-[#0a0e17] px-2 py-0.5 text-[10px] text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] transition-colors"
+                      className="absolute top-2 right-2 z-10 rounded border border-white/10 bg-[#0a0e17] px-2 py-0.5 text-[10px] text-white/60 hover:text-white transition-colors"
                       title="Copy logs"
                     >
                       Copy
                     </button>
                     <div
                       ref={logRef}
-                      className="flex h-52 flex-col gap-0.5 overflow-y-auto rounded-lg border border-white/10 bg-[#0a0e17] px-3 py-2 font-mono text-[11px] text-[var(--editor-text)]/80"
+                      className="flex h-52 flex-col gap-0.5 overflow-y-auto rounded-lg border border-white/10 bg-[#0a0e17] px-3 py-2 font-mono text-[11px] text-white/80"
                     >
                       {logs.length === 0
-                        ? <span className="italic text-[var(--editor-text)]/40">Starting render engine…</span>
+                        ? <span className="italic text-white/40">Starting render engine…</span>
                         : logs.map((line, i) => <LogLine key={i} text={line} />)}
                     </div>
                   </div>
@@ -1400,14 +1398,14 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
               <div className="relative">
                 <button
                   onClick={() => navigator.clipboard.writeText(logs.join('\n') + (errorMsg ? '\n' + errorMsg : ''))}
-                  className="absolute top-2 right-2 z-10 rounded border border-white/10 bg-[#0a0e17] px-2 py-0.5 text-[10px] text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] transition-colors"
+                  className="absolute top-2 right-2 z-10 rounded border border-white/10 bg-[#0a0e17] px-2 py-0.5 text-[10px] text-white/60 hover:text-white transition-colors"
                   title="Copy logs"
                 >
                   Copy
                 </button>
                 <div
                   ref={logRef}
-                  className="flex h-72 flex-col gap-0.5 overflow-y-auto rounded-lg border border-white/10 bg-[#0a0e17] px-3 py-2 font-mono text-[11px] text-[var(--editor-text)]/80"
+                  className="flex h-72 flex-col gap-0.5 overflow-y-auto rounded-lg border border-white/10 bg-[#0a0e17] px-3 py-2 font-mono text-[11px] text-white/80"
                 >
                   {logs.map((line, i) => <LogLine key={i} text={line} />)}
                   {errorMsg && <span className="mt-1 text-red-400">{errorMsg}</span>}
@@ -1422,18 +1420,18 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
         )}
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-white/10">
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-[var(--editor-border)]">
           {status === 'running' ? (
             <button
               onClick={handleCancel}
-              className={`text-sm px-4 py-1.5 rounded-md bg-[#0e131f] border border-white/10 text-[var(--editor-text)]/80 transition-colors ${mode === 'light' ? 'hover:bg-red-50 hover:border-red-300 hover:text-red-700' : 'hover:bg-red-900/40 hover:border-red-700 hover:text-red-300'}`}
+              className={`text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] transition-colors ${mode === 'light' ? 'hover:bg-red-50 hover:border-red-300 hover:text-red-700' : 'hover:bg-red-900/40 hover:border-red-700 hover:text-red-300'}`}
             >
               Cancel
             </button>
           ) : (
             <button
               onClick={onClose}
-              className="text-sm px-4 py-1.5 rounded-md bg-[#0e131f] border border-white/10 text-[var(--editor-text)] hover:opacity-90 transition-colors"
+              className="text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)] hover:opacity-90 transition-colors"
             >
               Close
             </button>

package/src/video/VersionCompare.tsx

@@ -86,7 +86,7 @@ function VersionFramePane({
 
   return (
     <div className="flex-1 min-w-0 flex flex-col gap-1.5">
-      <span className="text-[11px] font-medium text-[var(--editor-text)]/60 truncate" title={label}>
+      <span className="text-[11px] font-medium text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] truncate" title={label}>
         {label}
       </span>
       <div className="relative aspect-video w-full overflow-hidden rounded-lg border border-[var(--editor-border)] bg-[var(--editor-bg)] flex items-center justify-center">
@@ -101,7 +101,7 @@ function VersionFramePane({
           style={error ? { display: 'none' } : undefined}
         />
         {loading && !error && (
-          <span className="absolute inset-0 flex items-center justify-center text-xs text-[var(--editor-text)]/50">
+          <span className="absolute inset-0 flex items-center justify-center text-xs text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
             Loading…
           </span>
         )}
@@ -169,16 +169,16 @@ export default function VersionCompare({
   }, [onClose])
 
   return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md p-4">
-      <div className="w-full max-w-5xl bg-[var(--editor-surface)] border border-white/10 rounded-2xl shadow-2xl flex flex-col overflow-hidden">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md p-4 text-[var(--editor-text)]">
+      <div className="w-full max-w-5xl bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex flex-col overflow-hidden">
 
         {/* Header */}
-        <div className="flex items-center justify-between px-5 py-4 border-b border-white/10">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
           <h2 className="text-sm font-semibold text-[var(--editor-text)]">Compare versions</h2>
           <button
             onClick={onClose}
             aria-label="Close"
-            className="text-[var(--editor-text)]/55 hover:text-[var(--editor-text)] transition-colors text-lg leading-none"
+            className="text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none"
           >
             ×
           </button>
@@ -190,7 +190,7 @@ export default function VersionCompare({
           {/* Picker row */}
           <div className="flex flex-col sm:flex-row gap-3">
             <label className="flex-1 min-w-0 flex flex-col gap-1.5">
-              <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">Left</span>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">Left</span>
               <select
                 value={leftHash}
                 onChange={(e) => setLeftHash(e.target.value)}
@@ -202,7 +202,7 @@ export default function VersionCompare({
               </select>
             </label>
             <label className="flex-1 min-w-0 flex flex-col gap-1.5">
-              <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">Right</span>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">Right</span>
               <select
                 value={rightHash}
                 onChange={(e) => setRightHash(e.target.value)}
@@ -238,8 +238,8 @@ export default function VersionCompare({
           {/* Time-scrub slider */}
           <div className="flex flex-col gap-1.5">
             <div className="flex items-center justify-between">
-              <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">Time</span>
-              <span className="text-xs text-[var(--editor-text)]/60 tabular-nums">{formatT(t)}</span>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">Time</span>
+              <span className="text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] tabular-nums">{formatT(t)}</span>
             </div>
             <Slider
               min={0}

package/src/video/VersionPanel.tsx

@@ -87,7 +87,7 @@ export default function VersionPanel({ versions, restoring, onRestore, onSaveVer
           IS the list. The count sits on the right as an explicit "N versions"
           label so it reads as a quantity rather than part of the title. */}
       <div className="shrink-0 flex items-center justify-between px-3 py-2 border-b border-[var(--editor-border)]">
-        <span className="text-xs font-medium text-[var(--editor-text)]/60 uppercase tracking-wide">Versions</span>
+        <span className="text-xs font-medium text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] uppercase tracking-wide">Versions</span>
         {rows.length > 0 && (
           <span className="text-[10px] text-[var(--editor-text)] opacity-50">
             {rows.length} {rows.length === 1 ? 'version' : 'versions'}
@@ -106,7 +106,7 @@ export default function VersionPanel({ versions, restoring, onRestore, onSaveVer
           onChange={e => setNameInput(e.target.value)}
           placeholder="Name (optional)"
           disabled={saving || !onSaveVersion}
-          className="min-w-0 flex-1 h-8 text-[11px] bg-[var(--editor-bg)] border border-[var(--editor-border)] rounded-md px-2 text-[var(--editor-text)] placeholder:text-[var(--editor-text)]/40 focus:outline-none focus:border-[var(--editor-accent)] disabled:opacity-40"
+          className="min-w-0 flex-1 h-8 text-[11px] bg-[var(--editor-bg)] border border-[var(--editor-border)] rounded-md px-2 text-[var(--editor-text)] placeholder:text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] focus:outline-none focus:border-[var(--editor-accent)] disabled:opacity-40"
         />
         <button
           onClick={handleSaveClick}