@remotion/studio 4.0.527 → 4.0.529

package/dist/esm/index.mjs

@@ -3,7 +3,7 @@ import {
   play,
   seek,
   shutDownStudio
-} from "./index-n5gmcvhz.mjs";
+} from "./index-5ycb9e9q.mjs";
 import {
   CodingAgentIcon,
   DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME,
@@ -21,14 +21,13 @@ import {
   visualControlRef,
   visualControlStore,
   watchPublicFolder
-} from "./index-e855w59j.mjs";
-import"./index-r1gr3j3a.mjs";
+} from "./index-19d05w9e.mjs";
 import {
   getBrowserStudioOperations,
   writeStaticFile
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
 import"./index-5zrb1ft4.mjs";
-import"./index-k426ye99.mjs";
+import"./index-3qb54r5j.mjs";
 import {
   __require,
   __toESM

package/dist/esm/internals.mjs

@@ -1,19 +1,19 @@
 import {
   Studio
-} from "./index-4zen9prq.mjs";
-import"./index-vxwg66ar.mjs";
-import"./index-s7qa3xbw.mjs";
-import"./index-ppspzgn9.mjs";
-import"./index-21hxsfaa.mjs";
-import"./index-9x6e1dq0.mjs";
-import"./index-n5gmcvhz.mjs";
-import"./index-e855w59j.mjs";
-import"./index-r1gr3j3a.mjs";
-import"./index-cw0pnpg5.mjs";
-import"./index-5t2dwxsk.mjs";
-import"./index-9xxg6218.mjs";
+} from "./index-x7kg7jqv.mjs";
+import"./index-r9bj4tta.mjs";
+import"./index-cakcjjy2.mjs";
+import"./index-m2a95v3p.mjs";
+import"./index-vtr5qzam.mjs";
+import"./index-hqxc6tzp.mjs";
+import"./index-5ycb9e9q.mjs";
+import"./index-19d05w9e.mjs";
+import"./index-dfy1t576.mjs";
+import"./index-24wge6y5.mjs";
+import"./index-m01zjph7.mjs";
+import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
-import"./index-k426ye99.mjs";
+import"./index-3qb54r5j.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/internals.ts

package/dist/esm/previewEntry.mjs

@@ -5,28 +5,28 @@ import {
   markErrorMessageAsLoggedByServer,
   setErrorsRef,
   startReportingRuntimeErrors
-} from "./index-4zen9prq.mjs";
-import"./index-vxwg66ar.mjs";
-import"./index-s7qa3xbw.mjs";
+} from "./index-x7kg7jqv.mjs";
+import"./index-r9bj4tta.mjs";
+import"./index-cakcjjy2.mjs";
 import {
   reloadUrl,
   subscribeToPreviewServerEvents
-} from "./index-ppspzgn9.mjs";
-import"./index-21hxsfaa.mjs";
-import"./index-9x6e1dq0.mjs";
-import"./index-n5gmcvhz.mjs";
-import"./index-e855w59j.mjs";
-import"./index-r1gr3j3a.mjs";
-import"./index-cw0pnpg5.mjs";
-import"./index-5t2dwxsk.mjs";
-import"./index-9xxg6218.mjs";
+} from "./index-m2a95v3p.mjs";
+import"./index-vtr5qzam.mjs";
+import"./index-hqxc6tzp.mjs";
+import"./index-5ycb9e9q.mjs";
+import"./index-19d05w9e.mjs";
+import"./index-dfy1t576.mjs";
+import {
+  studioCssVariables
+} from "./index-24wge6y5.mjs";
+import"./index-m01zjph7.mjs";
+import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BACKGROUND_HEX,
-  HOT_MIDDLEWARE_ERROR_STYLE,
-  HOT_MIDDLEWARE_WARNING_STYLE,
   WHITE
-} from "./index-k426ye99.mjs";
+} from "./index-3qb54r5j.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/previewEntry.tsx
@@ -328,6 +328,8 @@ var processUpdate = function(hash, moduleMap, options) {
 };
 
 // src/hot-middleware-client/client.ts
+var HOT_MIDDLEWARE_ERROR_STYLE = "color: #ff0000;";
+var HOT_MIDDLEWARE_WARNING_STYLE = "color: #999933;";
 function createReporter() {
   const styles = {
     errors: HOT_MIDDLEWARE_ERROR_STYLE,
@@ -438,6 +440,7 @@ var enableHotMiddleware = () => {
 // src/previewEntry.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 installFiberCommitOrderObserver(window);
+Internals3.CSSUtils.injectCSS(studioCssVariables);
 Internals3.CSSUtils.injectCSS(Internals3.CSSUtils.makeDefaultPreviewCSS(null, BACKGROUND_HEX));
 if (!window.__remotionOverlayStarted) {
   window.__remotionOverlayStarted = true;

package/dist/esm/renderEntry.mjs

@@ -1,8 +1,11 @@
+import {
+  studioCssVariables
+} from "./index-24wge6y5.mjs";
 import {
   BACKGROUND_HEX,
   TRANSPARENT,
   WHITE
-} from "./index-k426ye99.mjs";
+} from "./index-3qb54r5j.mjs";
 import {
   __require,
   __toESM
@@ -30,6 +33,7 @@ var setBundleMode = (state) => {
 var getBundleMode = () => {
   return currentBundleMode;
 };
+Internals.CSSUtils.injectCSS(studioCssVariables);
 Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(null, BACKGROUND_HEX));
 var getCanSerializeDefaultProps = (object) => {
   try {

package/dist/helpers/calculate-timeline.d.ts

@@ -1 +1,5 @@
-export { calculateTimeline } from '@remotion/canvas';
+export declare const calculateTimeline: ({ sequences, overrideIdsToNodePaths, compositions, }: {
+    sequences: import("remotion").TSequence[];
+    overrideIdsToNodePaths: import("remotion").OverrideIdToNodePaths;
+    compositions?: readonly import("remotion").AnyComposition[] | undefined;
+}) => import("@remotion/canvas").TimelineTrackData[];

package/dist/helpers/calculate-timeline.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateTimeline = void 0;
 const canvas_1 = require("@remotion/canvas");
-Object.defineProperty(exports, "calculateTimeline", { enumerable: true, get: function () { return canvas_1.calculateTimeline; } });
+({ calculateTimeline: exports.calculateTimeline } = canvas_1.CanvasInternals);

package/dist/helpers/checkerboard-background.d.ts

@@ -1,4 +1,4 @@
 export declare const getCheckerboardBackgroundSize: (size: number) => string;
 export declare const getCheckerboardBackgroundPos: (size: number) => string;
-export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "black" | "white";
-export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n     linear-gradient(\n        45deg,\n        rgba(0, 0, 0, 0.1) 25%,\n        transparent 25%\n      ),\n      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),\n      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)\n    " | undefined;
+export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "var(--remotion-studio-background)" | "var(--remotion-studio-black)";
+export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n     linear-gradient(\n        45deg,\n        var(--remotion-studio-white-alpha-15) 25%,\n        var(--remotion-studio-transparent) 25%\n      ),\n      linear-gradient(135deg, var(--remotion-studio-white-alpha-15) 25%, var(--remotion-studio-transparent) 25%),\n      linear-gradient(45deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-white-alpha-15) 75%),\n      linear-gradient(135deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-white-alpha-15) 75%)\n    " | undefined;

package/dist/helpers/checkerboard-background.js

@@ -8,7 +8,7 @@ const getCheckerboardBackgroundPos = (size) => `0 0, ${size / 2}px 0, ${size / 2
 exports.getCheckerboardBackgroundPos = getCheckerboardBackgroundPos;
 const checkerboardBackgroundColor = (checkerboard) => {
     if (checkerboard) {
-        return colors_1.WHITE;
+        return colors_1.BACKGROUND;
     }
     return colors_1.BLACK;
 };

package/dist/helpers/colors.d.ts

@@ -1,118 +1,137 @@
-export declare const BLACK = "black";
-export declare const WHITE = "white";
-export declare const RED = "red";
-export declare const TRANSPARENT = "transparent";
-export declare const CURRENT_COLOR = "currentColor";
-export declare const CURRENT_COLOR_LOWERCASE = "currentcolor";
-export declare const WHITE_HEX = "#fff";
-export declare const WHITE_FULL_HEX = "#ffffff";
-export declare const BLACK_HEX = "#000";
-export declare const BLACK_FULL_HEX = "#000000";
-export declare const BACKGROUND = "rgb(31,36,40)";
-export declare const BACKGROUND_HEX = "#1f2428";
-export declare const BACKGROUND__TRANSPARENT = "rgba(31,36,40, 0)";
-export declare const INPUT_BACKGROUND = "#2f363d";
-export declare const LIGHT_COLOR = "#ddd";
-export declare const SELECTED_BACKGROUND = "hsla(0, 0%, 100%, 0.15)";
-export declare const LIGHT_TEXT = "#A6A7A9";
-export declare const RULER_COLOR = "#808080";
-export declare const WHITE_ALPHA_05 = "rgba(255, 255, 255, 0.05)";
-export declare const WHITE_ALPHA_06 = "rgba(255, 255, 255, 0.06)";
-export declare const WHITE_ALPHA_08 = "rgba(255, 255, 255, 0.08)";
-export declare const WHITE_ALPHA_10 = "rgba(255, 255, 255, 0.1)";
-export declare const WHITE_ALPHA_12 = "rgba(255, 255, 255, 0.12)";
-export declare const WHITE_ALPHA_15 = "rgba(255, 255, 255, 0.15)";
-export declare const WHITE_ALPHA_20 = "rgba(255, 255, 255, 0.2)";
-export declare const WHITE_ALPHA_25 = "rgba(255, 255, 255, 0.25)";
-export declare const WHITE_ALPHA_30 = "rgba(255, 255, 255, 0.3)";
-export declare const WHITE_ALPHA_35 = "rgba(255, 255, 255, 0.35)";
-export declare const WHITE_ALPHA_40 = "rgba(255, 255, 255, 0.4)";
-export declare const WHITE_ALPHA_45 = "rgba(255, 255, 255, 0.45)";
-export declare const WHITE_ALPHA_50 = "rgba(255, 255, 255, 0.5)";
-export declare const WHITE_ALPHA_60 = "rgba(255, 255, 255, 0.6)";
-export declare const WHITE_ALPHA_70 = "rgba(255, 255, 255, 0.7)";
-export declare const WHITE_ALPHA_72 = "rgba(255, 255, 255, 0.72)";
-export declare const WHITE_ALPHA_80 = "rgba(255, 255, 255, 0.8)";
-export declare const WHITE_ALPHA_90 = "rgba(255, 255, 255, 0.9)";
-export declare const BLACK_ALPHA_10 = "rgba(0, 0, 0, 0.1)";
-export declare const BLACK_ALPHA_28 = "rgba(0, 0, 0, 0.28)";
-export declare const BLACK_ALPHA_30 = "rgba(0, 0, 0, 0.3)";
-export declare const BLACK_ALPHA_40 = "rgba(0, 0, 0, 0.4)";
-export declare const BLACK_ALPHA_50 = "rgba(0, 0, 0, 0.5)";
-export declare const BLACK_ALPHA_60 = "rgba(0, 0, 0, 0.6)";
-export declare const BLACK_ALPHA_80 = "rgba(0, 0, 0, 0.8)";
-export declare const BLACK_ALPHA_85 = "rgba(0, 0, 0, 0.85)";
-export declare const BLACK_ALPHA_90 = "rgba(0, 0, 0, 0.9)";
-export declare const BLACK_OPAQUE = "rgba(0, 0, 0, 1)";
-export declare const FAIL_COLOR = "#ff3232";
-export declare const WARNING_COLOR = "#f1c40f";
-export declare const BLUE = "#0b84f3";
-export declare const BLUE_HOVERED = "#4da3f7";
-export declare const BLUE_DISABLED = "#284f73";
-export declare const UNSELECTED_GUIDE = "#7e1219";
-export declare const SELECTED_GUIDE = "#d22d3a";
-export declare const LINE_COLOR = "#363A3E";
-export declare const TIMELINE_TRACK_SEPARATOR = "#13161B";
-export declare const LIGHT_GRAY = "#ccc";
-export declare const KEYBOARD_SHORTCUT_KEY_COLOR = "#eee";
-export declare const NOTIFICATION_BACKGROUND = "#111111";
-export declare const RENDER_STATUS_BACKGROUND = "#222";
-export declare const ERROR_CODE_FRAME_BACKGROUND = "#070707";
-export declare const ERROR_CODE_FRAME_LINE_BACKGROUND = "#121212";
-export declare const ERROR_LINK_COLOR = "#58a6ff";
-export declare const INFO_BLUE = "#60a5fa";
-export declare const SERVER_DISCONNECTED_BACKGROUND = "#e74c3c";
-export declare const TIMELINE_BACKGROUND_COLOR = "#15181B";
-export declare const TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = "#2C2F32";
-export declare const TIMELINE_NEGATIVE_START_BORDER_COLOR = "#414446";
-export declare const TIMELINE_SELECTED_BACKGROUND_COLOR = "#3B3F42";
-export declare const TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = "#B0B0B0";
-export declare const TIMELINE_BLUE = "#0b84ff";
-export declare const TIMELINE_PLAYHEAD_COLOR = "#f02c00";
-export declare const TIMELINE_DROP_BLUE_ALPHA_12 = "rgba(0, 155, 255, 0.12)";
-export declare const TIMELINE_DROP_BLUE_ALPHA_16 = "rgba(0, 155, 255, 0.16)";
-export declare const TIMELINE_DROP_BLUE_ALPHA_75 = "rgba(0, 155, 255, 0.75)";
-export declare const TIMELINE_MARQUEE_BLUE_ALPHA_16 = "rgba(70, 130, 255, 0.16)";
-export declare const TIMELINE_MARQUEE_BLUE_ALPHA_75 = "rgba(70, 130, 255, 0.75)";
-export declare const EASING_SELECTED_BACKGROUND = "rgba(11, 132, 243, 0.18)";
-export declare const INFO_BLUE_BACKGROUND = "rgba(59, 130, 246, 0.15)";
-export declare const BORDER_BLACK = "1px solid #000";
-export declare const BORDER_WHITE = "1px solid #fff";
-export declare const BORDER_WHITE_2PX = "2px solid #fff";
-export declare const BORDER_CURRENT_COLOR = "1px solid currentColor";
-export declare const BORDER_TRANSPARENT_2PX = "2px solid transparent";
-export declare const BORDER_BLACK_ALPHA_50 = "1px solid rgba(0, 0, 0, 0.5)";
-export declare const BORDER_BLACK_ALPHA_60 = "1px solid rgba(0, 0, 0, 0.6)";
-export declare const BORDER_WHITE_ALPHA_12 = "1px solid rgba(255, 255, 255, 0.12)";
-export declare const BORDER_WHITE_ALPHA_20 = "1px solid rgba(255, 255, 255, 0.2)";
-export declare const BORDER_INFO_BLUE = "1px solid rgba(59, 130, 246, 0.4)";
-export declare const BORDER_TIMELINE_DROP_BLUE = "1px solid rgba(0, 155, 255, 0.75)";
-export declare const BORDER_TIMELINE_MARQUEE_BLUE = "1px solid rgba(70, 130, 255, 0.75)";
-export declare const SHADOW_BLACK = "0 0 4px black";
-export declare const SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM = "0 2px 8px rgba(0, 0, 0, 0.5)";
-export declare const SHADOW_BLACK_ALPHA_50_TOWARDS_TOP = "0 -2px 8px rgba(0, 0, 0, 0.5)";
-export declare const NOTIFICATION_SHADOW = "0 2px 3px rgba(0, 0, 0, 1)";
-export declare const SERVER_DISCONNECTED_SHADOW = "0 2px 4px rgba(0, 0, 0, 0.4)";
-export declare const COLOR_PICKER_POPUP_SHADOW = "0 4px 16px rgba(0, 0, 0, 0.5)";
-export declare const COLOR_PICKER_HANDLE_SHADOW = "0 0 0 1px rgba(0, 0, 0, 0.6)";
-export declare const NOTIFICATION_BORDER = "0.25px solid rgba(255, 255, 255, 0.1)";
-export declare const HOT_MIDDLEWARE_ERROR_STYLE = "color: #ff0000;";
-export declare const HOT_MIDDLEWARE_WARNING_STYLE = "color: #999933;";
+export declare const BLACK = "var(--remotion-studio-black)";
+export declare const WHITE = "var(--remotion-studio-white)";
+export declare const RED = "var(--remotion-studio-red)";
+export declare const TRANSPARENT = "var(--remotion-studio-transparent)";
+export declare const CURRENT_COLOR = "var(--remotion-studio-current-color)";
+export declare const CURRENT_COLOR_LOWERCASE = "var(--remotion-studio-current-color)";
+export declare const WHITE_HEX = "var(--remotion-studio-white)";
+export declare const WHITE_FULL_HEX = "var(--remotion-studio-white)";
+export declare const BLACK_HEX = "var(--remotion-studio-black)";
+export declare const BLACK_FULL_HEX = "var(--remotion-studio-black)";
+export declare const BACKGROUND = "var(--remotion-studio-background)";
+export declare const BACKGROUND_HEX = "var(--remotion-studio-background)";
+export declare const BACKGROUND__TRANSPARENT = "var(--remotion-studio-background-transparent)";
+export declare const INPUT_BACKGROUND = "var(--remotion-studio-input-background)";
+export declare const LIGHT_COLOR = "var(--remotion-studio-light-color)";
+export declare const SELECTED_BACKGROUND = "var(--remotion-studio-white-alpha-15)";
+export declare const LIGHT_TEXT = "var(--remotion-studio-light-text)";
+export declare const RULER_COLOR = "var(--remotion-studio-ruler-color)";
+export declare const WHITE_ALPHA_05 = "var(--remotion-studio-white-alpha-05)";
+export declare const WHITE_ALPHA_06 = "var(--remotion-studio-white-alpha-06)";
+export declare const WHITE_ALPHA_08 = "var(--remotion-studio-white-alpha-08)";
+export declare const WHITE_ALPHA_10 = "var(--remotion-studio-white-alpha-10)";
+export declare const WHITE_ALPHA_12 = "var(--remotion-studio-white-alpha-12)";
+export declare const WHITE_ALPHA_15 = "var(--remotion-studio-white-alpha-15)";
+export declare const WHITE_ALPHA_20 = "var(--remotion-studio-white-alpha-20)";
+export declare const WHITE_ALPHA_25 = "var(--remotion-studio-white-alpha-25)";
+export declare const WHITE_ALPHA_30 = "var(--remotion-studio-white-alpha-30)";
+export declare const WHITE_ALPHA_35 = "var(--remotion-studio-white-alpha-35)";
+export declare const WHITE_ALPHA_40 = "var(--remotion-studio-white-alpha-40)";
+export declare const WHITE_ALPHA_45 = "var(--remotion-studio-white-alpha-45)";
+export declare const WHITE_ALPHA_50 = "var(--remotion-studio-white-alpha-50)";
+export declare const WHITE_ALPHA_60 = "var(--remotion-studio-white-alpha-60)";
+export declare const WHITE_ALPHA_70 = "var(--remotion-studio-white-alpha-70)";
+export declare const WHITE_ALPHA_72 = "var(--remotion-studio-white-alpha-72)";
+export declare const WHITE_ALPHA_80 = "var(--remotion-studio-white-alpha-80)";
+export declare const WHITE_ALPHA_90 = "var(--remotion-studio-white-alpha-90)";
+export declare const BLACK_ALPHA_28 = "var(--remotion-studio-black-alpha-28)";
+export declare const BLACK_ALPHA_30 = "var(--remotion-studio-black-alpha-30)";
+export declare const BLACK_ALPHA_40 = "var(--remotion-studio-black-alpha-40)";
+export declare const BLACK_ALPHA_50 = "var(--remotion-studio-black-alpha-50)";
+export declare const BLACK_ALPHA_60 = "var(--remotion-studio-black-alpha-60)";
+export declare const BLACK_ALPHA_80 = "var(--remotion-studio-black-alpha-80)";
+export declare const BLACK_ALPHA_85 = "var(--remotion-studio-black-alpha-85)";
+export declare const BLACK_ALPHA_90 = "var(--remotion-studio-black-alpha-90)";
+export declare const BLACK_OPAQUE = "var(--remotion-studio-black)";
+export declare const FAIL_COLOR = "var(--remotion-studio-fail-color)";
+export declare const WARNING_COLOR = "var(--remotion-studio-warning-color)";
+export declare const BLUE = "var(--remotion-studio-blue)";
+export declare const BLUE_HOVERED = "var(--remotion-studio-blue-hovered)";
+export declare const BLUE_DISABLED = "var(--remotion-studio-blue-disabled)";
+export declare const UNSELECTED_GUIDE = "var(--remotion-studio-unselected-guide)";
+export declare const SELECTED_GUIDE = "var(--remotion-studio-selected-guide)";
+export declare const LINE_COLOR = "var(--remotion-studio-line-color)";
+export declare const TIMELINE_TRACK_SEPARATOR = "var(--remotion-studio-timeline-track-separator)";
+export declare const LIGHT_GRAY = "var(--remotion-studio-light-gray)";
+export declare const KEYBOARD_SHORTCUT_KEY_COLOR = "var(--remotion-studio-keyboard-shortcut-key-color)";
+export declare const NOTIFICATION_BACKGROUND = "var(--remotion-studio-notification-background)";
+export declare const RENDER_STATUS_BACKGROUND = "var(--remotion-studio-render-status-background)";
+export declare const ERROR_CODE_FRAME_BACKGROUND = "var(--remotion-studio-error-code-frame-background)";
+export declare const ERROR_CODE_FRAME_LINE_BACKGROUND = "var(--remotion-studio-error-code-frame-line-background)";
+export declare const ERROR_LINK_COLOR = "var(--remotion-studio-error-link-color)";
+export declare const INFO_BLUE = "var(--remotion-studio-info-blue)";
+export declare const SERVER_DISCONNECTED_BACKGROUND = "var(--remotion-studio-server-disconnected-background)";
+export declare const TIMELINE_BACKGROUND_COLOR = "var(--remotion-studio-timeline-background-color)";
+export declare const TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = "var(--remotion-studio-timeline-negative-start-background-color)";
+export declare const TIMELINE_NEGATIVE_START_BORDER_COLOR = "var(--remotion-studio-timeline-negative-start-border-color)";
+export declare const TIMELINE_SELECTED_BACKGROUND_COLOR = "var(--remotion-studio-timeline-selected-background-color)";
+export declare const TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = "var(--remotion-studio-timeline-selected-label-background-color)";
+export declare const TIMELINE_BLUE = "var(--remotion-studio-timeline-blue)";
+export declare const TIMELINE_PLAYHEAD_COLOR = "var(--remotion-studio-timeline-playhead-color)";
+export declare const TIMELINE_DROP_BLUE_ALPHA_12 = "var(--remotion-studio-timeline-drop-blue-alpha-12)";
+export declare const TIMELINE_DROP_BLUE_ALPHA_16 = "var(--remotion-studio-timeline-drop-blue-alpha-16)";
+export declare const TIMELINE_DROP_BLUE_ALPHA_75 = "var(--remotion-studio-timeline-drop-blue-alpha-75)";
+export declare const TIMELINE_MARQUEE_BLUE_ALPHA_16 = "var(--remotion-studio-timeline-marquee-blue-alpha-16)";
+export declare const TIMELINE_MARQUEE_BLUE_ALPHA_75 = "var(--remotion-studio-timeline-marquee-blue-alpha-75)";
+export declare const EASING_SELECTED_BACKGROUND = "var(--remotion-studio-easing-selected-background)";
+export declare const INFO_BLUE_BACKGROUND = "var(--remotion-studio-info-blue-background)";
+export declare const FOCUS_COLOR = "var(--remotion-studio-focus-color)";
+export declare const COLOR_PICKER_CHECKER_COLOR = "var(--remotion-studio-color-picker-checker-color)";
+export declare const INFO_BLUE_BORDER_COLOR = "var(--remotion-studio-info-blue-border-color)";
+export declare const BLACK_ALPHA_22 = "var(--remotion-studio-black-alpha-22)";
+export declare const FONT_FAMILY_ERROR_COLOR = "var(--remotion-studio-font-family-error-color)";
+export declare const SELECTED_OUTLINE_SNAP_COLOR = "var(--remotion-studio-selected-outline-snap-color)";
+export declare const PRISM_TEXT_COLOR = "var(--remotion-studio-prism-text-color)";
+export declare const PRISM_SELECTION_BACKGROUND = "var(--remotion-studio-prism-selection-background)";
+export declare const PRISM_BACKGROUND = "var(--remotion-studio-prism-background)";
+export declare const PRISM_INLINE_COLOR = "var(--remotion-studio-prism-inline-color)";
+export declare const PRISM_KEYWORD_COLOR = "var(--remotion-studio-prism-keyword-color)";
+export declare const PRISM_VARIABLE_COLOR = "var(--remotion-studio-prism-variable-color)";
+export declare const PRISM_COMMENT_COLOR = "var(--remotion-studio-prism-comment-color)";
+export declare const PRISM_NUMBER_COLOR = "var(--remotion-studio-prism-number-color)";
+export declare const PRISM_STRING_COLOR = "var(--remotion-studio-prism-string-color)";
+export declare const PRISM_CONTROL_FLOW_COLOR = "var(--remotion-studio-prism-control-flow-color)";
+export declare const PRISM_FUNCTION_COLOR = "var(--remotion-studio-prism-function-color)";
+export declare const PRISM_REGEX_COLOR = "var(--remotion-studio-prism-regex-color)";
+export declare const PRISM_CLASS_NAME_COLOR = "var(--remotion-studio-prism-class-name-color)";
+export declare const PRISM_SELECTOR_COLOR = "var(--remotion-studio-prism-selector-color)";
+export declare const PRISM_LINE_HIGHLIGHT_BACKGROUND = "var(--remotion-studio-prism-line-highlight-background)";
+export declare const PRISM_LINE_HIGHLIGHT_BORDER_COLOR = "var(--remotion-studio-prism-line-highlight-border-color)";
+export declare const BORDER_BLACK = "1px solid var(--remotion-studio-black)";
+export declare const BORDER_WHITE = "1px solid var(--remotion-studio-white)";
+export declare const BORDER_WHITE_2PX = "2px solid var(--remotion-studio-white)";
+export declare const BORDER_CURRENT_COLOR = "1px solid var(--remotion-studio-current-color)";
+export declare const BORDER_TRANSPARENT_2PX = "2px solid var(--remotion-studio-transparent)";
+export declare const BORDER_BLACK_ALPHA_50 = "1px solid var(--remotion-studio-black-alpha-50)";
+export declare const BORDER_BLACK_ALPHA_60 = "1px solid var(--remotion-studio-black-alpha-60)";
+export declare const BORDER_WHITE_ALPHA_12 = "1px solid var(--remotion-studio-white-alpha-12)";
+export declare const BORDER_WHITE_ALPHA_20 = "1px solid var(--remotion-studio-white-alpha-20)";
+export declare const BORDER_INFO_BLUE = "1px solid var(--remotion-studio-info-blue-border-color)";
+export declare const BORDER_TIMELINE_DROP_BLUE = "1px solid var(--remotion-studio-timeline-drop-blue-alpha-75)";
+export declare const BORDER_TIMELINE_MARQUEE_BLUE = "1px solid var(--remotion-studio-timeline-marquee-blue-alpha-75)";
+export declare const SHADOW_BLACK = "0 0 4px var(--remotion-studio-black)";
+export declare const SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM = "0 2px 8px var(--remotion-studio-black-alpha-50)";
+export declare const SHADOW_BLACK_ALPHA_50_TOWARDS_TOP = "0 -2px 8px var(--remotion-studio-black-alpha-50)";
+export declare const NOTIFICATION_SHADOW = "0 2px 3px var(--remotion-studio-black)";
+export declare const SERVER_DISCONNECTED_SHADOW = "0 2px 4px var(--remotion-studio-black-alpha-40)";
+export declare const COLOR_PICKER_POPUP_SHADOW = "0 4px 16px var(--remotion-studio-black-alpha-50)";
+export declare const COLOR_PICKER_HANDLE_SHADOW = "0 0 0 1px var(--remotion-studio-black-alpha-60)";
+export declare const NOTIFICATION_BORDER = "0.25px solid var(--remotion-studio-white-alpha-10)";
 export declare const FOCUS_BOX_SHADOW: string;
-export declare const CHECKERBOARD_BACKGROUND_IMAGE = "\n     linear-gradient(\n        45deg,\n        rgba(0, 0, 0, 0.1) 25%,\n        transparent 25%\n      ),\n      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),\n      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)\n    ";
+export declare const CHECKERBOARD_BACKGROUND_IMAGE = "\n     linear-gradient(\n        45deg,\n        var(--remotion-studio-white-alpha-15) 25%,\n        var(--remotion-studio-transparent) 25%\n      ),\n      linear-gradient(135deg, var(--remotion-studio-white-alpha-15) 25%, var(--remotion-studio-transparent) 25%),\n      linear-gradient(45deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-white-alpha-15) 75%),\n      linear-gradient(135deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-white-alpha-15) 75%)\n    ";
 export declare const COLOR_PICKER_CHECKER_BACKGROUND_IMAGE: string;
-export declare const COLOR_PICKER_CHECKER_BACKGROUND_COLOR = "#444";
-export declare const COLOR_PICKER_SATURATION_VALUE_GRADIENT = "linear-gradient(to right, #fff, transparent)";
-export declare const COLOR_PICKER_SATURATION_BLACK_GRADIENT = "linear-gradient(to top, #000, transparent)";
-export declare const COLOR_PICKER_ALPHA_TRANSPARENT = "rgba(0, 0, 0, 0)";
-export declare const COLOR_PICKER_HUE_GRADIENT = "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)";
-export declare const ERROR_MESSAGE_MASK_IMAGE = "linear-gradient(to bottom, white 60%, transparent)";
-export declare const SELECTED_OUTLINE_DROP_SHADOW = "drop-shadow(0 0 1px rgba(255, 255, 255, 0.2))";
-export declare const SELECTED_OUTLINE_UV_DROP_SHADOW = "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28))";
+export declare const COLOR_PICKER_CHECKER_BACKGROUND_COLOR = "var(--remotion-studio-color-picker-checker-background-color)";
+export declare const COLOR_PICKER_SATURATION_VALUE_GRADIENT = "linear-gradient(to right, var(--remotion-studio-white), var(--remotion-studio-transparent))";
+export declare const COLOR_PICKER_SATURATION_BLACK_GRADIENT = "linear-gradient(to top, var(--remotion-studio-black), var(--remotion-studio-transparent))";
+export declare const COLOR_PICKER_ALPHA_TRANSPARENT = "var(--remotion-studio-transparent)";
+export declare const COLOR_PICKER_HUE_GRADIENT = "var(--remotion-studio-color-picker-hue-gradient)";
+export declare const ERROR_MESSAGE_MASK_IMAGE = "linear-gradient(to bottom, var(--remotion-studio-white) 60%, var(--remotion-studio-transparent))";
+export declare const SELECTED_OUTLINE_DROP_SHADOW = "drop-shadow(0 0 1px var(--remotion-studio-white-alpha-20))";
+export declare const SELECTED_OUTLINE_UV_DROP_SHADOW = "drop-shadow(0 1px 2px var(--remotion-studio-black-alpha-28))";
 export declare const LOOPED_INDICATOR_DROP_SHADOW: string;
-export declare const TIMELINE_AUDIO_GRADIENT = "linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)";
-export declare const TIMELINE_VIDEO_GRADIENT = "linear-gradient(to top, #8e44ad, #9b59b6)";
+export declare const TIMELINE_AUDIO_GRADIENT = "var(--remotion-studio-timeline-audio-gradient)";
+export declare const TIMELINE_VIDEO_GRADIENT = "var(--remotion-studio-timeline-video-gradient)";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)" | "transparent";
+}) => "var(--remotion-studio-transparent)" | "var(--remotion-studio-white-alpha-06)" | "var(--remotion-studio-white-alpha-15)" | "var(--remotion-studio-white-alpha-25)";