@remotion/studio 4.0.527 → 4.0.529

package/dist/esm/{VideoMattingModal-31pew0xj.mjs → VideoMattingModal-jzrkhah1.mjs}

@@ -3,16 +3,15 @@ import {
 } from "./index-7tt71e8n.mjs";
 import {
   RenderModalOutputName
-} from "./index-s7qa3xbw.mjs";
+} from "./index-cakcjjy2.mjs";
 import {
   Button,
   Checkmark,
   Combobox,
   DismissableModal,
+  GearIcon,
   ModalHeader,
-  ModelsIcon,
   RenderModalHr,
-  SeparationIcon,
   SetSelectedModalContext,
   SidebarContext,
   VerticalTab,
@@ -25,19 +24,20 @@ import {
   rightRow,
   useStaticFiles,
   validatePublicOutputName
-} from "./index-ppspzgn9.mjs";
-import"./index-21hxsfaa.mjs";
+} from "./index-m2a95v3p.mjs";
+import"./index-vtr5qzam.mjs";
 import {
   RenderQueueContext
-} from "./index-9x6e1dq0.mjs";
-import"./index-e855w59j.mjs";
-import"./index-r1gr3j3a.mjs";
-import"./index-cw0pnpg5.mjs";
+} from "./index-hqxc6tzp.mjs";
+import"./index-19d05w9e.mjs";
+import"./index-dfy1t576.mjs";
+import"./index-24wge6y5.mjs";
 import {
   Models
-} from "./index-ac5550e7.mjs";
-import"./index-r0ejh5sy.mjs";
+} from "./index-jc22b2wb.mjs";
+import"./index-vnc2wdfd.mjs";
 import {
+  ModelsIcon,
   VERTICAL_SCROLLBAR_CLASSNAME,
   ValidationMessage,
   buttonStyle,
@@ -50,12 +50,12 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-5t2dwxsk.mjs";
-import"./index-9xxg6218.mjs";
+} from "./index-m01zjph7.mjs";
+import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BLUE_DISABLED
-} from "./index-k426ye99.mjs";
+} from "./index-3qb54r5j.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/VideoMatting/VideoMattingModal.tsx
@@ -111,9 +111,10 @@ var makeOptions = ({
 }));
 var VideoMattingModal = ({
   displayName,
-  src
+  src,
+  target
 }) => {
-  const [tab, setTab] = useState("separate");
+  const [tab, setTab] = useState("remove");
   const isModelCached = useCallback((selectedModel) => isVideoMattingModelCached({ model: selectedModel }), []);
   const cachedModels = useModelCacheStatus({
     isModelCached,
@@ -121,10 +122,9 @@ var VideoMattingModal = ({
     refreshKey: tab
   });
   const baseName = useMemo(() => getDefaultOutputBaseName(src, displayName, "video"), [displayName, src]);
-  const [baseOutName, setBaseOutName] = useState(`${baseName}-base.webm`);
-  const [foregroundOutName, setForegroundOutName] = useState(`${baseName}-foreground.webm`);
-  const [model, setModel] = useState("ben2-base");
-  const [audio, setAudio] = useState("base");
+  const [outName, setOutName] = useState(`${baseName}-no-background.webm`);
+  const [model, setModel] = useState("modnet");
+  const [audio, setAudio] = useState("keep");
   const [videoBitrate, setVideoBitrate] = useState("very-high");
   const [support, setSupport] = useState({ type: "checking" });
   const staticFiles = useStaticFiles();
@@ -143,18 +143,11 @@ var VideoMattingModal = ({
       cancelled = true;
     };
   }, [model]);
-  const normalizedBase = baseOutName.normalize("NFC").toLowerCase();
-  const normalizedForeground = foregroundOutName.normalize("NFC").toLowerCase();
-  const duplicateOutput = normalizedBase === normalizedForeground;
-  const queuedOutputs = new Set(videoMattingJobs.filter((job) => job.status === "idle" || job.status === "running").flatMap((job) => [job.baseOutName, job.foregroundOutName]).map((name) => name.normalize("NFC").toLowerCase()));
-  const baseError = validatePublicOutputName({ extension: ".webm", outName: baseOutName }) ?? (duplicateOutput ? "Base and foreground outputs must be different" : queuedOutputs.has(normalizedBase) ? "Another video matting job is using this output file" : null);
-  const foregroundError = validatePublicOutputName({
-    extension: ".webm",
-    outName: foregroundOutName
-  }) ?? (duplicateOutput ? "Base and foreground outputs must be different" : queuedOutputs.has(normalizedForeground) ? "Another video matting job is using this output file" : null);
-  const baseExists = staticFiles.some((file) => file.name.normalize("NFC").toLowerCase() === normalizedBase);
-  const foregroundExists = staticFiles.some((file) => file.name.normalize("NFC").toLowerCase() === normalizedForeground);
-  const canSubmit = support.type === "supported" && baseError === null && foregroundError === null;
+  const normalizedOutput = outName.normalize("NFC").toLowerCase();
+  const queuedOutputs = new Set(videoMattingJobs.filter((job) => job.status === "idle" || job.status === "running" || job.status === "saving").map((job) => job.outName).map((name) => name.normalize("NFC").toLowerCase()));
+  const outputError = validatePublicOutputName({ extension: ".webm", outName }) ?? (queuedOutputs.has(normalizedOutput) ? "Another background removal job is using this output file" : null);
+  const outputExists = staticFiles.some((file) => file.name.normalize("NFC").toLowerCase() === normalizedOutput);
+  const canSubmit = support.type === "supported" && outputError === null;
   const modelOptions = useMemo(() => makeOptions({
     items: MODELS.map((item) => ({
       id: item.name,
@@ -165,9 +158,7 @@ var VideoMattingModal = ({
   }), [cachedModels, model]);
   const audioOptions = useMemo(() => makeOptions({
     items: [
-      { id: "base", label: "Background layer" },
-      { id: "foreground", label: "Foreground layer" },
-      { id: "both", label: "Both layers" },
+      { id: "keep", label: "Keep original audio" },
       { id: "none", label: "No audio" }
     ],
     selected: audio,
@@ -187,11 +178,11 @@ var VideoMattingModal = ({
     addVideoMattingJob({
       src,
       displayName,
-      baseOutName,
-      foregroundOutName,
+      outName,
       model,
       audio,
-      videoBitrate
+      videoBitrate,
+      target
     });
     setSidebarCollapsedState({ left: null, right: "expanded" });
     persistSelectedOptionsSidebarPanel("renders");
@@ -200,23 +191,24 @@ var VideoMattingModal = ({
   }, [
     addVideoMattingJob,
     audio,
-    baseOutName,
     canSubmit,
     displayName,
-    foregroundOutName,
+    outName,
     model,
     setSelectedModal,
     setSidebarCollapsedState,
     src,
+    target,
     videoBitrate
   ]);
+  const title = `Remove background from ${displayName}`;
   return /* @__PURE__ */ jsx(DismissableModal, {
-    ariaLabel: `Track matting ${displayName}`,
+    ariaLabel: title,
     children: /* @__PURE__ */ jsxs("div", {
       style: modalStyle,
       children: [
         /* @__PURE__ */ jsx(ModalHeader, {
-          title: `Track matting ${displayName}`
+          title
         }),
         /* @__PURE__ */ jsxs("div", {
           style: container,
@@ -227,12 +219,12 @@ var VideoMattingModal = ({
             /* @__PURE__ */ jsx(Button, {
               disabled: !canSubmit,
               onClick: submit,
-              title: support.type === "unsupported" ? support.message : undefined,
+              "aria-label": support.type === "unsupported" ? support.message : undefined,
               style: {
                 ...buttonStyle,
                 backgroundColor: canSubmit ? buttonStyle.backgroundColor : BLUE_DISABLED
               },
-              children: "Separate"
+              children: "Remove background"
             })
           ]
         }),
@@ -244,17 +236,17 @@ var VideoMattingModal = ({
               children: [
                 /* @__PURE__ */ jsx(VerticalTab, {
                   autoFocus: true,
-                  onClick: () => setTab("separate"),
+                  onClick: () => setTab("remove"),
                   renderIcon: (color) => /* @__PURE__ */ jsx("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx(SeparationIcon, {
+                    children: /* @__PURE__ */ jsx(GearIcon, {
                       color,
                       style: icon
                     })
                   }),
-                  selected: tab === "separate",
+                  selected: tab === "remove",
                   style: horizontalTab,
-                  children: "Separate"
+                  children: "General"
                 }),
                 /* @__PURE__ */ jsx(VerticalTab, {
                   onClick: () => setTab("models"),
@@ -272,28 +264,18 @@ var VideoMattingModal = ({
               ]
             }),
             /* @__PURE__ */ jsxs("div", {
-              style: tab === "separate" ? panelStyle : hiddenPanel,
+              style: tab === "remove" ? panelStyle : hiddenPanel,
               className: VERTICAL_SCROLLBAR_CLASSNAME,
               children: [
                 /* @__PURE__ */ jsx(RenderModalOutputName, {
-                  ariaLabel: "Base video output file",
-                  existingOutputPath: window.remotion_publicFolderExists ? `${window.remotion_publicFolderExists}/${baseOutName}` : null,
-                  existence: baseExists,
-                  inputStyle: input,
-                  label: "Base output in public/",
-                  onValueChange: (event) => setBaseOutName(event.target.value),
-                  outName: baseOutName,
-                  validationMessage: baseError
-                }),
-                /* @__PURE__ */ jsx(RenderModalOutputName, {
-                  ariaLabel: "Foreground video output file",
-                  existingOutputPath: window.remotion_publicFolderExists ? `${window.remotion_publicFolderExists}/${foregroundOutName}` : null,
-                  existence: foregroundExists,
+                  ariaLabel: "Video output file",
+                  existingOutputPath: window.remotion_publicFolderExists ? `${window.remotion_publicFolderExists}/${outName}` : null,
+                  existence: outputExists,
                   inputStyle: input,
-                  label: "Foreground output in public/",
-                  onValueChange: (event) => setForegroundOutName(event.target.value),
-                  outName: foregroundOutName,
-                  validationMessage: foregroundError
+                  label: "Output in public/",
+                  onValueChange: (event) => setOutName(event.target.value),
+                  outName,
+                  validationMessage: outputError
                 }),
                 /* @__PURE__ */ jsx(RenderModalHr, {}),
                 /* @__PURE__ */ jsxs("div", {
@@ -308,7 +290,7 @@ var VideoMattingModal = ({
                       children: /* @__PURE__ */ jsx(Combobox, {
                         values: modelOptions,
                         selectedId: model,
-                        title: "Model",
+                        "aria-label": "Model",
                         style: controlStyle
                       })
                     })
@@ -334,7 +316,7 @@ var VideoMattingModal = ({
                       children: /* @__PURE__ */ jsx(Combobox, {
                         values: audioOptions,
                         selectedId: audio,
-                        title: "Audio",
+                        "aria-label": "Audio",
                         style: controlStyle
                       })
                     })
@@ -352,7 +334,7 @@ var VideoMattingModal = ({
                       children: /* @__PURE__ */ jsx(Combobox, {
                         values: qualityOptions,
                         selectedId: String(videoBitrate),
-                        title: "Video quality",
+                        "aria-label": "Video quality",
                         style: controlStyle
                       })
                     })

package/dist/esm/{VideoMattingQueueProcessor-t1hgm2rm.mjs → VideoMattingQueueProcessor-4tkj0f4k.mjs}

@@ -1,99 +1,142 @@
 import {
   loadModelForJob
-} from "./index-v4tr1bft.mjs";
+} from "./index-09txs1bj.mjs";
 import {
   RenderQueueContext
-} from "./index-9x6e1dq0.mjs";
+} from "./index-hqxc6tzp.mjs";
 import {
+  callApi,
+  getBrowserStudioOperations,
   writeStaticFile
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/RenderQueue/VideoMattingQueueProcessor.tsx
 import {
   canUseVideoMatting,
   disposeVideoMattingModel,
+  downloadVideoMattingModel,
   isVideoMattingModelCached,
   loadVideoMattingModel,
-  separateVideoLayers
+  VideoMattingInternals
 } from "@remotion/video-matting";
 import { useCallback, useContext, useEffect } from "react";
 var VideoMattingQueueProcessor = () => {
   const {
     markVideoMattingJobDone,
     markVideoMattingJobFailed,
+    markVideoMattingJobCancelled,
+    markVideoMattingJobSaving,
+    getAbortController,
     setProcessVideoMattingJobCallback,
     updateVideoMattingJobProgress
   } = useContext(RenderQueueContext);
   const processJob = useCallback(async (job) => {
-    let outputs = null;
+    const { signal } = getAbortController(job.id);
+    let output = null;
     let processingError = null;
     try {
+      signal.throwIfAborted();
       updateVideoMattingJobProgress(job.id, {
         detail: null,
         message: "Checking WebGPU support...",
         value: 0
       });
       const support = await canUseVideoMatting({ model: job.model });
+      signal.throwIfAborted();
       if (!support.supported) {
         throw new Error(support.detailedReason);
       }
       await loadModelForJob({
+        signal,
         model: job.model,
         progressStart: 0,
         progressSpan: 0.2,
         isModelCached: (model) => isVideoMattingModelCached({ model }),
-        loadModel: (model, onProgress) => loadVideoMattingModel({
-          model,
-          onProgress: (progress) => onProgress(progress.progress)
-        }),
+        loadModel: async (model, onProgress) => {
+          await downloadVideoMattingModel({
+            signal,
+            model,
+            onProgress: (progress) => onProgress(progress.progress)
+          });
+          await loadVideoMattingModel({ model, signal });
+        },
         updateProgress: (progress) => updateVideoMattingJobProgress(job.id, {
           ...progress,
           detail: null
         })
       });
-      outputs = await separateVideoLayers({
+      const mattingOptions = {
+        signal,
         src: job.src,
         model: job.model,
-        audio: job.audio,
         videoBitrate: job.videoBitrate,
         onProgress: (progress) => {
           updateVideoMattingJobProgress(job.id, {
             detail: progress.stage === "finalizing" ? `Processed ${progress.processedFrames} ${progress.processedFrames === 1 ? "frame" : "frames"}` : `Processed ${progress.processedFrames} ${progress.processedFrames === 1 ? "frame" : "frames"} · ${Math.round(progress.progress * 100)}%`,
-            message: progress.stage === "finalizing" ? "Finalizing video layers..." : "Separating foreground...",
+            message: progress.stage === "finalizing" ? "Finalizing video..." : "Removing background...",
             value: 0.2 + (progress.progress ?? 1) * 0.65
           });
         }
+      };
+      output = await VideoMattingInternals.removeVideoBackground({
+        ...mattingOptions,
+        audio: job.audio
       });
+      if (output === null) {
+        throw new Error("Video matting produced no output.");
+      }
+      signal.throwIfAborted();
       updateVideoMattingJobProgress(job.id, {
         detail: null,
-        message: "Saving video layers...",
+        message: "Saving video...",
         value: 0.88
       });
-      const [base, foreground] = await Promise.all([
-        outputs.base.getBlob(),
-        outputs.foreground.getBlob()
-      ]);
-      await Promise.all([
-        base.arrayBuffer().then((contents) => writeStaticFile({ contents, filePath: job.baseOutName })),
-        foreground.arrayBuffer().then((contents) => writeStaticFile({ contents, filePath: job.foregroundOutName }))
-      ]);
+      const video = await output.video.getBlob();
+      signal.throwIfAborted();
+      markVideoMattingJobSaving(job.id);
+      await video.arrayBuffer().then((contents) => writeStaticFile({ contents, filePath: job.outName }));
+      if (job.target !== null) {
+        updateVideoMattingJobProgress(job.id, {
+          detail: null,
+          message: "Replacing video source...",
+          value: 0.97
+        });
+        const browserStudioOperations = getBrowserStudioOperations();
+        const request = {
+          fileName: job.target.fileName,
+          nodePath: job.target.nodePath.nodePath,
+          src: job.outName
+        };
+        const replaceSource = browserStudioOperations?.replaceVideoSource;
+        if (browserStudioOperations && !replaceSource) {
+          throw new Error("Browser Studio cannot replace the video source.");
+        }
+        const response = replaceSource ? await replaceSource(request) : await callApi("/api/replace-video-source", request);
+        if (!response.success) {
+          throw new Error(response.reason);
+        }
+      }
     } catch (error) {
       processingError = error instanceof Error ? error : new Error(String(error));
     }
+    if (output) {
+      await Promise.allSettled([output.video.dispose()]);
+    }
     try {
-      await Promise.all([
-        outputs?.base.dispose(),
-        outputs?.foreground.dispose()
-      ]);
       await disposeVideoMattingModel({ model: job.model });
     } catch {}
-    if (processingError) {
+    if (signal.aborted) {
+      markVideoMattingJobCancelled(job.id);
+    } else if (processingError) {
       markVideoMattingJobFailed(job.id, processingError);
     } else {
       markVideoMattingJobDone(job.id);
     }
   }, [
+    getAbortController,
+    markVideoMattingJobCancelled,
+    markVideoMattingJobSaving,
     markVideoMattingJobDone,
     markVideoMattingJobFailed,
     updateVideoMattingJobProgress

package/dist/esm/{index-v4tr1bft.mjs → index-09txs1bj.mjs}

@@ -3,18 +3,23 @@ var loadModelForJob = async ({
   isModelCached,
   loadModel,
   model,
+  signal,
   progressSpan,
   progressStart,
   updateProgress
 }) => {
+  signal.throwIfAborted();
   const cached = await isModelCached(model);
+  signal.throwIfAborted();
   await loadModel(model, (progress) => {
+    signal.throwIfAborted();
     const percentage = progress === null ? "" : ` ${Math.round(progress * 100)}%`;
     updateProgress({
       message: `${cached ? "Loading" : "Downloading"} ${model}${percentage}`,
       value: progressStart + (progress ?? 0) * progressSpan
     });
   });
+  signal.throwIfAborted();
 };
 
 export { loadModelForJob };

package/dist/esm/{index-e855w59j.mjs → index-19d05w9e.mjs}

@@ -1,16 +1,14 @@
 import {
-  callApi
-} from "./index-r1gr3j3a.mjs";
-import {
+  callApi,
   getBrowserStudioOperations
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
 import {
   getStudioInteractivityEnabled
 } from "./index-5zrb1ft4.mjs";
 import {
   CURRENT_COLOR,
   CURRENT_COLOR_LOWERCASE
-} from "./index-k426ye99.mjs";
+} from "./index-3qb54r5j.mjs";
 import {
   __require,
   __toESM

package/dist/esm/index-24wge6y5.mjs

@@ -0,0 +1,102 @@
+// src/helpers/studio-css-variables.ts
+var studioCssVariables = `
+:where(:root) {
+  --remotion-studio-black: black;
+  --remotion-studio-white: white;
+  --remotion-studio-red: red;
+  --remotion-studio-transparent: transparent;
+  --remotion-studio-current-color: currentColor;
+  --remotion-studio-background: rgb(31,36,40);
+  --remotion-studio-background-transparent: rgba(31,36,40, 0);
+  --remotion-studio-input-background: #2f363d;
+  --remotion-studio-light-color: #ddd;
+  --remotion-studio-light-text: #A6A7A9;
+  --remotion-studio-ruler-color: #808080;
+  --remotion-studio-white-alpha-05: rgba(255, 255, 255, 0.05);
+  --remotion-studio-white-alpha-06: rgba(255, 255, 255, 0.06);
+  --remotion-studio-white-alpha-08: rgba(255, 255, 255, 0.08);
+  --remotion-studio-white-alpha-10: rgba(255, 255, 255, 0.1);
+  --remotion-studio-white-alpha-12: rgba(255, 255, 255, 0.12);
+  --remotion-studio-white-alpha-15: rgba(255, 255, 255, 0.15);
+  --remotion-studio-white-alpha-20: rgba(255, 255, 255, 0.2);
+  --remotion-studio-white-alpha-25: rgba(255, 255, 255, 0.25);
+  --remotion-studio-white-alpha-30: rgba(255, 255, 255, 0.3);
+  --remotion-studio-white-alpha-35: rgba(255, 255, 255, 0.35);
+  --remotion-studio-white-alpha-40: rgba(255, 255, 255, 0.4);
+  --remotion-studio-white-alpha-45: rgba(255, 255, 255, 0.45);
+  --remotion-studio-white-alpha-50: rgba(255, 255, 255, 0.5);
+  --remotion-studio-white-alpha-60: rgba(255, 255, 255, 0.6);
+  --remotion-studio-white-alpha-70: rgba(255, 255, 255, 0.7);
+  --remotion-studio-white-alpha-72: rgba(255, 255, 255, 0.72);
+  --remotion-studio-white-alpha-80: rgba(255, 255, 255, 0.8);
+  --remotion-studio-white-alpha-90: rgba(255, 255, 255, 0.9);
+  --remotion-studio-black-alpha-28: rgba(0, 0, 0, 0.28);
+  --remotion-studio-black-alpha-30: rgba(0, 0, 0, 0.3);
+  --remotion-studio-black-alpha-40: rgba(0, 0, 0, 0.4);
+  --remotion-studio-black-alpha-50: rgba(0, 0, 0, 0.5);
+  --remotion-studio-black-alpha-60: rgba(0, 0, 0, 0.6);
+  --remotion-studio-black-alpha-80: rgba(0, 0, 0, 0.8);
+  --remotion-studio-black-alpha-85: rgba(0, 0, 0, 0.85);
+  --remotion-studio-black-alpha-90: rgba(0, 0, 0, 0.9);
+  --remotion-studio-fail-color: #ff3232;
+  --remotion-studio-warning-color: #f1c40f;
+  --remotion-studio-blue: #0b84f3;
+  --remotion-studio-blue-hovered: #4da3f7;
+  --remotion-studio-blue-disabled: #284f73;
+  --remotion-studio-unselected-guide: #7e1219;
+  --remotion-studio-selected-guide: #d22d3a;
+  --remotion-studio-line-color: #363A3E;
+  --remotion-studio-timeline-track-separator: #13161B;
+  --remotion-studio-light-gray: #ccc;
+  --remotion-studio-keyboard-shortcut-key-color: #eee;
+  --remotion-studio-notification-background: #111111;
+  --remotion-studio-render-status-background: #222;
+  --remotion-studio-error-code-frame-background: #070707;
+  --remotion-studio-error-code-frame-line-background: #121212;
+  --remotion-studio-error-link-color: #58a6ff;
+  --remotion-studio-info-blue: #60a5fa;
+  --remotion-studio-server-disconnected-background: #e74c3c;
+  --remotion-studio-timeline-background-color: #15181B;
+  --remotion-studio-timeline-negative-start-background-color: #2C2F32;
+  --remotion-studio-timeline-negative-start-border-color: #414446;
+  --remotion-studio-timeline-selected-background-color: #3B3F42;
+  --remotion-studio-timeline-selected-label-background-color: #B0B0B0;
+  --remotion-studio-timeline-blue: #0b84ff;
+  --remotion-studio-timeline-playhead-color: #f02c00;
+  --remotion-studio-timeline-drop-blue-alpha-12: rgba(0, 155, 255, 0.12);
+  --remotion-studio-timeline-drop-blue-alpha-16: rgba(0, 155, 255, 0.16);
+  --remotion-studio-timeline-drop-blue-alpha-75: rgba(0, 155, 255, 0.75);
+  --remotion-studio-timeline-marquee-blue-alpha-16: rgba(70, 130, 255, 0.16);
+  --remotion-studio-timeline-marquee-blue-alpha-75: rgba(70, 130, 255, 0.75);
+  --remotion-studio-easing-selected-background: rgba(11, 132, 243, 0.18);
+  --remotion-studio-info-blue-background: rgba(59, 130, 246, 0.15);
+  --remotion-studio-color-picker-checker-background-color: var(--remotion-studio-background);
+  --remotion-studio-color-picker-hue-gradient: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+  --remotion-studio-timeline-audio-gradient: linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%);
+  --remotion-studio-timeline-video-gradient: linear-gradient(to top, #8e44ad, #9b59b6);
+  --remotion-studio-focus-color: #555;
+  --remotion-studio-color-picker-checker-color: var(--remotion-studio-white-alpha-15);
+  --remotion-studio-info-blue-border-color: rgba(59, 130, 246, 0.4);
+  --remotion-studio-black-alpha-22: rgba(0, 0, 0, 0.22);
+  --remotion-studio-font-family-error-color: #ff8a8a;
+  --remotion-studio-selected-outline-snap-color: #ff00ff;
+  --remotion-studio-prism-text-color: #d4d4d4;
+  --remotion-studio-prism-selection-background: #264f78;
+  --remotion-studio-prism-background: #1e1e1e;
+  --remotion-studio-prism-inline-color: #db4c69;
+  --remotion-studio-prism-keyword-color: #569cd6;
+  --remotion-studio-prism-variable-color: #9cdcfe;
+  --remotion-studio-prism-comment-color: #6a9955;
+  --remotion-studio-prism-number-color: #b5cea8;
+  --remotion-studio-prism-string-color: #ce9178;
+  --remotion-studio-prism-control-flow-color: #c586c0;
+  --remotion-studio-prism-function-color: #dcdcaa;
+  --remotion-studio-prism-regex-color: #d16969;
+  --remotion-studio-prism-class-name-color: #4ec9b0;
+  --remotion-studio-prism-selector-color: #d7ba7d;
+  --remotion-studio-prism-line-highlight-background: #f7ebc6;
+  --remotion-studio-prism-line-highlight-border-color: #f7d87c;
+}
+`;
+
+export { studioCssVariables };