@remotion/studio 4.0.485 → 4.0.487

package/dist/components/Timeline/TimelineFontFamilyField.js

@@ -0,0 +1,545 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineFontFamilyField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
+const colors_1 = require("../../helpers/colors");
+const install_required_package_1 = require("../../helpers/install-required-package");
+const caret_1 = require("../../icons/caret");
+const Checkmark_1 = require("../../icons/Checkmark");
+const z_index_1 = require("../../state/z-index");
+const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const portals_1 = require("../Menu/portals");
+const styles_1 = require("../Menu/styles");
+const google_fonts_list_1 = require("./google-fonts-list");
+const ROW_HEIGHT = 30;
+const LIST_HEIGHT = 280;
+const OVERSCAN = 10;
+const POPOVER_WIDTH = 280;
+const CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
+const INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
+const INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
+const googleFonts = google_fonts_list_1.GOOGLE_FONTS_LIST.map((font) => ({
+    id: `google-${font.importName}`,
+    fontFamily: font.fontFamily,
+    label: font.fontFamily,
+    source: 'Google Fonts',
+    value: font.fontFamily,
+    googleFontImportName: font.importName,
+    googleFontCssFamily: font.previewUrl,
+    googleFontWeights: font.weights,
+}));
+const loadedGoogleFontsForPreview = new Set();
+const loadingGoogleFontsForPreview = new Set();
+const loadedGoogleFontsForPickerPreview = new Set();
+const loadingGoogleFontsForPickerPreview = new Set();
+const systemFonts = [
+    'Arial',
+    'Helvetica',
+    'Inter',
+    'Georgia',
+    'Times New Roman',
+    'Courier New',
+    'Verdana',
+    'Tahoma',
+    'Trebuchet MS',
+    'sans-serif',
+    'serif',
+    'monospace',
+].map((fontFamily) => ({
+    id: `system-${fontFamily}`,
+    fontFamily,
+    label: fontFamily,
+    source: 'System',
+    value: fontFamily,
+}));
+const triggerStyle = {
+    marginLeft: 8,
+    padding: '3px 4px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    maxWidth: 140,
+    color: 'white',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const triggerLabel = {
+    fontSize: 11,
+    lineHeight: 1,
+    textAlign: 'left',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const popover = {
+    position: 'fixed',
+    width: POPOVER_WIDTH,
+    backgroundColor: colors_1.BACKGROUND,
+    color: 'white',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+    border: '1px solid rgba(255, 255, 255, 0.08)',
+};
+const searchInput = {
+    boxSizing: 'border-box',
+    width: '100%',
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    border: '1px solid rgba(255, 255, 255, 0.12)',
+    color: 'white',
+    fontSize: 12,
+    outline: 'none',
+    padding: '6px 8px',
+};
+const listStyle = {
+    height: LIST_HEIGHT,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    position: 'relative',
+};
+const noResults = {
+    fontSize: 12,
+    color: colors_1.LIGHT_TEXT,
+    padding: 12,
+};
+const optionButton = {
+    height: ROW_HEIGHT,
+    width: '100%',
+    border: 'none',
+    background: 'transparent',
+    color: 'white',
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0 8px',
+    fontSize: 12,
+    textAlign: 'left',
+    cursor: 'default',
+};
+const optionLabel = {
+    flex: 1,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    fontSize: 12,
+};
+const optionSource = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 10,
+    marginLeft: 8,
+};
+const errorText = {
+    padding: '6px 8px',
+    color: '#ff8a8a',
+    fontSize: 10,
+};
+const portalStyle = ({ size, }) => {
+    const margin = 10;
+    const spaceToBottom = size.windowSize.height - (size.top + size.height) - margin;
+    const spaceToTop = size.top - margin;
+    const openDown = spaceToBottom >= LIST_HEIGHT || spaceToBottom >= spaceToTop;
+    const left = Math.min(Math.max(0, size.left), Math.max(0, size.windowSize.width - POPOVER_WIDTH));
+    return {
+        ...popover,
+        boxShadow: openDown ? styles_1.SHADOW_TOWARDS_BOTTOM : styles_1.SHADOW_TOWARDS_TOP,
+        left,
+        ...(openDown
+            ? { top: size.top + size.height }
+            : { bottom: size.windowSize.height - size.top }),
+    };
+};
+const getCurrentValue = ({ effectiveValue, fallback, }) => {
+    return typeof effectiveValue === 'string' ? effectiveValue : fallback;
+};
+const scrollIndexIntoView = ({ index, list, }) => {
+    const top = index * ROW_HEIGHT;
+    const bottom = top + ROW_HEIGHT;
+    if (top < list.scrollTop) {
+        list.scrollTop = top;
+        return;
+    }
+    if (bottom > list.scrollTop + LIST_HEIGHT) {
+        list.scrollTop = bottom - LIST_HEIGHT;
+    }
+};
+const getGoogleFontSourceEdit = ({ fontFamily, importName, weights, }) => {
+    return {
+        fontFamily,
+        importName,
+        style: 'normal',
+        weights,
+        subsets: ['latin'],
+    };
+};
+const makeFontPreviewName = (fontFamily) => {
+    return `${fontFamily}Preview`;
+};
+const loadGoogleFontForPickerPreview = async ({ fontFamily, cssFamily, document, }) => {
+    if (loadedGoogleFontsForPickerPreview.has(fontFamily) ||
+        loadingGoogleFontsForPickerPreview.has(fontFamily)) {
+        return;
+    }
+    loadingGoogleFontsForPickerPreview.add(fontFamily);
+    try {
+        const response = await fetch(`https://fonts.googleapis.com/css?family=${cssFamily}:400&text=${encodeURIComponent(fontFamily)}`);
+        if (!response.ok) {
+            return;
+        }
+        const cssText = await response.text();
+        const match = cssText.match(/url\(([^)]+)\)/);
+        const url = match === null || match === void 0 ? void 0 : match[1];
+        if (!url) {
+            return;
+        }
+        const fontFace = new FontFace(makeFontPreviewName(fontFamily), `url(${url})`, { weight: '400' });
+        await fontFace.load();
+        document.fonts.add(fontFace);
+        loadedGoogleFontsForPickerPreview.add(fontFamily);
+    }
+    finally {
+        loadingGoogleFontsForPickerPreview.delete(fontFamily);
+    }
+};
+const getGoogleFontUrlsFromCss = (cssText) => {
+    return [...cssText.matchAll(/url\(([^)]+)\)/g)].map((match) => match[1]);
+};
+const loadGoogleFontWeight = async ({ cssFamily, fontFaceFamily, weight, document, text, }) => {
+    const response = await fetch(`https://fonts.googleapis.com/css?family=${cssFamily}:${weight}${text === null ? '' : `&text=${encodeURIComponent(text)}`}`);
+    if (!response.ok) {
+        return false;
+    }
+    const cssText = await response.text();
+    const urls = getGoogleFontUrlsFromCss(cssText);
+    if (urls.length === 0) {
+        return false;
+    }
+    await Promise.all(urls.map(async (url) => {
+        const fontFace = new FontFace(fontFaceFamily, `url(${url})`, { weight });
+        await fontFace.load();
+        document.fonts.add(fontFace);
+    }));
+    return true;
+};
+const commonPreviewFontWeights = ['400', '700', '800'];
+const getGoogleFontPreviewWeights = (weights) => {
+    const commonWeights = weights.filter((weight) => commonPreviewFontWeights.includes(weight));
+    return commonWeights.length ? commonWeights : weights.slice(0, 1);
+};
+const loadGoogleFontForPreview = async ({ fontFamily, cssFamily, weights, document, }) => {
+    if (loadedGoogleFontsForPreview.has(fontFamily) ||
+        loadingGoogleFontsForPreview.has(fontFamily)) {
+        return;
+    }
+    if (!google_fonts_list_1.GOOGLE_FONTS_LIST.some((font) => font.fontFamily === fontFamily)) {
+        return;
+    }
+    loadingGoogleFontsForPreview.add(fontFamily);
+    try {
+        const loadedWeights = await Promise.all(getGoogleFontPreviewWeights(weights).map((weight) => loadGoogleFontWeight({
+            cssFamily,
+            fontFaceFamily: fontFamily,
+            weight,
+            document,
+            text: null,
+        })));
+        if (loadedWeights.some(Boolean)) {
+            loadedGoogleFontsForPreview.add(fontFamily);
+        }
+    }
+    finally {
+        loadingGoogleFontsForPreview.delete(fontFamily);
+    }
+};
+const TimelineFontFamilyField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    const { fieldSchema } = field;
+    if (fieldSchema.type !== 'font-family') {
+        throw new Error('TimelineFontFamilyField rendered for non-font-family field');
+    }
+    const fallback = fieldSchema.default;
+    const current = getCurrentValue({ effectiveValue, fallback });
+    const defaultOption = (0, react_1.useMemo)(() => {
+        return {
+            id: 'default',
+            fontFamily: fallback !== null && fallback !== void 0 ? fallback : null,
+            label: fallback ? `Default (${fallback})` : 'Default',
+            source: 'Default',
+            value: fallback,
+        };
+    }, [fallback]);
+    const [opened, setOpened] = (0, react_1.useState)(false);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [highlightedIndex, setHighlightedIndex] = (0, react_1.useState)(0);
+    const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
+    const [loadedPickerPreviewFonts, setLoadedPickerPreviewFonts] = (0, react_1.useState)(() => new Set(loadedGoogleFontsForPickerPreview));
+    const [saveError, setSaveError] = (0, react_1.useState)(null);
+    const buttonRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const listRef = (0, react_1.useRef)(null);
+    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
+    const size = player_1.PlayerInternals.useElementSize(buttonRef, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const options = (0, react_1.useMemo)(() => {
+        const base = [defaultOption, ...systemFonts, ...googleFonts];
+        if (!current || base.some((option) => option.value === current)) {
+            return base;
+        }
+        return [
+            defaultOption,
+            {
+                id: `current-${current}`,
+                fontFamily: current,
+                label: current,
+                source: 'Current',
+                value: current,
+            },
+            ...systemFonts,
+            ...googleFonts,
+        ];
+    }, [current, defaultOption]);
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        const needle = query.trim().toLowerCase();
+        if (!needle) {
+            return options;
+        }
+        return options.filter((option) => {
+            return option.label.toLowerCase().includes(needle);
+        });
+    }, [options, query]);
+    const selected = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = options.find((option) => option.value === current)) !== null && _a !== void 0 ? _a : defaultOption;
+    }, [current, defaultOption, options]);
+    const visibleRange = (0, react_1.useMemo)(() => {
+        const visibleCount = Math.ceil(LIST_HEIGHT / ROW_HEIGHT);
+        const start = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - OVERSCAN);
+        const end = Math.min(filteredOptions.length, start + visibleCount + OVERSCAN * 2);
+        return { start, end };
+    }, [filteredOptions.length, scrollTop]);
+    const hide = (0, react_1.useCallback)(() => {
+        setOpened(false);
+        setQuery('');
+    }, []);
+    const selectOption = (0, react_1.useCallback)((option) => {
+        setSaveError(null);
+        if (option.value === propStatus.codeValue) {
+            hide();
+            return;
+        }
+        onDragValueChange(option.value);
+        hide();
+        const save = async () => {
+            var _a, _b;
+            if (option.source !== 'Google Fonts' || !option.googleFontImportName) {
+                await onSave(option.value);
+                return;
+            }
+            await (0, install_required_package_1.installRequiredPackages)(['@remotion/google-fonts']);
+            const googleFont = getGoogleFontSourceEdit({
+                fontFamily: (_a = option.value) !== null && _a !== void 0 ? _a : option.label,
+                importName: option.googleFontImportName,
+                weights: (_b = option.googleFontWeights) !== null && _b !== void 0 ? _b : ['400'],
+            });
+            await onSave(option.value, {
+                sourceEdit: { type: 'google-font', font: googleFont },
+            });
+        };
+        save()
+            .catch((err) => {
+            onDragValueChange(propStatus.codeValue);
+            setSaveError(err instanceof Error ? err.message : String(err));
+        })
+            .finally(() => {
+            onDragEnd();
+        });
+    }, [propStatus.codeValue, onDragValueChange, hide, onSave, onDragEnd]);
+    const toggleOpened = (0, react_1.useCallback)(() => {
+        var _a;
+        if (opened) {
+            setOpened(false);
+            return;
+        }
+        (_a = size === null || size === void 0 ? void 0 : size.refresh) === null || _a === void 0 ? void 0 : _a.call(size);
+        setOpened(true);
+    }, [opened, size]);
+    (0, react_1.useEffect)(() => {
+        if (!opened) {
+            return;
+        }
+        const selectedIndex = filteredOptions.findIndex((option) => option.value === current);
+        const nextIndex = Math.max(0, selectedIndex);
+        setHighlightedIndex(nextIndex);
+        requestAnimationFrame(() => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            const list = listRef.current;
+            if (!list) {
+                return;
+            }
+            list.scrollTop = Math.max(0, nextIndex * ROW_HEIGHT - LIST_HEIGHT / 2 + ROW_HEIGHT / 2);
+        });
+    }, [current, filteredOptions, opened]);
+    (0, react_1.useEffect)(() => {
+        setHighlightedIndex(0);
+        if (listRef.current) {
+            listRef.current.scrollTop = 0;
+        }
+    }, [query]);
+    (0, react_1.useEffect)(() => {
+        if (!current) {
+            return;
+        }
+        const googleFont = google_fonts_list_1.GOOGLE_FONTS_LIST.find((font) => font.fontFamily === current);
+        if (!googleFont) {
+            return;
+        }
+        loadGoogleFontForPreview({
+            fontFamily: current,
+            cssFamily: googleFont.previewUrl,
+            weights: googleFont.weights,
+            document,
+        }).catch(() => undefined);
+        loadGoogleFontForPickerPreview({
+            fontFamily: current,
+            cssFamily: googleFont.previewUrl,
+            document,
+        })
+            .then(() => {
+            setLoadedPickerPreviewFonts(new Set(loadedGoogleFontsForPickerPreview));
+        })
+            .catch(() => undefined);
+    }, [current]);
+    (0, react_1.useEffect)(() => {
+        if (!opened) {
+            return;
+        }
+        const visibleGoogleFonts = filteredOptions
+            .slice(visibleRange.start, visibleRange.end)
+            .filter((option) => option.source === 'Google Fonts' &&
+            option.fontFamily &&
+            option.googleFontCssFamily);
+        if (visibleGoogleFonts.length === 0) {
+            return;
+        }
+        Promise.all(visibleGoogleFonts.map((font) => loadGoogleFontForPickerPreview({
+            fontFamily: font.fontFamily,
+            cssFamily: font.googleFontCssFamily,
+            document,
+        })))
+            .then(() => {
+            setLoadedPickerPreviewFonts(new Set(loadedGoogleFontsForPickerPreview));
+        })
+            .catch(() => undefined);
+    }, [filteredOptions, opened, visibleRange.end, visibleRange.start]);
+    const onKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setHighlightedIndex((prev) => {
+                const next = Math.max(0, Math.min(filteredOptions.length - 1, prev + 1));
+                if (listRef.current) {
+                    scrollIndexIntoView({ index: next, list: listRef.current });
+                }
+                return next;
+            });
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setHighlightedIndex((prev) => {
+                const next = Math.max(0, prev - 1);
+                if (listRef.current) {
+                    scrollIndexIntoView({ index: next, list: listRef.current });
+                }
+                return next;
+            });
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const option = filteredOptions[highlightedIndex];
+            if (option) {
+                selectOption(option);
+            }
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            hide();
+        }
+    }, [filteredOptions, hide, highlightedIndex, selectOption]);
+    const renderedOptions = filteredOptions.slice(visibleRange.start, visibleRange.end);
+    const getOptionPreviewStyle = (0, react_1.useCallback)((option) => {
+        if (option.source !== 'Google Fonts' ||
+            !option.fontFamily ||
+            !loadedPickerPreviewFonts.has(option.fontFamily)) {
+            return {};
+        }
+        return { fontFamily: makeFontPreviewName(option.fontFamily) };
+    }, [loadedPickerPreviewFonts]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...triggerStyle,
+            borderColor: opened
+                ? colors_1.SELECTED_BACKGROUND
+                : hovered
+                    ? INPUT_BORDER_COLOR_HOVERED
+                    : INPUT_BORDER_COLOR_UNHOVERED,
+        };
+    }, [hovered, opened]);
+    const selectedPreviewStyle = getOptionPreviewStyle(selected);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsxs("button", { ref: buttonRef, title: field.key, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: (event) => {
+                    event.stopPropagation();
+                    toggleOpened();
+                }, onClick: (event) => {
+                    event.stopPropagation();
+                    if (event.detail === 0) {
+                        toggleOpened();
+                    }
+                }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [
+                    jsx_runtime_1.jsx("div", { title: selected.label, style: { ...triggerLabel, ...selectedPreviewStyle }, children: selected.label }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { small: true })
+                ] }), saveError === null ? null : jsx_runtime_1.jsx("div", { style: errorText, children: saveError }), opened && size
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: (event) => event.stopPropagation(), children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: hide, onEscape: hide, children: jsx_runtime_1.jsxs("div", { style: portalStyle({ size }), children: [
+                                    jsx_runtime_1.jsx("div", { style: { padding: 6 }, children: jsx_runtime_1.jsx("input", { ref: inputRef, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown, placeholder: "Search fonts", style: searchInput }) }), filteredOptions.length === 0 ? (jsx_runtime_1.jsx("div", { style: noResults, children: "No fonts found" })) : (jsx_runtime_1.jsxs("div", { ref: listRef, style: listStyle, onScroll: (event) => {
+                                            setScrollTop(event.currentTarget.scrollTop);
+                                        }, children: [
+                                            jsx_runtime_1.jsx("div", { style: { height: visibleRange.start * ROW_HEIGHT } }), renderedOptions.map((option, index) => {
+                                                const actualIndex = visibleRange.start + index;
+                                                const isSelected = option.value === current;
+                                                const isHighlighted = actualIndex === highlightedIndex;
+                                                return (jsx_runtime_1.jsxs("button", { type: "button", style: {
+                                                        ...optionButton,
+                                                        backgroundColor: isHighlighted
+                                                            ? CLEAR_HOVER
+                                                            : isSelected
+                                                                ? colors_1.SELECTED_BACKGROUND
+                                                                : 'transparent',
+                                                    }, onPointerEnter: () => setHighlightedIndex(actualIndex), onPointerDown: (event) => {
+                                                        event.preventDefault();
+                                                        event.stopPropagation();
+                                                        selectOption(option);
+                                                    }, children: [
+                                                        jsx_runtime_1.jsx("span", { style: { width: 18 }, children: isSelected ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: 11 }) : null }), jsx_runtime_1.jsx("span", { style: {
+                                                                ...optionLabel,
+                                                                ...getOptionPreviewStyle(option),
+                                                            }, children: option.label }), jsx_runtime_1.jsx("span", { style: optionSource, children: option.source })
+                                                    ] }, option.id));
+                                            }), jsx_runtime_1.jsx("div", { style: {
+                                                    height: (filteredOptions.length - visibleRange.end) *
+                                                        ROW_HEIGHT,
+                                                } })
+                                        ] })), jsx_runtime_1.jsx("div", { style: {
+                                            padding: '6px 8px',
+                                            color: colors_1.LIGHT_TEXT,
+                                            fontSize: 10,
+                                        }, children: "Google Fonts are loaded for Studio preview and saved to your composition when selected." })
+                                ] }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+exports.TimelineFontFamilyField = TimelineFontFamilyField;

package/dist/components/Timeline/TimelineImageInfo.js

@@ -4,12 +4,13 @@ exports.TimelineImageInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const timeline_utils_1 = require("@remotion/timeline-utils");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const HEIGHT = (0, timeline_layout_1.getTimelineLayerHeight)('image') - 2;
 const containerStyle = {
     height: HEIGHT,
     width: '100%',
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    backgroundColor: colors_1.BLACK_ALPHA_30,
     display: 'flex',
     borderTopLeftRadius: 2,
     borderBottomLeftRadius: 2,

package/dist/components/Timeline/TimelineInOutPointer.js

@@ -4,12 +4,13 @@ exports.TimelineInOutPointer = exports.outMarkerAreaRef = exports.inMarkerAreaRe
 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 get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const in_out_1 = require("../../state/in-out");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const areaHighlight = {
     position: 'absolute',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    backgroundColor: colors_1.BLACK_ALPHA_50,
     height: '100%',
     bottom: 0,
     top: 0,

package/dist/components/Timeline/TimelineInOutPointerHandle.js

@@ -12,7 +12,7 @@ const line = {
     height: '100%',
     width: 1,
     position: 'absolute',
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    backgroundColor: colors_1.WHITE_ALPHA_10,
     cursor: 'ew-resize',
     paddingLeft: 1,
     paddingRight: 1,
@@ -24,9 +24,7 @@ const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, onPointerDown, tim
     const style = (0, react_1.useMemo)(() => {
         return {
             ...line,
-            backgroundColor: dragging
-                ? colors_1.LIGHT_TRANSPARENT
-                : 'rgba(255, 255, 255, 0.1)',
+            backgroundColor: dragging ? colors_1.WHITE_ALPHA_70 : colors_1.WHITE_ALPHA_10,
             transform: `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(atFrame, videoConfig.durationInFrames, timelineWidth)}px)`,
             top: 0,
         };

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -29,7 +29,7 @@ const navButtonStyle = {
     alignItems: 'center',
     background: 'none',
     border: 'none',
-    color: 'white',
+    color: colors_1.WHITE,
     cursor: 'pointer',
     display: 'flex',
     flexShrink: 0,
@@ -469,7 +469,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     }), [canToggleKeyframe, clientId]);
     const diamondColor = hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT;
     return (jsx_runtime_1.jsxs("div", { style: controlsContainerStyle, children: [
-            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: "#ccc" }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: diamondColor, size: 12 }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: "#ccc" }) }) })
+            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: colors_1.LIGHT_GRAY }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: diamondColor, size: 12 }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: colors_1.LIGHT_GRAY }) }) })
         ] }));
 };
 exports.TimelineKeyframeControls = TimelineKeyframeControls;

package/dist/components/Timeline/TimelineKeyframeDiamondIcon.js

@@ -8,7 +8,7 @@ const svgStyle = {
     overflow: 'visible',
 };
 const TimelineKeyframeDiamondIcon = ({ color, selected = false, size }) => {
-    return (jsx_runtime_1.jsxs("svg", { width: size, height: size, viewBox: "0 0 12 12", style: svgStyle, "aria-hidden": "true", focusable: "false", children: [selected ? (jsx_runtime_1.jsx("polygon", { points: "6 0.75 11.25 6 6 11.25 0.75 6", fill: "none", stroke: colors_1.BLUE, strokeWidth: "1.5", strokeLinejoin: "round" })) : null, jsx_runtime_1.jsx("polygon", { points: "6 1.5 10.5 6 6 10.5 1.5 6", fill: color, stroke: "rgba(0, 0, 0, 0.4)", strokeWidth: "1", strokeLinejoin: "round" })
+    return (jsx_runtime_1.jsxs("svg", { width: size, height: size, viewBox: "0 0 12 12", style: svgStyle, "aria-hidden": "true", focusable: "false", children: [selected ? (jsx_runtime_1.jsx("polygon", { points: "6 0.75 11.25 6 6 11.25 0.75 6", fill: "none", stroke: colors_1.BLUE, strokeWidth: "1.5", strokeLinejoin: "round" })) : null, jsx_runtime_1.jsx("polygon", { points: "6 1.5 10.5 6 6 10.5 1.5 6", fill: color, stroke: colors_1.BLACK_ALPHA_40, strokeWidth: "1", strokeLinejoin: "round" })
         ] }));
 };
 exports.TimelineKeyframeDiamondIcon = TimelineKeyframeDiamondIcon;

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -58,7 +58,7 @@ const easingLineButton = {
     transform: 'translateY(-50%)',
 };
 const easingLine = {
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    backgroundColor: colors_1.WHITE_ALPHA_10,
     borderRadius: lineHeight / 2,
     height: lineHeight,
     left: 0,

package/dist/components/Timeline/TimelineLayerEye.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const eyeIcon = {
     width: 12,
-    color: 'currentColor',
+    color: colors_1.CURRENT_COLOR,
     pointerEvents: 'none',
 };
 const effectIcon = {
@@ -22,7 +22,7 @@ exports.timelineLayerIconContainer = {
     height: 16,
     width: 16,
     borderRadius: 2,
-    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    backgroundColor: colors_1.BLACK_ALPHA_40,
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -39,7 +39,7 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
             return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 10 14", fill: "none", style: speakerIcon, children: jsx_runtime_1.jsx("path", { d: "M9.40938 0.0869018C9.76875 0.249402 10 0.605652 10 0.999402V12.9994C10 13.3932 9.76875 13.7494 9.40938 13.9119C9.05 14.0744 8.62813 14.0088 8.33438 13.7463L4.11875 9.9994H2C0.896875 9.9994 0 9.10253 0 7.9994V5.9994C0 4.89628 0.896875 3.9994 2 3.9994H4.11875L8.33438 0.252527C8.62813 -0.0099732 9.05 -0.0724732 9.40938 0.0869018Z", fill: color }) }));
         }
         if (type === 'effect') {
-            return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 16 16", fill: "none", style: effectIcon, children: jsx_runtime_1.jsx("path", { d: "M4.405 4.48C4.575 3.82 4.865 3.325 5.275 2.995C5.695 2.665 6.25 2.5 6.94 2.5H9.235V4.06H7.045C6.555 4.06 6.235 4.3 6.085 4.78L5.83 5.68H7.975V7.255H5.395L3.805 13H2.02L3.625 7.255H1.96V5.68H4.075L4.405 4.48ZM8.57102 9.085L6.87602 5.68H8.79602L9.86102 7.99L11.991 5.68H14.331L10.686 9.415L12.426 13H10.491L9.35102 10.585L7.02602 13H4.68602L8.57102 9.085Z", fill: "white" }) }));
+            return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 16 16", fill: "none", style: effectIcon, children: jsx_runtime_1.jsx("path", { d: "M4.405 4.48C4.575 3.82 4.865 3.325 5.275 2.995C5.695 2.665 6.25 2.5 6.94 2.5H9.235V4.06H7.045C6.555 4.06 6.235 4.3 6.085 4.78L5.83 5.68H7.975V7.255H5.395L3.805 13H2.02L3.625 7.255H1.96V5.68H4.075L4.405 4.48ZM8.57102 9.085L6.87602 5.68H8.79602L9.86102 7.99L11.991 5.68H14.331L10.686 9.415L12.426 13H10.491L9.35102 10.585L7.02602 13H4.68602L8.57102 9.085Z", fill: colors_1.WHITE }) }));
         }
         return (jsx_runtime_1.jsx("svg", { style: eyeIcon, viewBox: "0 0 24 16", fill: "none", children: jsx_runtime_1.jsx("path", { d: "M24 7.551C24 7.551 19.748 16 12.015 16C4.835 16 0 7.551 0 7.551C0 7.551 4.446 0 12.015 0C19.709 0 24 7.551 24 7.551ZM17 8C17 5.243 14.757 3 12 3C9.243 3 7 5.243 7 8C7 10.757 9.243 13 12 13C14.757 13 17 10.757 17 8Z", fill: color }) }));
     }, [hidden, type]);