@remotion/studio 4.0.527 → 4.0.529

package/dist/helpers/colors.js

@@ -1,89 +1,112 @@
 "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.BLUE_DISABLED = 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.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.BORDER_BLACK = 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 = 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 = 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_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 +116,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,36 +127,34 @@ 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,
-        ${exports.BLACK_ALPHA_10} 25%,
+        ${exports.WHITE_ALPHA_15} 25%,
         ${exports.TRANSPARENT} 25%
       ),
-      linear-gradient(135deg, ${exports.BLACK_ALPHA_10} 25%, ${exports.TRANSPARENT} 25%),
-      linear-gradient(45deg, ${exports.TRANSPARENT} 75%, ${exports.BLACK_ALPHA_10} 75%),
-      linear-gradient(135deg, ${exports.TRANSPARENT} 75%, ${exports.BLACK_ALPHA_10} 75%)
+      linear-gradient(135deg, ${exports.WHITE_ALPHA_15} 25%, ${exports.TRANSPARENT} 25%),
+      linear-gradient(45deg, ${exports.TRANSPARENT} 75%, ${exports.WHITE_ALPHA_15} 75%),
+      linear-gradient(135deg, ${exports.TRANSPARENT} 75%, ${exports.WHITE_ALPHA_15} 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[];

package/dist/helpers/editor-ruler.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getRulerScaleRange = exports.getRulerPoints = exports.drawMarkingOnRulerCanvas = void 0;
 const editor_rulers_1 = require("../state/editor-rulers");
 const colors_1 = require("./colors");
+const resolve_studio_color_1 = require("./resolve-studio-color");
+const studio_pixel_ratio_1 = require("./studio-pixel-ratio");
 const drawLabel = ({ orientation, context, label, originDistance, color, }) => {
     context.fillStyle = color;
     if (orientation === 'horizontal') {
@@ -14,22 +16,25 @@ const drawLabel = ({ orientation, context, label, originDistance, color, }) => {
         context.rotate(Math.PI / 2);
     }
 };
-const drawGradient = ({ orientation, context, originDistance, canvasHeight, canvasWidth, }) => {
+const drawGradient = ({ orientation, context, computedStyle, originDistance, canvasHeight, canvasWidth, }) => {
     const size = 250;
     const startX = orientation === 'horizontal' ? originDistance - size / 2 : 0;
     const startY = orientation === 'horizontal' ? 0 : originDistance - size / 2;
     const endX = orientation === 'horizontal' ? originDistance + size / 2 : canvasWidth;
     const endY = orientation === 'horizontal' ? canvasHeight : originDistance + size / 2;
     const grd = context.createLinearGradient(startX, startY, endX, endY);
-    grd.addColorStop(0, colors_1.BACKGROUND__TRANSPARENT);
-    grd.addColorStop(0.25, colors_1.BACKGROUND);
-    grd.addColorStop(0.75, colors_1.BACKGROUND);
-    grd.addColorStop(1, colors_1.BACKGROUND__TRANSPARENT);
+    const background = (0, resolve_studio_color_1.resolveStudioColor)(colors_1.BACKGROUND, computedStyle);
+    const transparentBackground = (0, resolve_studio_color_1.resolveStudioColor)(colors_1.BACKGROUND__TRANSPARENT, computedStyle);
+    grd.addColorStop(0, transparentBackground);
+    grd.addColorStop(0.25, background);
+    grd.addColorStop(0.75, background);
+    grd.addColorStop(1, transparentBackground);
     context.fillStyle = grd;
     context.fillRect(startX, startY, endX - startX, endY - startY);
 };
-const drawGuide = ({ guideHighlight, scale, startMarking, context, canvasHeight, canvasWidth, orientation, originOffset, }) => {
-    const { guide, color } = guideHighlight;
+const drawGuide = ({ guideHighlight, scale, startMarking, context, computedStyle, canvasHeight, canvasWidth, orientation, originOffset, }) => {
+    const { guide } = guideHighlight;
+    const color = (0, resolve_studio_color_1.resolveStudioColor)(guideHighlight.color, computedStyle);
     const originDistance = rulerValueToPosition({
         value: guide.position,
         startMarking,
@@ -41,6 +46,7 @@ const drawGuide = ({ guideHighlight, scale, startMarking, context, canvasHeight,
     drawGradient({
         canvasHeight,
         context,
+        computedStyle,
         orientation,
         originDistance,
         canvasWidth,
@@ -85,15 +91,19 @@ const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, m
     const context = canvas.getContext('2d');
     if (!context)
         return;
+    const computedStyle = getComputedStyle(canvas);
+    const tickColor = (0, resolve_studio_color_1.resolveStudioColor)(colors_1.WHITE_ALPHA_15, computedStyle);
+    const labelColor = (0, resolve_studio_color_1.resolveStudioColor)(colors_1.LIGHT_TEXT, computedStyle);
     canvas.width = canvasWidth;
     canvas.height = canvasHeight;
-    context.scale(window.devicePixelRatio, window.devicePixelRatio);
+    const pixelRatio = (0, studio_pixel_ratio_1.getStudioPixelRatio)();
+    context.scale(pixelRatio, pixelRatio);
     context.clearRect(0, 0, canvasWidth, canvasHeight);
-    context.strokeStyle = colors_1.WHITE_ALPHA_15;
+    context.strokeStyle = tickColor;
     context.lineWidth = 1;
     context.beginPath();
     points.forEach((point) => {
-        context.strokeStyle = colors_1.WHITE_ALPHA_15;
+        context.strokeStyle = tickColor;
         context.lineWidth = 1;
         const originDistance = point.position + originOffset - startMarking * scale;
         context.beginPath();
@@ -119,17 +129,18 @@ const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, m
         context.stroke();
         context.font = '10px Arial, Helvetica, sans-serif';
         context.textAlign = 'left';
-        context.fillStyle = colors_1.LIGHT_TEXT;
+        context.fillStyle = labelColor;
         drawLabel({
             orientation,
             context,
             label: point.value.toString(),
             originDistance,
-            color: colors_1.LIGHT_TEXT,
+            color: labelColor,
         });
     });
     if (guideHighlight && orientation !== guideHighlight.guide.orientation) {
         drawGuide({
+            computedStyle,
             canvasHeight,
             canvasWidth,
             context,

package/dist/helpers/get-connected-compositions.d.ts

@@ -1 +1,6 @@
-export { getConnectedCompositions } from '@remotion/canvas';
+export declare const getConnectedCompositions: <Composition extends {
+    readonly componentFromProps?: unknown;
+}>({ compositions, singleChildComponent, }: {
+    readonly compositions: readonly Composition[];
+    readonly singleChildComponent: unknown;
+}) => Composition[];

package/dist/helpers/get-connected-compositions.js

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

package/dist/helpers/get-sequence-double-click-action.js

@@ -23,6 +23,6 @@ const getConnectedCompositionFrame = ({ timelinePosition, sequence, sequenceFram
     if (relativeFrame < 0 || relativeFrame >= sequence.duration) {
         return null;
     }
-    return (_a = sequence.frozenFrame) !== null && _a !== void 0 ? _a : relativeFrame + sequenceFrameOffset;
+    return ((_a = sequence.frozenFrame) !== null && _a !== void 0 ? _a : relativeFrame * sequence.sequencePlaybackRate + sequenceFrameOffset);
 };
 exports.getConnectedCompositionFrame = getConnectedCompositionFrame;

package/dist/helpers/get-sequence-visible-range.d.ts

@@ -1 +1 @@
-export { getCascadedStart, getCascadedStartWithTrim, getTimelineVisibleDuration, getTimelineVisibleStart, } from '@remotion/canvas';
+export declare const getParentSequencePlaybackRate: (sequence: import("remotion").TSequence, sequences: import("remotion").TSequence[]) => number, getCascadedStart: (sequence: import("remotion").TSequence, sequences: import("remotion").TSequence[]) => number, getCascadedStartWithTrim: (sequence: import("remotion").TSequence, sequences: import("remotion").TSequence[]) => number, getTimelineVisibleDuration: (sequence: import("remotion").TSequence, sequences: import("remotion").TSequence[]) => number, getTimelineVisibleStart: (sequence: import("remotion").TSequence, sequences: import("remotion").TSequence[]) => number;

package/dist/helpers/get-sequence-visible-range.js

@@ -1,8 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineVisibleStart = exports.getTimelineVisibleDuration = exports.getCascadedStartWithTrim = exports.getCascadedStart = void 0;
+exports.getTimelineVisibleStart = exports.getTimelineVisibleDuration = exports.getCascadedStartWithTrim = exports.getCascadedStart = exports.getParentSequencePlaybackRate = void 0;
 const canvas_1 = require("@remotion/canvas");
-Object.defineProperty(exports, "getCascadedStart", { enumerable: true, get: function () { return canvas_1.getCascadedStart; } });
-Object.defineProperty(exports, "getCascadedStartWithTrim", { enumerable: true, get: function () { return canvas_1.getCascadedStartWithTrim; } });
-Object.defineProperty(exports, "getTimelineVisibleDuration", { enumerable: true, get: function () { return canvas_1.getTimelineVisibleDuration; } });
-Object.defineProperty(exports, "getTimelineVisibleStart", { enumerable: true, get: function () { return canvas_1.getTimelineVisibleStart; } });
+({ getParentSequencePlaybackRate: exports.getParentSequencePlaybackRate, getCascadedStart: exports.getCascadedStart, getCascadedStartWithTrim: exports.getCascadedStartWithTrim, getTimelineVisibleDuration: exports.getTimelineVisibleDuration, getTimelineVisibleStart: exports.getTimelineVisibleStart } = canvas_1.CanvasInternals);

package/dist/helpers/get-timeline-nestedness.d.ts

@@ -1 +1 @@
-export { getTimelineNestedLevel } from '@remotion/canvas';
+export declare const getTimelineNestedLevel: (sequence: import("remotion").TSequence, allSequences: import("remotion").TSequence[], depth: number) => number;

package/dist/helpers/get-timeline-nestedness.js

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

package/dist/helpers/get-timeline-sequence-sort-key.d.ts

@@ -1,2 +1,2 @@
-export { getTimelineSequenceSortKey } from '@remotion/canvas';
+export declare const getTimelineSequenceSortKey: (track: import("@remotion/canvas").TimelineTrackData, tracks: import("@remotion/canvas").TimelineTrackData[], sequenceRanks: Map<string, number>) => string;
 export type { SequenceNodePathInfo, TimelineTrackData, TimelineTrackWithOriginalTimings, } from '@remotion/canvas';

package/dist/helpers/get-timeline-sequence-sort-key.js

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

package/dist/helpers/hoverable.js

@@ -12,10 +12,10 @@ exports.HOVERABLE_CLASS_NAME = '__remotion-hoverable';
 exports.HOVER_GROUP_CLASS_NAME = '__remotion-hover-group';
 exports.HOVER_GROUP_REVEAL_CLASS_NAME = '__remotion-hover-group-reveal';
 exports.FOCUS_VISIBLE_ONLY_CLASS_NAME = '__remotion-focus-visible-only';
-const BG_VARIABLE = '--remotion-hoverable-bg';
-const HOVER_BG_VARIABLE = '--remotion-hoverable-hover-bg';
-const COLOR_VARIABLE = '--remotion-hoverable-color';
-const HOVER_COLOR_VARIABLE = '--remotion-hoverable-hover-color';
+const BG_VARIABLE = '--remotion-studio-hoverable-bg';
+const HOVER_BG_VARIABLE = '--remotion-studio-hoverable-hover-bg';
+const COLOR_VARIABLE = '--remotion-studio-hoverable-color';
+const HOVER_COLOR_VARIABLE = '--remotion-studio-hoverable-hover-color';
 exports.NO_HOVER_BACKGROUND_STYLE = {
     [HOVER_BG_VARIABLE]: colors_1.TRANSPARENT,
 };

package/dist/helpers/inject-css.js

@@ -11,8 +11,6 @@ const makeDefaultGlobalCSS = () => {
     const fromMiddle = 50 / dragAreaFactor;
     return `
 	  html {
-	    --remotion-cli-internals-blue: ${colors_1.BLUE};
-	    --remotion-cli-internals-blue-hovered: ${colors_1.BLUE_HOVERED};
 	    overscroll-behavior-y: none;
 	  }
 
@@ -99,7 +97,7 @@ const makeDefaultGlobalCSS = () => {
 
 	  .__remotion_thumb {
 	    appearance: none;
-	    background: transparent;
+	    background: ${colors_1.TRANSPARENT};
 	    border: 0;
 	    height: 100%;
 	    left: 0;
@@ -114,13 +112,13 @@ const makeDefaultGlobalCSS = () => {
 	  }
 
 	  .__remotion_thumb::-moz-range-track {
-	    background: transparent;
+	    background: ${colors_1.TRANSPARENT};
 	    border: 0;
 	    height: 6px;
 	  }
 
 	  .__remotion_thumb::-webkit-slider-runnable-track {
-	    background: transparent;
+	    background: ${colors_1.TRANSPARENT};
 	    border: 0;
 	    height: 6px;
 	  }
@@ -152,11 +150,11 @@ const makeDefaultGlobalCSS = () => {
 	  }
 
 	.__remotion_input_dragger:hover > span:first-child {
-    color: var(--remotion-cli-internals-blue-hovered) !important;
+    color: ${colors_1.BLUE_HOVERED} !important;
   }
 
   .${scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME} span {
-    color: var(--remotion-cli-internals-blue) !important;
+    color: ${colors_1.BLUE} !important;
     transition: color 0.2s ease-in-out;
   }
 

package/dist/helpers/prism-vsc-dark-plus.d.ts

@@ -1 +1 @@
-export declare const prismVscDarkPlus = "pre[class*=\"language-\"],\ncode[class*=\"language-\"] {\n\tcolor: #d4d4d4;\n\tfont-size: 13px;\n\ttext-shadow: none;\n\tfont-family: Menlo, Monaco, Consolas, \"Andale Mono\", \"Ubuntu Mono\", \"Courier New\", monospace;\n\tdirection: ltr;\n\ttext-align: left;\n\twhite-space: pre;\n\tword-spacing: normal;\n\tword-break: normal;\n\tline-height: 1.5;\n\t-moz-tab-size: 4;\n\t-o-tab-size: 4;\n\ttab-size: 4;\n\t-webkit-hyphens: none;\n\t-moz-hyphens: none;\n\t-ms-hyphens: none;\n\thyphens: none;\n}\n\npre[class*=\"language-\"]::selection,\ncode[class*=\"language-\"]::selection,\npre[class*=\"language-\"] *::selection,\ncode[class*=\"language-\"] *::selection {\n\ttext-shadow: none;\n\tbackground: #264F78;\n}\n\n@media print {\n\tpre[class*=\"language-\"],\n\tcode[class*=\"language-\"] {\n\t\ttext-shadow: none;\n\t}\n}\n\npre[class*=\"language-\"] {\n\tpadding: 1em;\n\tmargin: .5em 0;\n\toverflow: auto;\n\tbackground: #1e1e1e;\n}\n\n:not(pre) > code[class*=\"language-\"] {\n\tpadding: .1em .3em;\n\tborder-radius: .3em;\n\tcolor: #db4c69;\n\tbackground: #1e1e1e;\n}\n/*********************************************************\n* Tokens\n*/\n.namespace {\n\topacity: .7;\n}\n\n.token.doctype .token.doctype-tag {\n\tcolor: #569CD6;\n}\n\n.token.doctype .token.name {\n\tcolor: #9cdcfe;\n}\n\n.token.comment,\n.token.prolog {\n\tcolor: #6a9955;\n}\n\n.token.punctuation,\n.language-html .language-css .token.punctuation,\n.language-html .language-javascript .token.punctuation {\n\tcolor: #d4d4d4;\n}\n\n.token.property,\n.token.tag,\n.token.boolean,\n.token.number,\n.token.constant,\n.token.symbol,\n.token.inserted,\n.token.unit {\n\tcolor: #b5cea8;\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.deleted {\n\tcolor: #ce9178;\n}\n\n.language-css .token.string.url {\n\ttext-decoration: underline;\n}\n\n.token.operator,\n.token.entity {\n\tcolor: #d4d4d4;\n}\n\n.token.operator.arrow {\n\tcolor: #569CD6;\n}\n\n.token.atrule {\n\tcolor: #ce9178;\n}\n\n.token.atrule .token.rule {\n\tcolor: #c586c0;\n}\n\n.token.atrule .token.url {\n\tcolor: #9cdcfe;\n}\n\n.token.atrule .token.url .token.function {\n\tcolor: #dcdcaa;\n}\n\n.token.atrule .token.url .token.punctuation {\n\tcolor: #d4d4d4;\n}\n\n.token.keyword {\n\tcolor: #569CD6;\n}\n\n.token.keyword.module,\n.token.keyword.control-flow {\n\tcolor: #c586c0;\n}\n\n.token.function,\n.token.function .token.maybe-class-name {\n\tcolor: #dcdcaa;\n}\n\n.token.regex {\n\tcolor: #d16969;\n}\n\n.token.important {\n\tcolor: #569cd6;\n}\n\n.token.italic {\n\tfont-style: italic;\n}\n\n.token.constant {\n\tcolor: #9cdcfe;\n}\n\n.token.class-name,\n.token.maybe-class-name {\n\tcolor: #4ec9b0;\n}\n\n.token.console {\n\tcolor: #9cdcfe;\n}\n\n.token.parameter {\n\tcolor: #9cdcfe;\n}\n\n.token.interpolation {\n\tcolor: #9cdcfe;\n}\n\n.token.punctuation.interpolation-punctuation {\n\tcolor: #569cd6;\n}\n\n.token.boolean {\n\tcolor: #569cd6;\n}\n\n.token.property,\n.token.variable,\n.token.imports .token.maybe-class-name,\n.token.exports .token.maybe-class-name {\n\tcolor: #9cdcfe;\n}\n\n.token.selector {\n\tcolor: #d7ba7d;\n}\n\n.token.escape {\n\tcolor: #d7ba7d;\n}\n\n.token.tag {\n\tcolor: #569cd6;\n}\n\n.token.tag .token.punctuation {\n\tcolor: #808080;\n}\n\n.token.cdata {\n\tcolor: #808080;\n}\n\n.token.attr-name {\n\tcolor: #9cdcfe;\n}\n\n.token.attr-value,\n.token.attr-value .token.punctuation {\n\tcolor: #ce9178;\n}\n\n.token.attr-value .token.punctuation.attr-equals {\n\tcolor: #d4d4d4;\n}\n\n.token.entity {\n\tcolor: #569cd6;\n}\n\n.token.namespace {\n\tcolor: #4ec9b0;\n}\n/*********************************************************\n* Language Specific\n*/\n\npre[class*=\"language-javascript\"],\ncode[class*=\"language-javascript\"],\npre[class*=\"language-jsx\"],\ncode[class*=\"language-jsx\"],\npre[class*=\"language-typescript\"],\ncode[class*=\"language-typescript\"],\npre[class*=\"language-tsx\"],\ncode[class*=\"language-tsx\"] {\n\tcolor: #9cdcfe;\n}\n\npre[class*=\"language-css\"],\ncode[class*=\"language-css\"] {\n\tcolor: #ce9178;\n}\n\npre[class*=\"language-html\"],\ncode[class*=\"language-html\"] {\n\tcolor: #d4d4d4;\n}\n\n.language-regex .token.anchor {\n\tcolor: #dcdcaa;\n}\n\n.language-html .token.punctuation {\n\tcolor: #808080;\n}\n/*********************************************************\n* Line highlighting\n*/\npre[class*=\"language-\"] > code[class*=\"language-\"] {\n\tposition: relative;\n\tz-index: 1;\n}\n\n.line-highlight.line-highlight {\n\tbackground: #f7ebc6;\n\tbox-shadow: inset 5px 0 0 #f7d87c;\n\tz-index: 0;\n}\n";
+export declare const prismVscDarkPlus = "pre[class*=\"language-\"],\ncode[class*=\"language-\"] {\n\tcolor: var(--remotion-studio-prism-text-color);\n\tfont-size: 13px;\n\ttext-shadow: none;\n\tfont-family: Menlo, Monaco, Consolas, \"Andale Mono\", \"Ubuntu Mono\", \"Courier New\", monospace;\n\tdirection: ltr;\n\ttext-align: left;\n\twhite-space: pre;\n\tword-spacing: normal;\n\tword-break: normal;\n\tline-height: 1.5;\n\t-moz-tab-size: 4;\n\t-o-tab-size: 4;\n\ttab-size: 4;\n\t-webkit-hyphens: none;\n\t-moz-hyphens: none;\n\t-ms-hyphens: none;\n\thyphens: none;\n}\n\npre[class*=\"language-\"]::selection,\ncode[class*=\"language-\"]::selection,\npre[class*=\"language-\"] *::selection,\ncode[class*=\"language-\"] *::selection {\n\ttext-shadow: none;\n\tbackground: var(--remotion-studio-prism-selection-background);\n}\n\n@media print {\n\tpre[class*=\"language-\"],\n\tcode[class*=\"language-\"] {\n\t\ttext-shadow: none;\n\t}\n}\n\npre[class*=\"language-\"] {\n\tpadding: 1em;\n\tmargin: .5em 0;\n\toverflow: auto;\n\tbackground: var(--remotion-studio-prism-background);\n}\n\n:not(pre) > code[class*=\"language-\"] {\n\tpadding: .1em .3em;\n\tborder-radius: .3em;\n\tcolor: var(--remotion-studio-prism-inline-color);\n\tbackground: var(--remotion-studio-prism-background);\n}\n/*********************************************************\n* Tokens\n*/\n.namespace {\n\topacity: .7;\n}\n\n.token.doctype .token.doctype-tag {\n\tcolor: var(--remotion-studio-prism-keyword-color);\n}\n\n.token.doctype .token.name {\n\tcolor: var(--remotion-studio-prism-variable-color);\n}\n\n.token.comment,\n.token.prolog {\n\tcolor: var(--remotion-studio-prism-comment-color);\n}\n\n.token.punctuation,\n.language-html .language-css .token.punctuation,\n.language-html .language-javascript .token.punctuation {\n\tcolor: var(--remotion-studio-prism-text-color);\n}\n\n.token.property,\n.token.tag,\n.token.boolean,\n.token.number,\n.token.constant,\n.token.symbol,\n.token.inserted,\n.token.unit {\n\tcolor: var(--remotion-studio-prism-number-color);\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.deleted {\n\tcolor: var(--remotion-studio-prism-string-color);\n}\n\n.language-css .token.string.url {\n\ttext-decoration: underline;\n}\n\n.token.operator,\n.token.entity {\n\tcolor: var(--remotion-studio-prism-text-color);\n}\n\n.token.operator.arrow {\n\tcolor: var(--remotion-studio-prism-keyword-color);\n}\n\n.token.atrule {\n\tcolor: var(--remotion-studio-prism-string-color);\n}\n\n.token.atrule .token.rule {\n\tcolor: var(--remotion-studio-prism-control-flow-color);\n}\n\n.token.atrule .token.url {\n\tcolor: var(--remotion-studio-prism-variable-color);\n}\n\n.token.atrule .token.url .token.function {\n\tcolor: var(--remotion-studio-prism-function-color);\n}\n\n.token.atrule .token.url .token.punctuation {\n\tcolor: var(--remotion-studio-prism-text-color);\n}\n\n.token.keyword {\n\tcolor: var(--remotion-studio-prism-keyword-color);\n}\n\n.token.keyword.module,\n.token.keyword.control-flow {\n\tcolor: var(--remotion-studio-prism-control-flow-color);\n}\n\n.token.function,\n.token.function .token.maybe-class-name {\n\tcolor: var(--remotion-studio-prism-function-color);\n}\n\n.token.regex {\n\tcolor: var(--remotion-studio-prism-regex-color);\n}\n\n.token.important {\n\tcolor: var(--remotion-studio-prism-keyword-color);\n}\n\n.token.italic {\n\tfont-style: italic;\n}\n\n.token.constant {\n\tcolor: var(--remotion-studio-prism-variable-color);\n}\n\n.token.class-name,\n.token.maybe-class-name {\n\tcolor: var(--remotion-studio-prism-class-name-color);\n}\n\n.token.console {\n\tcolor: var(--remotion-studio-prism-variable-color);\n}\n\n.token.parameter {\n\tcolor: var(--remotion-studio-prism-variable-color);\n}\n\n.token.interpolation {\n\tcolor: var(--remotion-studio-prism-variable-color);\n}\n\n.token.punctuation.interpolation-punctuation {\n\tcolor: var(--remotion-studio-prism-keyword-color);\n}\n\n.token.boolean {\n\tcolor: var(--remotion-studio-prism-keyword-color);\n}\n\n.token.property,\n.token.variable,\n.token.imports .token.maybe-class-name,\n.token.exports .token.maybe-class-name {\n\tcolor: var(--remotion-studio-prism-variable-color);\n}\n\n.token.selector {\n\tcolor: var(--remotion-studio-prism-selector-color);\n}\n\n.token.escape {\n\tcolor: var(--remotion-studio-prism-selector-color);\n}\n\n.token.tag {\n\tcolor: var(--remotion-studio-prism-keyword-color);\n}\n\n.token.tag .token.punctuation {\n\tcolor: var(--remotion-studio-ruler-color);\n}\n\n.token.cdata {\n\tcolor: var(--remotion-studio-ruler-color);\n}\n\n.token.attr-name {\n\tcolor: var(--remotion-studio-prism-variable-color);\n}\n\n.token.attr-value,\n.token.attr-value .token.punctuation {\n\tcolor: var(--remotion-studio-prism-string-color);\n}\n\n.token.attr-value .token.punctuation.attr-equals {\n\tcolor: var(--remotion-studio-prism-text-color);\n}\n\n.token.entity {\n\tcolor: var(--remotion-studio-prism-keyword-color);\n}\n\n.token.namespace {\n\tcolor: var(--remotion-studio-prism-class-name-color);\n}\n/*********************************************************\n* Language Specific\n*/\n\npre[class*=\"language-javascript\"],\ncode[class*=\"language-javascript\"],\npre[class*=\"language-jsx\"],\ncode[class*=\"language-jsx\"],\npre[class*=\"language-typescript\"],\ncode[class*=\"language-typescript\"],\npre[class*=\"language-tsx\"],\ncode[class*=\"language-tsx\"] {\n\tcolor: var(--remotion-studio-prism-variable-color);\n}\n\npre[class*=\"language-css\"],\ncode[class*=\"language-css\"] {\n\tcolor: var(--remotion-studio-prism-string-color);\n}\n\npre[class*=\"language-html\"],\ncode[class*=\"language-html\"] {\n\tcolor: var(--remotion-studio-prism-text-color);\n}\n\n.language-regex .token.anchor {\n\tcolor: var(--remotion-studio-prism-function-color);\n}\n\n.language-html .token.punctuation {\n\tcolor: var(--remotion-studio-ruler-color);\n}\n/*********************************************************\n* Line highlighting\n*/\npre[class*=\"language-\"] > code[class*=\"language-\"] {\n\tposition: relative;\n\tz-index: 1;\n}\n\n.line-highlight.line-highlight {\n\tbackground: var(--remotion-studio-prism-line-highlight-background);\n\tbox-shadow: inset 5px 0 0 var(--remotion-studio-prism-line-highlight-border-color);\n\tz-index: 0;\n}\n";