@remotion/studio 4.0.527 → 4.0.528

package/dist/helpers/colors.d.ts

@@ -1,118 +1,138 @@
-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_10 = "var(--remotion-studio-black-alpha-10)";
+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-black-alpha-10) 25%,\n        var(--remotion-studio-transparent) 25%\n      ),\n      linear-gradient(135deg, var(--remotion-studio-black-alpha-10) 25%, var(--remotion-studio-transparent) 25%),\n      linear-gradient(45deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-black-alpha-10) 75%),\n      linear-gradient(135deg, var(--remotion-studio-transparent) 75%, var(--remotion-studio-black-alpha-10) 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)";

package/dist/helpers/colors.js

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

package/dist/helpers/create-folder-tree.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.sortFolderTreeAlphabetically = exports.createFolderTree = exports.getKeysToExpand = exports.splitParentIntoNameAndParent = exports.buildAssetFolderStructure = void 0;
 const canvas_1 = require("@remotion/canvas");
 const persist_open_folders_1 = require("./persist-open-folders");
+const { sortItemsByCommitOrder } = canvas_1.CanvasInternals;
 const buildAssetFolderStructure = (files, parentFolderName, foldersExpanded) => {
     const notInFolder = files.filter((f) => !f.name.includes('/'));
     const inFolder = files.filter((f) => f.name.includes('/'));
@@ -154,7 +155,7 @@ const createFolderTree = (comps, folders, foldersExpanded) => {
         list.push(toPush);
     }
     const sortTreeItems = (treeItems) => {
-        return (0, canvas_1.sortItemsByCommitOrder)(treeItems, (item) => item.type === 'folder' ? item.folder.order : item.composition.order).map((item) => {
+        return sortItemsByCommitOrder(treeItems, (item) => item.type === 'folder' ? item.folder.order : item.composition.order).map((item) => {
             if (item.type === 'composition') {
                 return item;
             }

package/dist/helpers/editor-guide-selection.d.ts

@@ -21,7 +21,7 @@ export declare const isGuidePointerUpAClick: ({ pointerDownPosition, guideId, cl
 export declare const getEditorGuideColor: ({ selected, active, }: {
     readonly selected: boolean;
     readonly active: boolean;
-}) => "#0b84f3" | "#7e1219" | "#d22d3a";
+}) => "var(--remotion-studio-blue)" | "var(--remotion-studio-selected-guide)" | "var(--remotion-studio-unselected-guide)";
 export declare const getRulerGuideHighlight: ({ guidesList, selectedItems, hoveredGuideId, draggingGuideId, }: {
     readonly guidesList: readonly Guide[];
     readonly selectedItems: readonly SelectedTimelineItem[];