@remotion/studio 4.0.485 → 4.0.486

package/dist/components/SelectedOutlineUvControls.js

@@ -55,7 +55,7 @@ const uvHandleRadius = 4.25;
 const selectedUvHandleRadius = 6.8;
 const ellipseControlRadius = 5.2;
 const uvHandleStyle = {
-    filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28))',
+    filter: colors_1.SELECTED_OUTLINE_UV_DROP_SHADOW,
 };
 const getSelectedOutlineUvHandleTimelineSelection = ({ effectIndex, fieldKey, nodePathInfo, }) => {
     return {
@@ -254,7 +254,7 @@ const SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) =>
     if (startControl === null || field === undefined) {
         return null;
     }
-    return (jsx_runtime_1.jsx("circle", { cx: startControl.position.x, cy: startControl.position.y, r: ellipseControlRadius, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, style: uvHandleStyle, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: startControl.cursor, onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsx("circle", { cx: startControl.position.x, cy: startControl.position.y, r: ellipseControlRadius, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, style: uvHandleStyle, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: startControl.cursor, onPointerDown: onPointerDown }));
 };
 const SelectedUvEllipseResizeHandle = ({ axis, control, onDraggingChange, outline }) => {
     const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -354,7 +354,7 @@ const SelectedUvEllipseResizeHandle = ({ axis, control, onDraggingChange, outlin
     if (resizeControl === undefined || field === undefined) {
         return null;
     }
-    return (jsx_runtime_1.jsx("circle", { cx: resizeControl.position.x, cy: resizeControl.position.y, r: ellipseControlRadius, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, style: uvHandleStyle, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: resizeControl.cursor, onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsx("circle", { cx: resizeControl.position.x, cy: resizeControl.position.y, r: ellipseControlRadius, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, style: uvHandleStyle, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: resizeControl.cursor, onPointerDown: onPointerDown }));
 };
 const snapRotationDegrees = (value) => Math.round(value / selected_outline_drag_1.selectedOutlineRotationSnapStepDegrees) *
     selected_outline_drag_1.selectedOutlineRotationSnapStepDegrees;
@@ -517,7 +517,7 @@ const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
         toRadius: ellipseControlRadius,
     });
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("line", { x1: connector.from.x, y1: connector.from.y, x2: connector.to.x, y2: connector.to.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "none" }), jsx_runtime_1.jsx("circle", { cx: rotationControl.position.x, cy: rotationControl.position.y, r: ellipseControlRadius, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, style: uvHandleStyle, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: (0, selected_outline_measurement_2.getRotationCursor)((0, selected_outline_measurement_2.getAngleDegrees)(control.center, rotationControl.position)), onPointerDown: onPointerDown })
+            jsx_runtime_1.jsx("line", { x1: connector.from.x, y1: connector.from.y, x2: connector.to.x, y2: connector.to.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "none" }), jsx_runtime_1.jsx("circle", { cx: rotationControl.position.x, cy: rotationControl.position.y, r: ellipseControlRadius, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, style: uvHandleStyle, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: (0, selected_outline_measurement_2.getRotationCursor)((0, selected_outline_measurement_2.getAngleDegrees)(control.center, rotationControl.position)), onPointerDown: onPointerDown })
         ] }));
 };
 const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSelect, outline }) => {
@@ -652,7 +652,7 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
         setPropStatuses,
         setEffectDragOverrides,
     ]);
-    return (jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: handle.isSelected ? selectedUvHandleRadius : uvHandleRadius, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, style: uvHandleStyle, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: "default", onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: handle.isSelected ? selectedUvHandleRadius : uvHandleRadius, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, style: uvHandleStyle, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: "default", onPointerDown: onPointerDown }));
 };
 const SelectedOutlineUvHandleConnectionLayer = ({ outline, target }) => {
     if (!(target === null || target === void 0 ? void 0 : target.containsSelection) || target.uvHandles.length === 0) {

package/dist/components/SidebarCollapserControls.js

@@ -4,6 +4,7 @@ exports.SidebarCollapserControls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const sidebar_1 = require("../state/sidebar");
 const InlineAction_1 = require("./InlineAction");
@@ -12,9 +13,9 @@ const style = {
     width: 16,
     height: 16,
     minWidth: 16,
-    border: '1px solid currentColor',
+    border: colors_1.BORDER_CURRENT_COLOR,
     borderRadius: 3,
-    color: 'currentColor',
+    color: colors_1.CURRENT_COLOR,
     position: 'relative',
 };
 const SidebarCollapserControls = () => {
@@ -26,7 +27,7 @@ const SidebarCollapserControls = () => {
             width: '35%',
             height: '100%',
             borderRight: '1px solid ' + color,
-            background: leftSidebarStatus === 'expanded' ? color : 'transparent',
+            background: leftSidebarStatus === 'expanded' ? color : colors_1.TRANSPARENT,
         };
     }, [leftSidebarStatus]);
     const rightIcon = (0, react_1.useCallback)((color) => {
@@ -36,7 +37,7 @@ const SidebarCollapserControls = () => {
             right: 0,
             position: 'absolute',
             borderLeft: '1px solid ' + color,
-            background: sidebarCollapsedStateRight === 'expanded' ? color : 'transparent',
+            background: sidebarCollapsedStateRight === 'expanded' ? color : colors_1.TRANSPARENT,
         };
     }, [sidebarCollapsedStateRight]);
     const toggleLeft = (0, react_1.useCallback)(() => {

package/dist/components/Splitter/SplitterElement.js

@@ -4,6 +4,7 @@ exports.SplitterElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
 const SplitterContext_1 = require("./SplitterContext");
 const SplitterElement = ({ children, type, sticky }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
@@ -24,7 +25,7 @@ const SplitterElement = ({ children, type, sticky }) => {
             left: (type === 'flexer' ? 0 : context.flexValue) * 100 + '%',
             width: (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 100 +
                 '%',
-            backgroundColor: (0, remotion_1.interpolateColors)((0, remotion_1.random)(context.flexValue), [0, 1], ['red', 'blue']),
+            backgroundColor: (0, remotion_1.interpolateColors)((0, remotion_1.random)(context.flexValue), [0, 1], [colors_1.RED, 'blue']),
         };
     }, [context.flexValue, type]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/StaticFilePreview.js

@@ -11,7 +11,7 @@ const FilePreview_1 = require("./FilePreview");
 const use_static_files_1 = require("./use-static-files");
 const msgStyle = {
     fontSize: 13,
-    color: 'white',
+    color: colors_1.WHITE,
     fontFamily: 'sans-serif',
     display: 'flex',
     justifyContent: 'center',

package/dist/components/Tabs/index.js

@@ -48,10 +48,10 @@ const Tab = ({ children, onClick, style, selected }) => {
         backgroundColor: selected
             ? colors_1.BACKGROUND
             : hovered
-                ? colors_1.CLEAR_HOVER
+                ? colors_1.WHITE_ALPHA_06
                 : colors_1.INPUT_BACKGROUND,
-        color: selected ? 'white' : colors_1.LIGHT_TEXT,
-        borderTop: selected ? '2px solid ' + colors_1.BLUE : '2px solid transparent',
+        color: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+        borderTop: selected ? '2px solid ' + colors_1.BLUE : colors_1.BORDER_TRANSPARENT_2PX,
         boxShadow: selected ? 'none' : undefined,
         ...style,
     }), [hovered, selected, style]);

package/dist/components/Tabs/vertical.js

@@ -33,9 +33,9 @@ const VerticalTab = ({ children, onClick, style, selected }) => {
             backgroundColor: selected
                 ? colors_1.SELECTED_BACKGROUND
                 : hovered
-                    ? colors_1.CLEAR_HOVER
-                    : 'transparent',
-            color: selected ? 'white' : colors_1.LIGHT_TEXT,
+                    ? colors_1.WHITE_ALPHA_06
+                    : colors_1.TRANSPARENT,
+            color: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
             boxShadow: selected ? 'none' : undefined,
             ...style,
         };

package/dist/components/TextViewer.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextViewer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const textStyle = {
     margin: 14,
     fontFamily: 'monospace',
     flex: 1,
-    color: 'white',
+    color: colors_1.WHITE,
     whiteSpace: 'pre-wrap',
 };
 const TextViewer = ({ src }) => {

package/dist/components/TimeValue.js

@@ -12,7 +12,7 @@ const render_frame_1 = require("../state/render-frame");
 const layout_1 = require("./layout");
 const InputDragger_1 = require("./NewComposition/InputDragger");
 const text = {
-    color: 'white',
+    color: colors_1.WHITE,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',

package/dist/components/Timeline/EasingEditorModal.js

@@ -27,7 +27,7 @@ const DEFAULT_EASING_GRAPH_LABELS = {
     start: '0',
     end: '1',
 };
-const EASING_GRAPH_GUIDE_COLOR = 'rgba(255, 255, 255, 0.12)';
+const EASING_GRAPH_GUIDE_COLOR = colors_1.WHITE_ALPHA_12;
 const EASING_GRAPH_LABEL_FONT_SIZE = 13;
 const EASING_GRAPH_LABEL_HEIGHT = 20;
 const EASING_GRAPH_LABEL_HORIZONTAL_PADDING = 4;
@@ -98,7 +98,7 @@ const inspectorPresetButtonsWrapper = {
 const presetButtonBase = {
     alignItems: 'center',
     backgroundColor: colors_1.INPUT_BACKGROUND,
-    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_HOVERED}`,
+    border: `1px solid ${colors_1.WHITE_ALPHA_05}`,
     borderRadius: 4,
     display: 'inline-flex',
     height: 34,
@@ -121,7 +121,7 @@ const coordinateRow = {
 };
 const coordinateLabel = {
     fontSize: 13,
-    color: 'rgba(255, 255, 255, 0.72)',
+    color: colors_1.WHITE_ALPHA_72,
     paddingLeft: 6,
 };
 const coordinateInputWrapper = {
@@ -388,15 +388,15 @@ const EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
     const path = (0, react_1.useMemo)(() => getPresetPreviewPath(preset.easing), [preset.easing]);
     const style = (0, react_1.useMemo)(() => ({
         ...presetButtonBase,
-        backgroundColor: selected ? 'rgba(11, 132, 243, 0.18)' : colors_1.INPUT_BACKGROUND,
-        borderColor: selected ? colors_1.BLUE : colors_1.INPUT_BORDER_COLOR_HOVERED,
+        backgroundColor: selected ? colors_1.EASING_SELECTED_BACKGROUND : colors_1.INPUT_BACKGROUND,
+        borderColor: selected ? colors_1.BLUE : colors_1.WHITE_ALPHA_05,
         cursor: disabled ? 'not-allowed' : 'pointer',
         opacity: disabled ? 0.45 : 1,
     }), [disabled, selected]);
     const handleClick = (0, react_1.useCallback)(() => {
         onClick(preset.easing);
     }, [onClick, preset.easing]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, children: jsx_runtime_1.jsx("svg", { width: PRESET_PREVIEW_WIDTH, height: PRESET_PREVIEW_HEIGHT, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, children: jsx_runtime_1.jsx("svg", { width: PRESET_PREVIEW_WIDTH, height: PRESET_PREVIEW_HEIGHT, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.WHITE, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
 const EasingEditor = ({ state, renderHeader }) => {
     var _a, _b;
@@ -728,7 +728,7 @@ const EasingEditor = ({ state, renderHeader }) => {
     const modeSwitcher = (jsx_runtime_1.jsx("div", { style: segmentedControlWrapper, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }) }));
     return (jsx_runtime_1.jsxs("div", { style: inlineContainer, children: [renderHeader ? renderHeader(modeItems) : null, jsx_runtime_1.jsx("div", { style: renderHeader ? inspectorPresetButtonsWrapper : presetButtonsWrapper, children: EDITOR_EASING_PRESETS.map((preset) => (jsx_runtime_1.jsx(EasingPresetButton, { currentEasing: currentEasing, disabled: disabled, onClick: applyPreset, preset: preset }, preset.id))) }), mode === 'bezier' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("svg", { ref: svgRef, width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Bezier curve editor", children: [
-                            jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("line", { x1: startPoint.x, y1: startPoint.y, x2: firstHandle.x, y2: firstHandle.y, stroke: "rgba(255, 255, 255, 0.35)", strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: endPoint.x, y1: endPoint.y, x2: secondHandle.x, y2: secondHandle.y, stroke: "rgba(255, 255, 255, 0.35)", strokeWidth: 1 }), jsx_runtime_1.jsx("path", { d: bezierPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: startPoint.x, cy: startPoint.y, r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: endPoint.x, cy: endPoint.y, r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: firstHandle.x, cy: firstHandle.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 0 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(0, event) }), jsx_runtime_1.jsx("circle", { cx: secondHandle.x, cy: secondHandle.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 1 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(1, event) })
+                            jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("line", { x1: startPoint.x, y1: startPoint.y, x2: firstHandle.x, y2: firstHandle.y, stroke: colors_1.WHITE_ALPHA_35, strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: endPoint.x, y1: endPoint.y, x2: secondHandle.x, y2: secondHandle.y, stroke: colors_1.WHITE_ALPHA_35, strokeWidth: 1 }), jsx_runtime_1.jsx("path", { d: bezierPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: startPoint.x, cy: startPoint.y, r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: endPoint.x, cy: endPoint.y, r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: firstHandle.x, cy: firstHandle.y, r: 6, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 0 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(0, event) }), jsx_runtime_1.jsx("circle", { cx: secondHandle.x, cy: secondHandle.y, r: 6, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 1 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(1, event) })
                         ] }), modeSwitcher, jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
                             jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "X1" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: bezier[0], status: "ok", onValueChange: (value) => setCoordinate(0, 'x', value, false), onValueChangeEnd: (value) => setCoordinate(0, 'x', value, true), onTextChange: () => undefined, min: 0, max: 1, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false, disabled: disabled }) })
@@ -742,7 +742,7 @@ const EasingEditor = ({ state, renderHeader }) => {
                         ] })
                 ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("svg", { width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Spring easing curve", children: [
-                            jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("path", { d: springPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: xToSvg(0), cy: yToSvg(0), r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: xToSvg(1), cy: yToSvg(1), r: 4, fill: "white" })
+                            jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("path", { d: springPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: xToSvg(0), cy: yToSvg(0), r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: xToSvg(1), cy: yToSvg(1), r: 4, fill: colors_1.WHITE })
                         ] }), modeSwitcher, jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
                             jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Damping" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: spring.damping, status: "ok", onValueChange: (value) => setSpringNumber('damping', value, false), onValueChangeEnd: (value) => setSpringNumber('damping', value, true), onTextChange: () => undefined, min: SPRING_LIMITS.damping.min, max: SPRING_LIMITS.damping.max, step: SPRING_LIMITS.damping.step, formatter: springFormatters.damping, rightAlign: false, style: numberInputStyle, snapToStep: false, dragDecimalPlaces: SPRING_DECIMAL_PLACES.damping, disabled: disabled }) })

package/dist/components/Timeline/KeyframeSettingsModal.js

@@ -30,7 +30,7 @@ const label = {
     fontSize: 13,
 };
 const helperText = {
-    color: 'rgba(255, 255, 255, 0.6)',
+    color: colors_1.WHITE_ALPHA_60,
     fontSize: 12,
     lineHeight: 1.4,
     marginTop: 4,

package/dist/components/Timeline/LoopedIndicator.js

@@ -12,13 +12,13 @@ const width = {
 };
 const icon = {
     height: 12,
-    filter: 'drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8))',
+    filter: colors_1.LOOPED_INDICATOR_DROP_SHADOW,
 };
 const Icon = () => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: icon, children: jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_COLOR, d: "M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l92.686-92.686c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464L170.067 352H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-34.512 32.419c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l92.686-92.686c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0L306.882 29.12c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634z" }) }));
 const verticalLine = {
     height: '100%',
     width: 1,
-    background: 'rgb(255,255,255, 0.5)',
+    background: colors_1.TRANSPARENT,
 };
 const centerContainer = {
     justifyContent: 'center',

package/dist/components/Timeline/MaxTimelineTracks.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
+const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 exports.MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === 'undefined' ||
     process.env.MAX_TIMELINE_TRACKS === null
@@ -13,10 +14,10 @@ const container = {
     height: exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,
     display: 'flex',
     alignItems: 'center',
-    color: 'rgba(255, 255, 255, 0.6)',
+    color: colors_1.WHITE_ALPHA_60,
     fontFamily: 'sans-serif',
     fontSize: 12,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    backgroundColor: colors_1.WHITE_ALPHA_10,
     paddingLeft: timeline_layout_1.TIMELINE_PADDING + 5,
 };
 const MaxTimelineTracksReached = () => {

package/dist/components/Timeline/TimelineArrayField.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineArrayField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const TimelinePrimitiveFieldValue_1 = require("./TimelinePrimitiveFieldValue");
 const container = {
     display: 'flex',
@@ -19,17 +20,17 @@ const itemContainer = {
     minWidth: 0,
 };
 const itemLabel = {
-    color: 'rgba(255, 255, 255, 0.45)',
+    color: colors_1.WHITE_ALPHA_45,
     fontSize: 11,
     fontVariantNumeric: 'tabular-nums',
     width: 18,
     textAlign: 'right',
 };
 const button = {
-    background: 'rgba(255, 255, 255, 0.08)',
-    border: '1px solid rgba(255, 255, 255, 0.12)',
+    background: colors_1.WHITE_ALPHA_08,
+    border: colors_1.BORDER_WHITE_ALPHA_12,
     borderRadius: 3,
-    color: 'white',
+    color: colors_1.WHITE,
     cursor: 'pointer',
     fontSize: 10,
     height: 18,
@@ -66,7 +67,7 @@ const getFallbackItemValue = (field) => {
         return [0.5, 0.5];
     }
     if (field.item.type === 'color') {
-        return '#000000';
+        return colors_1.BLACK_FULL_HEX;
     }
     if (field.item.type === 'enum') {
         const [firstVariant] = field.item.variants;

package/dist/components/Timeline/TimelineColorField.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineColorField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const ColorPicker_1 = require("../ColorPicker/ColorPicker");
 const containerStyle = {
     display: 'flex',
@@ -16,7 +17,7 @@ const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragV
     const currentValue = typeof effectiveValue === 'string'
         ? effectiveValue
         : field.fieldSchema.type === 'color'
-            ? ((_a = field.fieldSchema.default) !== null && _a !== void 0 ? _a : '#000')
+            ? ((_a = field.fieldSchema.default) !== null && _a !== void 0 ? _a : colors_1.BLACK_HEX)
             : '';
     const onChange = (0, react_1.useCallback)((next) => {
         onDragValueChange(next);

package/dist/components/Timeline/TimelineEffectItem.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
@@ -18,7 +19,7 @@ const EFFECT_REORDER_MIME_TYPE = 'application/remotion-effect-reorder';
 let currentEffectDrag = null;
 const rowLabel = {
     fontSize: 12,
-    color: 'rgba(255, 255, 255, 0.8)',
+    color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
 };
 const rowStyle = {
@@ -29,7 +30,7 @@ const reorderWrapper = {
     position: 'relative',
 };
 const reorderLineBase = {
-    backgroundColor: '#0b84ff',
+    backgroundColor: colors_1.TIMELINE_BLUE,
     height: 2,
     left: 0,
     pointerEvents: 'none',

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -174,7 +174,7 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
     }
     if (effectStatus.type === 'cannot-update-effect') {
         if (effectStatus.reason === 'computed') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "computed" });
+            return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "computed", fixHref: TimelineSchemaField_1.TIMELINE_COMPUTED_EFFECT_FIX_LINK }));
         }
         if (effectStatus.reason === 'not-call-expression') {
             return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not inline" });
@@ -200,7 +200,7 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
         return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, sourceFrame: sourceFrame, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: nodePath }));
     }
     if (propStatus.status === 'computed') {
-        return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) });
+        return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus), fixHref: TimelineSchemaField_1.TIMELINE_COMPUTED_EFFECT_FIX_LINK }));
     }
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
         propStatus,

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -36,10 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandArrowSpacer = exports.TimelineExpandArrowButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const colors_1 = require("../../helpers/colors");
 const arrowButton = {
     background: 'none',
     border: 'none',
-    color: 'white',
+    color: colors_1.WHITE,
     cursor: 'pointer',
     padding: 0,
     display: 'flex',
@@ -75,7 +76,7 @@ const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = fals
             opacity: disabled ? 0.5 : 1,
         };
     }, [isExpanded, disabled]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: handleClick, onDoubleClick: stopPropagation, onPointerDown: stopPropagation, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "#ccc" }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: handleClick, onDoubleClick: stopPropagation, onPointerDown: stopPropagation, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: colors_1.LIGHT_GRAY }) }) }));
 };
 exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
 const TimelineExpandArrowSpacer = () => {

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
+const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 const TimelineEffectItem_1 = require("./TimelineEffectItem");
@@ -17,7 +18,7 @@ const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequencePropItem_1 = require("./TimelineSequencePropItem");
 const rowLabel = {
     fontSize: 12,
-    color: 'rgba(255, 255, 255, 0.8)',
+    color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
 };
 const TimelineExpandedRow = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -41,7 +41,7 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const TimelineExpandedRow_1 = require("./TimelineExpandedRow");
 const use_timeline_expanded_tree_1 = require("./use-timeline-expanded-tree");
 const expandedSectionBase = {
-    color: 'white',
+    color: colors_1.WHITE,
     fontFamily: 'Arial, Helvetica, sans-serif',
     fontSize: 12,
     display: 'flex',

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineSelection_1 = require("./TimelineSelection");
 const fieldNameBase = {
     fontSize: 12,
-    color: 'rgba(255, 255, 255, 0.8)',
+    color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
     whiteSpace: 'nowrap',
     overflow: 'hidden',

package/dist/components/Timeline/TimelineFontFamilyField.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusStatic } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TimelineFontFamilyField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly effectiveValue: unknown;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+}>;