@remotion/studio 4.0.485 → 4.0.486

package/dist/components/RenderModal/InfoTooltip.js

@@ -25,8 +25,8 @@ const InfoTooltip = ({ children, arrowDirection, backgroundColor }) => {
         return {
             boxShadow: arrowDirection === 'down' ? styles_1.SHADOW_TOWARDS_TOP : styles_1.SHADOW_TOWARDS_BOTTOM,
             background: backgroundColor,
-            color: 'white',
-            border: '0.5px solid ' + colors_1.BORDER_COLOR,
+            color: colors_1.WHITE,
+            border: '0.5px solid ' + colors_1.BLACK_HEX,
             maxHeight: 200,
             overflow: 'auto',
             borderRadius: '4px',
@@ -37,6 +37,6 @@ const InfoTooltip = ({ children, arrowDirection, backgroundColor }) => {
             flexDirection: arrowDirection === 'up' ? 'column-reverse' : 'column',
             alignItems: 'flex-start',
         }, children: [
-            jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowDown, children: jsx_runtime_1.jsx("path", { d: `M 14 0 L 7 7 L 0 0`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowUp, children: jsx_runtime_1.jsx("path", { d: `M 0 7 L 7 0 L 14 7`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null] }));
+            jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowDown, children: jsx_runtime_1.jsx("path", { d: `M 14 0 L 7 7 L 0 0`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BLACK_HEX, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowUp, children: jsx_runtime_1.jsx("path", { d: `M 0 7 L 7 0 L 14 7`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BLACK_HEX, strokeWidth: 0.5 }) })) : null] }));
 };
 exports.InfoTooltip = InfoTooltip;

package/dist/components/RenderModal/InlineEyeIcon.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineEyeButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
 const clearIcon = {
     height: 14,
-    color: 'currentColor',
+    color: colors_1.CURRENT_COLOR,
 };
 const InlineEyeButton = ({ onClick, enabled }) => {
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderModal/InlineRemoveButton.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineRemoveButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
 const clearIcon = {
     height: 14,
-    color: 'currentColor',
+    color: colors_1.CURRENT_COLOR,
 };
 const InlineRemoveButton = ({ onClick }) => {
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderModal/MultiRangeSlider.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const container = {
-    borderColor: 'black',
+    borderColor: colors_1.BLACK,
     borderStyle: 'solid',
     borderWidth: '2px',
     height: 39,

package/dist/components/RenderModal/OptionExplainer.js

@@ -27,7 +27,7 @@ const description = {
 const link = {
     fontSize: 14,
     maxWidth: 200,
-    color: '#0b84f3',
+    color: colors_1.BLUE,
     wordWrap: 'break-word',
     textDecoration: 'none',
 };
@@ -41,7 +41,7 @@ const infoRow = {
 const infoRowLabel = {
     width: 150,
     fontSize: 14,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const flexSpacer = {
     display: 'flex',

package/dist/components/RenderModal/RenderModalHr.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalHr = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const hrStyle = {
     margin: '0 0 0 0',
     padding: '0 0 0 0',
     border: 'none',
-    borderTop: '1px solid #000',
+    borderTop: colors_1.BORDER_BLACK,
     marginRight: 16,
     marginLeft: 16,
     marginTop: 8,

package/dist/components/RenderModal/RenderStatusModal.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderStatusModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const retry_payload_1 = require("../../helpers/retry-payload");
 const modals_1 = require("../../state/modals");
 const Button_1 = require("../Button");
@@ -22,7 +23,7 @@ const container = {
     paddingTop: 0,
 };
 const codeBlock = {
-    backgroundColor: '#222',
+    backgroundColor: colors_1.RENDER_STATUS_BACKGROUND,
     whiteSpace: 'pre',
     padding: 12,
     borderRadius: 4,

package/dist/components/RenderModal/SchemaEditor/SchemaLabel.js

@@ -23,11 +23,7 @@ const SchemaLabel = ({ jsonPath, onRemove, valid, suffix, handleClick }) => {
         return {
             fontFamily: 'monospace',
             fontSize: 12,
-            color: valid
-                ? clickableButtonHovered
-                    ? 'white'
-                    : colors_1.LIGHT_TEXT
-                : colors_1.FAIL_COLOR,
+            color: valid ? (clickableButtonHovered ? colors_1.WHITE : colors_1.LIGHT_TEXT) : colors_1.FAIL_COLOR,
             lineHeight: '20px',
         };
     }, [clickableButtonHovered, valid]);

package/dist/components/RenderModal/SchemaEditor/SchemaResetButton.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaResetButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../../helpers/colors");
 const InlineAction_1 = require("../../InlineAction");
 const icon = {
     height: 14,
-    color: 'currentColor',
+    color: colors_1.CURRENT_COLOR,
 };
 const SchemaResetButton = ({ onClick }) => {
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderModal/SchemaEditor/SchemaSeparationLine.js

@@ -89,7 +89,7 @@ const SchemaArrayItemSeparationLine = ({ onChange, index, schema, isLast, showAd
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'flex-end',
-                }, children: [showAddButton && (jsx_runtime_1.jsx("div", { style: dynamicAddButtonStyle, onPointerEnter: onOuterMouseEnter, onPointerLeave: onOuterMouseLeave, children: jsx_runtime_1.jsx("div", { onClick: onAdd, style: inner, onPointerEnter: onInnerMouseEnter, onPointerLeave: onInnerMouseLeave, children: jsx_runtime_1.jsx(plus_1.Plus, { color: innerHovered ? 'white' : colors_1.LIGHT_TEXT, style: {
+                }, children: [showAddButton && (jsx_runtime_1.jsx("div", { style: dynamicAddButtonStyle, onPointerEnter: onOuterMouseEnter, onPointerLeave: onOuterMouseLeave, children: jsx_runtime_1.jsx("div", { onClick: onAdd, style: inner, onPointerEnter: onInnerMouseEnter, onPointerLeave: onInnerMouseLeave, children: jsx_runtime_1.jsx(plus_1.Plus, { color: innerHovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: {
                                     display: 'block',
                                     height: exports.VERTICAL_GUIDE_HEIGHT / 2,
                                 } }) }) })), jsx_runtime_1.jsx("div", { style: arraySeparationLine })

package/dist/components/RenderModal/SchemaEditor/SchemaVerticalGuide.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaVerticalGuide = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../../helpers/colors");
 const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
 const flex = {
     flex: 1,
@@ -22,7 +23,7 @@ const SchemaVerticalGuide = ({ isRoot, children }) => {
             : {
                 height: `calc(100% - ${SchemaSeparationLine_1.VERTICAL_GUIDE_HEIGHT / 2}px)`,
                 width: 1,
-                background: '#363A3E',
+                background: colors_1.LINE_COLOR,
                 position: 'absolute',
             };
     }, [isRoot]);

package/dist/components/RenderModal/SchemaEditor/ZodDateEditor.js

@@ -17,7 +17,7 @@ const fullWidth = {
 const explainer = {
     fontFamily: 'sans-serif',
     fontSize: 12,
-    color: colors_1.VERY_LIGHT_TEXT,
+    color: colors_1.WHITE_ALPHA_30,
 };
 // This will do 2 things:
 // - Make the calendar icon white

package/dist/components/RenderModal/SchemaEditor/ZodErrorMessages.js

@@ -15,7 +15,7 @@ const compactSchemaLabel = {
     fontSize: 12,
 };
 const jsonLabel = {
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 13,
     fontFamily: 'sans-serif',
     display: 'flex',

package/dist/components/RenderModal/SchemaEditor/ZodNonEditableValue.js

@@ -10,7 +10,7 @@ const fullWidth = {
 };
 const emptyLabel = {
     width: '100%',
-    color: colors_1.VERY_LIGHT_TEXT,
+    color: colors_1.WHITE_ALPHA_30,
     fontFamily: 'sans-serif',
     fontSize: 14,
 };

package/dist/components/RenderModal/SchemaEditor/create-zod-values.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createZodValues = void 0;
+const colors_1 = require("../../../helpers/colors");
 const zod_schema_type_1 = require("./zod-schema-type");
 const createZodValues = (schema, zodRuntime, zodTypes) => {
     var _a;
@@ -13,7 +14,7 @@ const createZodValues = (schema, zodRuntime, zodTypes) => {
     const description = (0, zod_schema_type_1.getZodSchemaDescription)(schema);
     if (zodTypes) {
         if (description === zodTypes.ZodZypesInternals.REMOTION_COLOR_BRAND) {
-            return '#ffffff';
+            return colors_1.WHITE_FULL_HEX;
         }
         if (description === zodTypes.ZodZypesInternals.REMOTION_TEXTAREA_BRAND) {
             return '';

package/dist/components/RenderModal/ServerRenderModal.js

@@ -1000,7 +1000,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
                                     "Audio"] })) : null, shownTabs.includes('gif') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gif_1.GifIcon, { style: render_modals_1.icon }) }),
                                     "GIF"] })) : null, shownTabs.includes('encoding') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'encoding', onClick: () => setTab('encoding'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { style: render_modals_1.icon, color: "currentcolor" }) }),
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { style: render_modals_1.icon, color: colors_1.CURRENT_COLOR_LOWERCASE }) }),
                                     "Encoding"] })) : null, shownTabs.includes('environment') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'environment', onClick: () => setTab('environment'), children: [
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(data_1.DataIcon, { style: render_modals_1.icon }) }),
                                     "Environment"] })) : null, shownTabs.includes('advanced') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [

package/dist/components/RenderModal/WarningIndicatorButton.js

@@ -11,7 +11,7 @@ const style = {
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
     color: colors_1.LIGHT_TEXT,
     borderStyle: 'solid',
     borderWidth: 1,
@@ -50,11 +50,9 @@ const WarningIndicatorButton = ({ setShowWarning, showWarning, warningCount, siz
     const buttonStyle = (0, react_1.useMemo)(() => {
         return {
             ...(size === 'compact' ? compactStyle : style),
-            backgroundColor: showWarning ? colors_1.INPUT_BACKGROUND : 'transparent',
-            borderColor: showWarning
-                ? colors_1.INPUT_BORDER_COLOR_HOVERED
-                : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
-            color: showWarning ? 'white' : colors_1.LIGHT_TEXT,
+            backgroundColor: showWarning ? colors_1.INPUT_BACKGROUND : colors_1.TRANSPARENT,
+            borderColor: showWarning ? colors_1.WHITE_ALPHA_05 : colors_1.BLACK_ALPHA_60,
+            color: showWarning ? colors_1.WHITE : colors_1.LIGHT_TEXT,
         };
     }, [showWarning, size]);
     return (jsx_runtime_1.jsxs("button", { type: "button", style: buttonStyle, onClick: onClick, children: [

package/dist/components/RenderModal/WebRenderModalAudio.js

@@ -4,6 +4,7 @@ exports.WebRenderModalAudio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const Checkmark_1 = require("../../icons/Checkmark");
 const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
@@ -17,8 +18,8 @@ const container = {
     overflowY: 'auto',
 };
 const fallbackNoticeStyle = {
-    backgroundColor: 'rgba(59, 130, 246, 0.15)',
-    border: '1px solid rgba(59, 130, 246, 0.4)',
+    backgroundColor: colors_1.INFO_BLUE_BACKGROUND,
+    border: colors_1.BORDER_INFO_BLUE,
     borderRadius: 4,
     padding: '8px 12px',
     marginLeft: 16,
@@ -26,7 +27,7 @@ const fallbackNoticeStyle = {
     marginTop: 8,
     fontSize: 13,
     lineHeight: 1.4,
-    color: '#60a5fa',
+    color: colors_1.INFO_BLUE,
 };
 const humanReadableWebAudioCodec = (audioCodec) => {
     switch (audioCodec) {

package/dist/components/RenderModal/WebRenderModalLicense.js

@@ -33,14 +33,14 @@ const paddedDescriptionStyle = {
     fontSize: 14,
     fontFamily: 'sans-serif',
     padding: 9,
-    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    border: '1px solid ' + colors_1.BLACK_ALPHA_60,
     borderRadius: 8,
     lineHeight: 1.5,
     marginLeft: 16,
     marginRight: 16,
 };
 const descriptionLink = {
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 14,
 };
 const checkboxLabel = {

package/dist/components/RenderModal/WebRenderModalPicture.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebRenderModalPicture = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const Checkbox_1 = require("../Checkbox");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const layout_1 = require("./layout");
@@ -22,7 +23,7 @@ const WebRenderModalPicture = ({ renderMode, videoBitrate, setVideoBitrate, keyf
                     jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Quality" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: qualityOptions, selectedId: videoBitrate, title: "Quality" }) })
                         ] }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Keyframe Interval", formatter: (v) => `${v}s`, min: 1, max: 300, step: 1, value: keyframeIntervalInSeconds, onValueChanged: setKeyframeIntervalInSeconds }), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Transparent" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: transparent, onChange: onTransparentChanged, name: "transparent" }) })
+                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Transparent" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: transparent, onChange: onTransparentChanged, name: colors_1.TRANSPARENT }) })
                         ] })
                 ] }))] }));
 };

package/dist/components/RenderModal/render-modals.js

@@ -15,7 +15,7 @@ exports.container = {
     flexDirection: 'row',
     alignItems: 'center',
     padding: '12px 16px',
-    borderBottom: '1px solid black',
+    borderBottom: colors_1.BORDER_BLACK,
 };
 exports.optionsPanel = {
     display: 'flex',
@@ -51,12 +51,12 @@ exports.iconContainer = {
     alignItems: 'center',
 };
 exports.icon = {
-    color: 'currentcolor',
+    color: colors_1.CURRENT_COLOR_LOWERCASE,
     height: 20,
 };
 exports.buttonStyle = {
     backgroundColor: colors_1.BLUE,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 exports.flexer = {
     flex: 1,

package/dist/components/RenderPreview.js

@@ -10,7 +10,7 @@ const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const FilePreview_1 = require("./FilePreview");
 const msgStyle = {
     fontSize: 13,
-    color: 'white',
+    color: colors_1.WHITE,
     fontFamily: 'sans-serif',
     display: 'flex',
     justifyContent: 'center',

package/dist/components/RenderQueue/RenderQueueCopyToClipboard.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueCopyToClipboard = exports.supportsCopyingToClipboard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const get_asset_metadata_1 = require("../../helpers/get-asset-metadata");
 const clipboard_1 = require("../../icons/clipboard");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const revealIconStyle = {
     height: 12,
-    color: 'currentColor',
+    color: colors_1.CURRENT_COLOR,
 };
 const supportsCopyingToClipboard = (job) => {
     if (job.status !== 'done') {

package/dist/components/RenderQueue/RenderQueueDownloadItem.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueDownloadItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const ClientRenderQueueProcessor_1 = require("./ClientRenderQueueProcessor");
@@ -24,7 +25,7 @@ const RenderQueueDownloadItem = ({ job }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,
-            color: 'currentColor',
+            color: colors_1.CURRENT_COLOR,
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderQueue/RenderQueueItemCancelButton.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueCancelButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
@@ -23,7 +24,7 @@ const RenderQueueCancelButton = ({ job }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 14,
-            color: 'currentColor',
+            color: colors_1.CURRENT_COLOR,
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderQueue/RenderQueueItemStatus.js

@@ -75,7 +75,7 @@ const RenderQueueItemStatus = ({ job }) => {
         return (jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" }) }));
     }
     if (job.status === 'done') {
-        return (jsx_runtime_1.jsx("button", { type: "button", style: invisibleStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: hovered ? 'white' : colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }) }));
+        return (jsx_runtime_1.jsx("button", { type: "button", style: invisibleStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }) }));
     }
     if (job.status === 'running') {
         let progressValue;

package/dist/components/RenderQueue/RenderQueueOpenInFolder.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueOpenInFinderItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const folder_1 = require("../../icons/folder");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
@@ -17,7 +18,7 @@ const RenderQueueOpenInFinderItem = ({ job }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,
-            color: 'currentColor',
+            color: colors_1.CURRENT_COLOR,
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderQueue/RenderQueueRemoveItem.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const save_render_output_1 = require("../../api/save-render-output");
+const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
@@ -39,7 +40,7 @@ const RenderQueueRemoveItem = ({ job }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 16,
-            color: 'currentColor',
+            color: colors_1.CURRENT_COLOR,
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueRepeatItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const mobile_layout_1 = require("../../helpers/mobile-layout");
 const retry_payload_1 = require("../../helpers/retry-payload");
 const modals_1 = require("../../state/modals");
@@ -37,7 +38,7 @@ const RenderQueueRepeatItem = ({ job }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,
-            color: 'currentColor',
+            color: colors_1.CURRENT_COLOR,
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderQueue/index.js

@@ -45,7 +45,7 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const context_1 = require("./context");
 const RenderQueueItem_1 = require("./RenderQueueItem");
 const separatorStyle = {
-    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+    borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
 };
 const errorExplanation = {
     fontSize: 14,

package/dist/components/RendersTab.js

@@ -31,8 +31,8 @@ const RendersTab = ({ selected, onClick }) => {
     const badgeStyle = (0, react_1.useMemo)(() => {
         return {
             ...badge,
-            backgroundColor: failedJobs > 0 ? colors_1.FAIL_COLOR : 'transparent',
-            color: failedJobs > 0 ? 'white' : colors_1.LIGHT_TEXT,
+            backgroundColor: failedJobs > 0 ? colors_1.FAIL_COLOR : colors_1.TRANSPARENT,
+            color: failedJobs > 0 ? colors_1.WHITE : colors_1.LIGHT_TEXT,
             borderWidth: failedJobs > 0 ? 0 : 1,
             borderStyle: 'solid',
             borderColor: colors_1.LIGHT_TEXT,

package/dist/components/SegmentedControl.js

@@ -9,7 +9,7 @@ const container = {
     display: 'flex',
     flexDirection: 'row',
     overflow: 'hidden',
-    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    border: '1px solid ' + colors_1.BLACK_ALPHA_60,
     flexWrap: 'wrap',
     maxWidth: 350,
     justifyContent: 'flex-end',
@@ -63,8 +63,8 @@ const Item = ({ selected, onClick, children, size }) => {
     const itemStyle = (0, react_1.useMemo)(() => {
         return {
             ...(size === 'compact' ? compactItem : item),
-            backgroundColor: selected ? colors_1.INPUT_BACKGROUND : 'transparent',
-            color: selected ? 'white' : hovered ? 'white' : colors_1.LIGHT_TEXT,
+            backgroundColor: selected ? colors_1.INPUT_BACKGROUND : colors_1.TRANSPARENT,
+            color: selected ? colors_1.WHITE : hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
         };
     }, [hovered, selected, size]);
     return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));

package/dist/components/SelectedOutlineElement.d.ts

@@ -2,6 +2,11 @@ import React from 'react';
 import type { SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineDragTarget, type SelectedOutlineRotationDragTarget, type SelectedOutlineScaleDragTarget, type SelectedOutlineTarget } from './selected-outline-types';
 import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+export declare const SelectedOutlineTransformOriginHandle: React.FC<{
+    readonly outline: SelectedOutline;
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly target: SelectedOutlineTarget | undefined;
+}>;
 export declare const SelectedOutlineElement: React.FC<{
     readonly allDragTargets: readonly SelectedOutlineDragTarget[];
     readonly allRotationDragTargets: readonly SelectedOutlineRotationDragTarget[];

package/dist/components/SelectedOutlineElement.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineElement = void 0;
+exports.SelectedOutlineElement = exports.SelectedOutlineTransformOriginHandle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
@@ -308,11 +308,12 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         return null;
     }
     return (jsx_runtime_1.jsxs("g", { pointerEvents: "all", cursor: "crosshair", onPointerDown: onPointerDown, "aria-hidden": "true", style: {
-            filter: 'drop-shadow(0 0 1px rgba(255, 255, 255, 0.2))',
+            filter: colors_1.SELECTED_OUTLINE_DROP_SHADOW,
         }, children: [
             jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 4, stroke: colors_1.BLUE, fill: "none", strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x - 8, y1: position.y, x2: position.x + 8, y2: position.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x, y1: position.y - 8, x2: position.x, y2: position.y + 8, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" })
         ] }));
 };
+exports.SelectedOutlineTransformOriginHandle = SelectedOutlineTransformOriginHandle;
 const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSelect, onTextEditStart, scale, target, }) => {
     var _a, _b, _c, _d;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -532,7 +533,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         });
     }, [effectDrop]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("polygon", { ref: polygonRef, points: points, fill: effectDropHovered ? 'rgba(0, 155, 255, 0.12)' : 'transparent', stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: target === undefined ? undefined : 'all', onPointerEnter: () => {
+            jsx_runtime_1.jsx("polygon", { ref: polygonRef, points: points, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: target === undefined ? undefined : 'all', onPointerEnter: () => {
                     if (!dragging) {
                         onHoverChange(outline.key);
                     }
@@ -696,7 +697,7 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("line", { ref: lineRef, x1: edgeInfo.start.x, y1: edgeInfo.start.y, x2: edgeInfo.end.x, y2: edgeInfo.end.y, stroke: "transparent", strokeWidth: 12, vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: edgeInfo.cursor, onPointerEnter: () => {
+            jsx_runtime_1.jsx("line", { ref: lineRef, x1: edgeInfo.start.x, y1: edgeInfo.start.y, x2: edgeInfo.end.x, y2: edgeInfo.end.y, stroke: colors_1.TRANSPARENT, strokeWidth: 12, vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: edgeInfo.cursor, onPointerEnter: () => {
                     if (!dragging) {
                         onHoverChange(outline.key);
                     }
@@ -918,7 +919,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("circle", { ref: circleRef, cx: cornerInfo.point.x, cy: cornerInfo.point.y, r: 12, fill: "transparent", stroke: "transparent", vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: cornerInfo.cursor, onPointerEnter: () => {
+            jsx_runtime_1.jsx("circle", { ref: circleRef, cx: cornerInfo.point.x, cy: cornerInfo.point.y, r: 12, fill: colors_1.TRANSPARENT, stroke: colors_1.TRANSPARENT, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: cornerInfo.cursor, onPointerEnter: () => {
                     if (!dragging) {
                         onHoverChange(outline.key);
                     }
@@ -1117,7 +1118,6 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
                 ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
                 : null, (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
                 ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, contextMenuValues: emptyContextMenuValues, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))
-                : null, jsx_runtime_1.jsx(SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, target: target })
-        ] }));
+                : null] }));
 };
 exports.SelectedOutlineElement = SelectedOutlineElement;

package/dist/components/SelectedOutlineOverlay.js

@@ -671,6 +671,6 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
     if (outlineTargets.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { allDragTargets: allDragTargets, allRotationDragTargets: allRotationDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: hoveredOutlineKey === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: setHoveredOutlineKey, onSelect: selectOutlineItem, scale: scale, target: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: selectOutlineItem, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
+    return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { allDragTargets: allDragTargets, allRotationDragTargets: allRotationDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: hoveredOutlineKey === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: setHoveredOutlineKey, onSelect: selectOutlineItem, scale: scale, target: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, target: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: selectOutlineItem, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
 };
 exports.SelectedOutlineOverlay = SelectedOutlineOverlay;