@bycrux/editor 1.2.2 → 1.4.0

package/src/video/CaptionListPanel.tsx

@@ -88,7 +88,7 @@ const ALIGNMENTS = [
 /** The panel's one chip look, worn by every toggle on the Format tab (Bold,
  *  case, alignment). The inactive foreground is
  *  `text-[var(--editor-text)] opacity-60` rather than
- *  `text-[var(--editor-text)]/60` — Tailwind cannot generate an opacity
+ *  `text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]` — Tailwind cannot generate an opacity
  *  modifier on an arbitrary var() color, so that class is a silent no-op (see
  *  the longer note on the row index span at the bottom of this file). The
  *  row-filter chips on the Captions tab hand-roll the same look with the older
@@ -96,7 +96,7 @@ const ALIGNMENTS = [
 const chipClass = (active: boolean): string =>
   `text-[10px] rounded px-2 py-0.5 transition-all border ${
     active
-      ? 'bg-[var(--editor-accent)]/20 border-[var(--editor-accent)]/60 text-[var(--editor-accent)]'
+      ? 'bg-[color-mix(in_srgb,var(--editor-accent)_20%,transparent)] border-[color-mix(in_srgb,var(--editor-accent)_60%,transparent)] text-[var(--editor-accent)]'
       : 'bg-[var(--editor-surface)] border-[var(--editor-border)] text-[var(--editor-text)] opacity-60 hover:opacity-100'
   }`
 
@@ -111,7 +111,7 @@ const rowClass = 'flex items-center gap-1.5'
  *  ("Alignment") at this size and still leaves the ~300px rail enough room for
  *  the widest control (the font picker + Bold).
  *
- *  `opacity-60`, NOT `text-[var(--editor-text)]/60` — an opacity modifier on an
+ *  `opacity-60`, NOT `text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]` — an opacity modifier on an
  *  arbitrary var() color is a silent no-op; see the note on `chipClass` above.
  *
  *  These labels are PRESENTATIONAL: plain sibling spans, never a
@@ -559,10 +559,10 @@ function CaptionListPanelBody({
           control — so the left rail's panels share one tab language. ── */}
       <div className="shrink-0 border-b border-[var(--editor-border)] flex flex-col">
         <div className="px-3 pt-2 pb-1 flex items-center justify-between gap-2">
-          <span className="text-xs font-medium text-[var(--editor-text)]/60 uppercase tracking-wide">
+          <span className="text-xs font-medium text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] uppercase tracking-wide">
             Captions
             {segs.length > 0 && (
-              <span className="ml-1.5 text-[var(--editor-text)]/40 normal-case tracking-normal">{segs.length}</span>
+              <span className="ml-1.5 text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] normal-case tracking-normal">{segs.length}</span>
             )}
           </span>
         </div>
@@ -603,7 +603,7 @@ function CaptionListPanelBody({
             </div>
           ) : (
             <div className="flex flex-col items-center gap-2 text-center mt-4 px-2">
-              <p className="text-xs text-[var(--editor-text)]/50 leading-relaxed">
+              <p className="text-xs text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] leading-relaxed">
                 {onRegenerateCaptions
                   ? "Captions are generated from the timeline's audio."
                   : 'No captions yet. Captions are generated during transcription.'}
@@ -920,14 +920,14 @@ function CaptionListPanelBody({
           <div className="shrink-0 border-b border-[var(--editor-border)] px-3 py-2 flex flex-col gap-2">
             {/* ── Search ── */}
             <div className="relative">
-              <Search size={11} className="absolute left-2 top-1/2 -translate-y-1/2 text-[var(--editor-text)]/40 pointer-events-none" />
+              <Search size={11} className="absolute left-2 top-1/2 -translate-y-1/2 text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] pointer-events-none" />
               <input
                 type="text"
                 value={search}
                 onChange={e => setSearch(e.target.value)}
                 placeholder="Search captions…"
                 aria-label="Search captions"
-                className="w-full h-7 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] pl-6 pr-2 text-xs text-[var(--editor-text)] placeholder-[var(--editor-text)]/40 focus:outline-none focus:border-[var(--editor-accent)]"
+                className="w-full h-7 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] pl-6 pr-2 text-xs text-[var(--editor-text)] placeholder-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] focus:outline-none focus:border-[var(--editor-accent)]"
               />
             </div>
 
@@ -946,8 +946,8 @@ function CaptionListPanelBody({
                   onClick={() => setRowFilter(null)}
                   className={`text-[10px] rounded px-2 py-0.5 transition-all border ${
                     rowFilter === null
-                      ? 'bg-[var(--editor-accent)]/20 border-[var(--editor-accent)]/60 text-[var(--editor-accent)]'
-                      : 'bg-[var(--editor-surface)] border-[var(--editor-border)] text-[var(--editor-text)]/50 hover:text-[var(--editor-text)]/80 hover:border-[var(--editor-text)]/30'
+                      ? 'bg-[color-mix(in_srgb,var(--editor-accent)_20%,transparent)] border-[color-mix(in_srgb,var(--editor-accent)_60%,transparent)] text-[var(--editor-accent)]'
+                      : 'bg-[var(--editor-surface)] border-[var(--editor-border)] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] hover:border-[color-mix(in_srgb,var(--editor-text)_30%,transparent)]'
                   }`}
                 >
                   All
@@ -960,8 +960,8 @@ function CaptionListPanelBody({
                     onClick={() => setRowFilter(g.lane)}
                     className={`text-[10px] rounded px-2 py-0.5 transition-all border ${
                       rowFilter === g.lane
-                        ? 'bg-[var(--editor-accent)]/20 border-[var(--editor-accent)]/60 text-[var(--editor-accent)]'
-                        : 'bg-[var(--editor-surface)] border-[var(--editor-border)] text-[var(--editor-text)]/50 hover:text-[var(--editor-text)]/80 hover:border-[var(--editor-text)]/30'
+                        ? 'bg-[color-mix(in_srgb,var(--editor-accent)_20%,transparent)] border-[color-mix(in_srgb,var(--editor-accent)_60%,transparent)] text-[var(--editor-accent)]'
+                        : 'bg-[var(--editor-surface)] border-[var(--editor-border)] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] hover:border-[color-mix(in_srgb,var(--editor-text)_30%,transparent)]'
                     }`}
                   >
                     {`Row ${g.lane + 1}`}
@@ -974,7 +974,7 @@ function CaptionListPanelBody({
           {/* ── Scrollable numbered list ── */}
           <div role="list" aria-label="Caption segments" className="flex-1 min-h-0 overflow-y-auto px-2 py-2 flex flex-col gap-1">
         {totalVisible === 0 ? (
-          <p className="text-xs text-[var(--editor-text)]/50 italic text-center mt-4 px-2">No matching captions.</p>
+          <p className="text-xs text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] italic text-center mt-4 px-2">No matching captions.</p>
         ) : (
           visibleGroups.map(group => (
             // A single-lane project has exactly one entry here, so this
@@ -989,7 +989,7 @@ function CaptionListPanelBody({
                 // resolveDropLane), and a sidebar dropdown doing the same
                 // move by a different mechanism invites the two to disagree
                 // about what a drag means. Follow-up, not YAGNI-scope here.
-                <div className="sticky top-0 z-10 -mx-2 px-2 py-1 bg-[var(--editor-surface)] border-b border-[var(--editor-border)] text-[10px] font-medium text-[var(--editor-text)]/50 uppercase tracking-wide">
+                <div className="sticky top-0 z-10 -mx-2 px-2 py-1 bg-[var(--editor-surface)] border-b border-[var(--editor-border)] text-[10px] font-medium text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] uppercase tracking-wide">
                   {`Row ${group.lane + 1}`}
                 </div>
               )}
@@ -1050,7 +1050,7 @@ function CaptionListPanelBody({
                       />
                     </span>
                     <button
-                      className={`shrink-0 opacity-0 group-hover:opacity-100 text-[var(--editor-text)]/40 transition-opacity ${mode === 'light' ? 'hover:text-red-600' : 'hover:text-red-400'}`}
+                      className={`shrink-0 opacity-0 group-hover:opacity-100 text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] transition-opacity ${mode === 'light' ? 'hover:text-red-600' : 'hover:text-red-400'}`}
                       onClick={e => { e.stopPropagation(); handleDelete(seg.id) }}
                       title="Delete caption"
                       aria-label="Delete caption"
@@ -1090,8 +1090,8 @@ function CaptionListPanelBody({
                   confirmRemove
                     ? (mode === 'light' ? 'bg-red-50 border-red-400 text-red-700' : 'bg-red-500/15 border-red-500/60 text-red-400')
                     : (mode === 'light'
-                        ? 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)]/70 hover:border-red-400 hover:text-red-700'
-                        : 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)]/70 hover:border-red-500/50 hover:text-red-400')
+                        ? 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] hover:border-red-400 hover:text-red-700'
+                        : 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] hover:border-red-500/50 hover:text-red-400')
                 }`}
               >
                 <Trash2 size={13} />

package/src/video/CaptionRegenModal.tsx

@@ -39,7 +39,7 @@ interface CaptionRegenModalProps<P extends Project = Project> {
 }
 
 function LogLine({ text, mode = 'dark' }: { text: string; mode?: 'light' | 'dark' }) {
-  let color = 'text-[var(--editor-text)]/60'
+  let color = 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]'
   if (/ready|complete|done|transcribed/i.test(text))      color = mode === 'light' ? 'text-green-700' : 'text-green-400'
   else if (/transcrib|detecting|loading|model/i.test(text)) color = mode === 'light' ? 'text-sky-700' : 'text-sky-400'
   else if (/extract|building|composing|mixing/i.test(text)) color = mode === 'light' ? 'text-amber-700' : 'text-amber-400'
@@ -144,7 +144,7 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
   // Portal to document.body so a transformed host ancestor can't trap this
   // `fixed` overlay and push the panel off-screen (see RenderModal).
   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-full max-w-3xl bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-xl shadow-2xl flex flex-col overflow-hidden">
 
         {/* Header */}
@@ -165,13 +165,13 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
                   question about why a clip's audio showed up in the
                   captions. Read at generation time only: unmuting later just
                   means the next run sees it. */}
-              <p className="text-[11px] text-[var(--editor-text)]/50">
+              <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
                 Transcribes everything audible on the timeline. Muted clips and tracks are skipped.
               </p>
             </div>
           </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)_55%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
           )}
         </div>
 
@@ -189,17 +189,17 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
         <div className="relative">
           <button
             onClick={() => navigator.clipboard.writeText(logs.join('\n') + (errorMsg ? '\n' + errorMsg : ''))}
-            className="absolute top-2 right-2 z-10 text-[10px] px-2 py-0.5 rounded bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] hover:border-[var(--editor-border)] transition-colors"
+            className="absolute top-2 right-2 z-10 text-[10px] px-2 py-0.5 rounded bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] hover:border-[var(--editor-border)] transition-colors"
             title="Copy logs"
           >
             Copy
           </button>
           <div
             ref={logRef}
-            className="h-96 overflow-y-auto px-4 py-3 font-mono text-[11px] text-[var(--editor-text)]/80 bg-[var(--editor-surface)] flex flex-col gap-0.5"
+            className="h-96 overflow-y-auto px-4 py-3 font-mono text-[11px] text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] bg-[var(--editor-surface)] flex flex-col gap-0.5"
           >
             {logs.length === 0 && status === 'running' && (
-              <span className="text-[var(--editor-text)]/40 italic">Starting transcription…</span>
+              <span className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] italic">Starting transcription…</span>
             )}
             {logs.map((line, i) => (
               <LogLine key={i} text={line} mode={mode} />
@@ -215,7 +215,7 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
           {status === 'running' ? (
             <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 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>

package/src/video/CaptionStyleGallery.tsx

@@ -449,7 +449,7 @@ export function CaptionStyleCard({
         </div>
       )}
 
-      {/* NOT `text-[var(--editor-text)]/60` — Tailwind cannot generate an
+      {/* NOT `text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]` — Tailwind cannot generate an
           opacity modifier on an arbitrary var() colour, so that class is a
           silent no-op. See the long note in CaptionListPanel.tsx. */}
       <span

package/src/video/CommandPalette.tsx

@@ -94,7 +94,7 @@ export default function CommandPalette({ commands, initialMode = 'list', onGoToT
 
   return createPortal(
     <div
-      className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh] bg-black/70 backdrop-blur-sm"
+      className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh] bg-black/70 backdrop-blur-sm text-[var(--editor-text)]"
       onClick={onClose}
     >
       <div
@@ -103,7 +103,7 @@ export default function CommandPalette({ commands, initialMode = 'list', onGoToT
       >
         {mode === 'goto' ? (
           <div className="flex flex-col gap-2 px-4 py-3">
-            <span className="text-xs font-medium text-[var(--editor-text)]/60">Go to time</span>
+            <span className="text-xs font-medium text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Go to time</span>
             <input
               ref={inputRef}
               type="text"
@@ -111,14 +111,14 @@ export default function CommandPalette({ commands, initialMode = 'list', onGoToT
               onChange={(e) => { setGotoValue(e.target.value); setGotoError(false) }}
               onKeyDown={handleGotoKeyDown}
               placeholder="mm:ss, hh:mm:ss, or seconds"
-              className="w-full bg-transparent text-sm text-[var(--editor-text)] placeholder-[var(--editor-text)]/25 outline-none border border-[var(--editor-border)] rounded px-2 py-1.5"
+              className="w-full bg-transparent text-sm text-[var(--editor-text)] placeholder-[color-mix(in_srgb,var(--editor-text)_25%,transparent)] outline-none border border-[var(--editor-border)] rounded px-2 py-1.5"
             />
             {gotoError && <span className={`text-xs ${themeMode === 'light' ? 'text-red-600' : 'text-red-400'}`}>Couldn&rsquo;t parse that timecode</span>}
           </div>
         ) : (
           <>
             <div className="flex items-center gap-2 px-4 py-3 border-b border-[var(--editor-border)]">
-              <Search size={14} className="text-[var(--editor-text)]/60 shrink-0" />
+              <Search size={14} className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] shrink-0" />
               <input
                 ref={inputRef}
                 type="text"
@@ -126,12 +126,12 @@ export default function CommandPalette({ commands, initialMode = 'list', onGoToT
                 onChange={(e) => setQuery(e.target.value)}
                 onKeyDown={handleListKeyDown}
                 placeholder="Type a command…"
-                className="w-full bg-transparent text-sm text-[var(--editor-text)] placeholder-[var(--editor-text)]/25 outline-none"
+                className="w-full bg-transparent text-sm text-[var(--editor-text)] placeholder-[color-mix(in_srgb,var(--editor-text)_25%,transparent)] outline-none"
               />
             </div>
             <div className="max-h-80 overflow-y-auto py-1">
               {filtered.length === 0 && (
-                <div className="px-4 py-3 text-xs text-[var(--editor-text)]/35">No matching commands</div>
+                <div className="px-4 py-3 text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">No matching commands</div>
               )}
               {filtered.map((cmd, i) => (
                 <button
@@ -140,14 +140,14 @@ export default function CommandPalette({ commands, initialMode = 'list', onGoToT
                   onMouseEnter={() => setHighlight(i)}
                   onClick={() => { cmd.run(); onClose() }}
                   className={`w-full flex items-center justify-between gap-3 px-4 py-2 text-left text-sm transition-colors ${
-                    i === highlight ? 'bg-[var(--editor-text)]/10 text-[var(--editor-text)]' : 'text-[var(--editor-text)]/70'
+                    i === highlight ? 'bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] text-[var(--editor-text)]' : 'text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]'
                   }`}
                 >
                   <span>{cmd.label}</span>
                   {cmd.keyHint && cmd.keyHint.length > 0 && (
                     <span className="flex items-center gap-1 shrink-0">
                       {cmd.keyHint.map((k, j) => (
-                        <kbd key={j} className="text-[10px] font-mono px-1.5 py-0.5 rounded border border-[var(--editor-border)] text-[var(--editor-text)]/60">
+                        <kbd key={j} className="text-[10px] font-mono px-1.5 py-0.5 rounded border border-[var(--editor-border)] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                           {k}
                         </kbd>
                       ))}

package/src/video/ImageToneMenu.tsx

@@ -16,9 +16,8 @@ export interface ImageToneMenuProps {
    *              For host chrome at the top of the page.
    */
   variant?: 'icon' | 'header'
-  /** Editor theme mode — light/dark. Only affects the icon variant's active-
-   *  state hue (violet-400 is sub-AA on a light bottom toolbar). Absent ->
-   *  dark, matching every existing caller. */
+  /** Editor theme mode — light/dark. Kept for API compatibility; the active state now
+   *  reads the theme's accent tokens, which already adapt to light and dark. */
   mode?: 'light' | 'dark'
 }
 
@@ -29,7 +28,7 @@ export interface ImageToneMenuProps {
  * caller gates on settings.colorSpace). Each option shows an example: the same
  * generic photo converted through the actual render pipeline under that mode.
  */
-export default function ImageToneMenu({ value, onChange, variant = 'icon', mode = 'dark' }: ImageToneMenuProps) {
+export default function ImageToneMenu({ value, onChange, variant = 'icon' }: ImageToneMenuProps) {
   const [open, setOpen] = useState(false)
   const rootRef = useRef<HTMLDivElement>(null)
 
@@ -63,7 +62,7 @@ export default function ImageToneMenu({ value, onChange, variant = 'icon', mode
           title="How photos and logos are converted for the HDR render"
           aria-haspopup="menu"
           aria-expanded={open}
-          className="flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)]/80 hover:text-[var(--editor-text)] transition-colors"
+          className="flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] hover:text-[var(--editor-text)] transition-colors"
         >
           <Palette size={12} className="opacity-70" />
           <span className="opacity-60">Image color:</span>
@@ -78,8 +77,8 @@ export default function ImageToneMenu({ value, onChange, variant = 'icon', mode
           aria-haspopup="menu"
           className={`flex items-center justify-center w-5 h-5 rounded transition-colors ${
             open
-              ? (mode === 'light' ? 'text-violet-600 bg-violet-400/15 hover:bg-violet-400/25' : 'text-violet-400 bg-violet-400/15 hover:bg-violet-400/25')
-              : 'text-[var(--editor-text)]/60 bg-transparent hover:text-[var(--editor-text)]'
+              ? 'text-[var(--editor-accent-text)] bg-[color-mix(in_srgb,var(--editor-accent)_15%,transparent)] hover:bg-[color-mix(in_srgb,var(--editor-accent)_25%,transparent)]'
+              : 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] bg-transparent hover:text-[var(--editor-text)]'
           }`}
         >
           <Palette size={12} />
@@ -89,11 +88,11 @@ export default function ImageToneMenu({ value, onChange, variant = 'icon', mode
       {open && (
         <div
           role="menu"
-          className={`${menuPosition} z-40 w-[300px] rounded-xl border border-[var(--editor-border)] bg-[var(--editor-surface)] shadow-2xl p-2 flex flex-col gap-1`}
+          className={`${menuPosition} z-40 w-[300px] rounded-xl border border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)] shadow-2xl p-2 flex flex-col gap-1`}
         >
-          <p className="px-2 pt-1 pb-1.5 text-[11px] font-semibold text-[var(--editor-text)]/80">
+          <p className="px-2 pt-1 pb-1.5 text-[11px] font-semibold text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)]">
             Image color mapping
-            <span className="block font-normal text-[10px] text-[var(--editor-text)]/50">
+            <span className="block font-normal text-[10px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
               How photos and logos are converted for the HDR render.
             </span>
           </p>
@@ -107,8 +106,8 @@ export default function ImageToneMenu({ value, onChange, variant = 'icon', mode
                 onClick={() => { onChange(tone.id); setOpen(false) }}
                 className={`flex items-start gap-2.5 rounded-lg p-2 text-left transition-colors border ${
                   active
-                    ? 'border-violet-400/60 bg-violet-400/10'
-                    : 'border-transparent hover:bg-[var(--editor-text)]/5'
+                    ? 'border-[var(--editor-accent)] bg-[color-mix(in_srgb,var(--editor-accent)_12%,transparent)]'
+                    : 'border-transparent hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
                 }`}
               >
                 <img
@@ -120,10 +119,10 @@ export default function ImageToneMenu({ value, onChange, variant = 'icon', mode
                   <span className="text-xs font-semibold text-[var(--editor-text)] flex items-center gap-1.5">
                     {tone.label}
                     {tone.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)_55%,transparent)]">default</span>
                     )}
                   </span>
-                  <span className="text-[10px] leading-snug text-[var(--editor-text)]/60">
+                  <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                     {tone.summary}
                   </span>
                 </span>

package/src/video/OverlayInspector.tsx

@@ -216,9 +216,9 @@ function normalizeDegrees(deg: number): number {
 
 // ── Shared chrome ────────────────────────────────────────────────────────
 
-const ROW_LABEL_CLASS = 'w-14 shrink-0 text-[11px] text-[var(--editor-text)]/55'
+const ROW_LABEL_CLASS = 'w-14 shrink-0 text-[11px] text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]'
 const ICON_BUTTON_CLASS =
-  'flex h-5 w-5 shrink-0 items-center justify-center rounded text-[var(--editor-text)]/45 transition-colors hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)] disabled:pointer-events-none disabled:opacity-25'
+  'flex h-5 w-5 shrink-0 items-center justify-center rounded text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)] transition-colors hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)] disabled:pointer-events-none disabled:opacity-25'
 
 function IconButton({
   label,
@@ -282,10 +282,10 @@ function KeyframeNav({
           // invites a support question; one that is visibly unavailable and
           // says why reads as a limitation, which is what it is.
           diamondDisabled
-            ? 'cursor-not-allowed text-[var(--editor-text)]/20'
+            ? 'cursor-not-allowed text-[color-mix(in_srgb,var(--editor-text)_20%,transparent)]'
             : pressed
               ? 'text-[var(--editor-accent)]'
-              : 'text-[var(--editor-text)]/40 hover:text-[var(--editor-text)]/70',
+              : 'text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]',
         )}
       >
         <Diamond size={11} fill={pressed ? 'currentColor' : 'none'} />
@@ -518,7 +518,7 @@ export default function OverlayInspector({ item, clock, onPreview, onCommit, onC
   if (!canKeyframe(item)) {
     return (
       <div className={SECTION_CLASS}>
-        <div className="px-3 py-6 text-center text-[11px] text-[var(--editor-text)]/45">
+        <div className="px-3 py-6 text-center text-[11px] text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)]">
           Select an overlay to edit its properties.
         </div>
       </div>
@@ -769,7 +769,7 @@ export default function OverlayInspector({ item, clock, onPreview, onCommit, onC
           only hosts the ALL-properties actions (reset-all + keyframe-all); the
           muted "All" scopes them apart from each row's own per-property unit. */}
       <div className="shrink-0 flex items-center gap-1 border-b border-[var(--editor-border)] px-2 py-1.5">
-        <span className="px-1 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[var(--editor-text)]/40">
+        <span className="px-1 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]">
           All
         </span>
         <div className="ml-auto flex items-center gap-1">
@@ -857,7 +857,7 @@ export default function OverlayInspector({ item, clock, onPreview, onCommit, onC
             (Space/Enter both fire click), so it needs no key handler of its
             own — only a visible focus ring. */}
         <div className="flex items-center gap-2">
-          <span className="shrink-0 text-[11px] text-[var(--editor-text)]/55">Uniform scale</span>
+          <span className="shrink-0 text-[11px] text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]">Uniform scale</span>
           <button
             type="button"
             role="checkbox"