@remotion/studio 4.0.484 → 4.0.486

package/dist/ResolveCompositionConfigInStudio.js

@@ -127,11 +127,52 @@ const ResolveCompositionConfigInStudio = ({ children }) => {
         return controller;
     }, [hasResolution]);
     const currentComposition = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
+    const resolveComposition = (0, react_1.useCallback)(async (compositionId) => {
+        var _a, _b, _c, _d, _e, _f;
+        const composition = compositions.find((c) => c.id === compositionId);
+        if (!composition) {
+            throw new Error(`Could not find composition with id ${compositionId}`);
+        }
+        const editorProps = (_a = allEditorProps[composition.id]) !== null && _a !== void 0 ? _a : {};
+        const defaultProps = {
+            ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
+            ...(editorProps !== null && editorProps !== void 0 ? editorProps : {}),
+        };
+        const combinedProps = {
+            ...defaultProps,
+            ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
+        };
+        const controller = new AbortController();
+        const result = remotion_1.Internals.resolveVideoConfigOrCatch({
+            compositionId: composition.id,
+            calculateMetadata: composition.calculateMetadata,
+            inputProps: combinedProps,
+            signal: controller.signal,
+            defaultProps,
+            compositionDurationInFrames: (_c = composition.durationInFrames) !== null && _c !== void 0 ? _c : null,
+            compositionFps: (_d = composition.fps) !== null && _d !== void 0 ? _d : null,
+            compositionHeight: (_e = composition.height) !== null && _e !== void 0 ? _e : null,
+            compositionWidth: (_f = composition.width) !== null && _f !== void 0 ? _f : null,
+        });
+        if (result.type === 'error') {
+            throw result.error;
+        }
+        const resolved = await Promise.resolve(result.result);
+        setResolvedConfigs((configs) => ({
+            ...configs,
+            [composition.id]: {
+                type: 'success',
+                result: resolved,
+            },
+        }));
+        return resolved;
+    }, [allEditorProps, compositions, inputProps]);
     (0, react_1.useImperativeHandle)(remotion_1.Internals.resolveCompositionsRef, () => {
         return {
             setCurrentRenderModalComposition: (id) => {
                 setCurrentRenderModalComposition(id);
             },
+            resolveComposition,
             reloadCurrentlySelectedComposition: () => {
                 var _a, _b, _c, _d, _e, _f;
                 if (!currentComposition) {
@@ -168,6 +209,7 @@ const ResolveCompositionConfigInStudio = ({ children }) => {
         currentComposition,
         doResolution,
         inputProps,
+        resolveComposition,
     ]);
     const isTheSame = (selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.id) === (renderModalComposition === null || renderModalComposition === void 0 ? void 0 : renderModalComposition.id);
     const currentDefaultProps = (0, react_1.useMemo)(() => {

package/dist/components/AssetSelector.js

@@ -162,7 +162,7 @@ const AssetSelector = ({ readOnlyStudio }) => {
                     " folder of your project or drag and drop a file here."] }) })) : (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, create a folder called", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
                     " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {
                 ...list,
-                backgroundColor: isDropDiv ? colors_1.CLEAR_HOVER : colors_1.BACKGROUND,
+                backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
             }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: jsx_runtime_1.jsx(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }) })) }));
 };
 exports.AssetSelector = AssetSelector;

package/dist/components/AssetSelectorItem.js

@@ -96,7 +96,7 @@ const labelStyle = {
 };
 const revealIconStyle = {
     height: 12,
-    color: 'currentColor',
+    color: colors_1.CURRENT_COLOR,
 };
 const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dropLocation, setDropLocation, readOnlyStudio, }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
@@ -117,13 +117,13 @@ const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dr
         return {
             ...itemStyle,
             paddingLeft: 4 + level * 8,
-            backgroundColor: hovered ? colors_1.CLEAR_HOVER : 'transparent',
+            backgroundColor: hovered ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
         };
     }, [hovered, level]);
     const label = (0, react_1.useMemo)(() => {
         return {
             ...labelStyle,
-            color: hovered ? 'white' : colors_1.LIGHT_TEXT,
+            color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
         };
     }, [hovered]);
     const onClick = (0, react_1.useCallback)(() => {
@@ -131,7 +131,7 @@ const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dr
     }, [item.name, parentFolder, toggleFolder]);
     const Icon = item.expanded ? folder_1.ExpandedFolderIcon : folder_1.CollapsedFolderIcon;
     return (jsx_runtime_1.jsxs("div", { onDragEnter: onDragEnter, onDragLeave: onDragLeave, style: {
-            backgroundColor: isDropDiv ? colors_1.CLEAR_HOVER : colors_1.BACKGROUND,
+            backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
         }, children: [
             jsx_runtime_1.jsx("div", { style: folderStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, title: item.name, onClick: onClick, onDragEnter: (event) => {
                     if (!(0, use_asset_drag_events_1.isFileDragEvent)(event)) {
@@ -150,7 +150,7 @@ const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dr
                         clearTimeout(openFolderTimerRef.current);
                     }
                 }, children: jsx_runtime_1.jsxs(layout_1.Row, { children: [
-                        jsx_runtime_1.jsx(Icon, { style: iconStyle, color: hovered ? 'white' : colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name })
+                        jsx_runtime_1.jsx(Icon, { style: iconStyle, color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name })
                     ] }) }), item.expanded ? (jsx_runtime_1.jsx(exports.AssetFolderTree, { item: item.items, name: item.name, level: level, parentFolder: parentFolder, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }, item.name)) : null] }));
 };
 const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, tabIndex, dropLocation, setDropLocation, readOnlyStudio, }) => {
@@ -229,21 +229,21 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const style = (0, react_1.useMemo)(() => {
         return {
             ...itemStyle,
-            color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT,
+            color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
             backgroundColor: hovered
                 ? selected
                     ? colors_1.SELECTED_BACKGROUND
-                    : colors_1.CLEAR_HOVER
+                    : colors_1.WHITE_ALPHA_06
                 : selected
                     ? colors_1.SELECTED_BACKGROUND
-                    : 'transparent',
+                    : colors_1.TRANSPARENT,
             paddingLeft: 12 + level * 8,
         };
     }, [hovered, level, selected]);
     const label = (0, react_1.useMemo)(() => {
         return {
             ...labelStyle,
-            color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT,
+            color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
         };
     }, [hovered, selected]);
     const renderFileExplorerAction = (0, react_1.useCallback)((color) => {

package/dist/components/AudioWaveform.js

@@ -67,7 +67,7 @@ const drawLoopedWaveform = ({ canvas, peaks, volume, visualizationWidth, loopWid
     (0, timeline_utils_1.drawBars)({
         canvas: targetCanvas,
         peaks,
-        color: 'rgba(255, 255, 255, 0.6)',
+        color: colors_1.WHITE_ALPHA_60,
         volume,
         width: targetCanvas.width,
     });
@@ -246,7 +246,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
             (0, timeline_utils_1.drawBars)({
                 canvas: canvasElement,
                 peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
-                color: 'rgba(255, 255, 255, 0.6)',
+                color: colors_1.WHITE_ALPHA_60,
                 volume: parsedVolume,
                 width: w,
             });
@@ -298,7 +298,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
                 context.lineTo(x, y);
             }
         });
-        context.strokeStyle = colors_1.LIGHT_TRANSPARENT;
+        context.strokeStyle = colors_1.WHITE_ALPHA_70;
         context.stroke();
     }, [height, parsedVolume, shouldRenderVolumeOverlay, visualizationWidth]);
     if (error) {

package/dist/components/Button.js

@@ -5,13 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const button = {
-    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
     borderRadius: 4,
     backgroundColor: colors_1.INPUT_BACKGROUND,
     appearance: 'none',
     fontFamily: 'inherit',
     fontSize: 14,
-    color: 'white',
+    color: colors_1.WHITE,
     flexDirection: 'row',
 };
 const ButtonRefForwardFunction = ({ children, onClick, title, disabled, size = 'default', style, id, autoFocus, buttonContainerStyle, onPointerDown, }, ref) => {

package/dist/components/Canvas.js

@@ -58,6 +58,11 @@ const isComponentDragEvent = (event) => {
     var _b;
     return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPONENT_DRAG_MIME_TYPE);
 };
+const isCompositionDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
+};
 const isElementDragEvent = (event) => {
     var _a;
     var _b;
@@ -71,6 +76,7 @@ const isSfxDragEvent = (event) => {
 const isRemoteAssetDragEvent = (event) => {
     return (!isFileDragEvent(event) &&
         !isAssetDragEvent(event) &&
+        !isCompositionDragEvent(event) &&
         !isComponentDragEvent(event) &&
         !isElementDragEvent(event) &&
         !isSfxDragEvent(event) &&
@@ -85,6 +91,14 @@ const getAssetDragPath = (event) => {
     }
     return (_c = (_b = (0, studio_shared_1.parseAssetDragData)(value)) === null || _b === void 0 ? void 0 : _b.assetPath) !== null && _c !== void 0 ? _c : null;
 };
+const getCompositionDragData = (event) => {
+    var _a;
+    const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
+    if (!value) {
+        return null;
+    }
+    return (0, studio_shared_1.parseCompositionDragData)(value);
+};
 const getComponentDragData = (event) => {
     var _a;
     for (const type of [
@@ -566,6 +580,7 @@ const Canvas = ({ canvasContent, size }) => {
         if (!canDropAssets ||
             (!isFileDragEvent(event) &&
                 !isAssetDragEvent(event) &&
+                !isCompositionDragEvent(event) &&
                 !isComponentDragEvent(event) &&
                 !isElementDragEvent(event) &&
                 !isSfxDragEvent(event) &&
@@ -586,6 +601,7 @@ const Canvas = ({ canvasContent, size }) => {
             currentCompositionId === null ||
             (!isFileDragEvent(event) &&
                 !isAssetDragEvent(event) &&
+                !isCompositionDragEvent(event) &&
                 !isComponentDragEvent(event) &&
                 !isElementDragEvent(event) &&
                 !isSfxDragEvent(event) &&
@@ -644,6 +660,18 @@ const Canvas = ({ canvasContent, size }) => {
                     compositionId: currentCompositionId,
                 });
             }
+            else if (isCompositionDragEvent(event)) {
+                const compositionDragData = getCompositionDragData(event);
+                if (compositionDragData === null) {
+                    return;
+                }
+                await (0, import_assets_1.insertComposition)({
+                    composition: compositionDragData,
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                    dropPosition,
+                });
+            }
             else {
                 const elementDragData = (0, element_drag_and_drop_1.getElementDragData)(event.dataTransfer);
                 if (elementDragData !== null) {

package/dist/components/CanvasOrLoading.js

@@ -17,7 +17,7 @@ const imperative_state_1 = require("./Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const ZoomPersistor_1 = require("./ZoomPersistor");
 const container = {
-    color: 'white',
+    color: colors_1.WHITE,
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',

package/dist/components/CheckboardToggle.js

@@ -21,6 +21,6 @@ const CheckboardToggle = () => {
             return !c;
         });
     }, [setCheckerboard]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : 'white', d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : colors_1.WHITE, d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
 };
 exports.CheckboardToggle = CheckboardToggle;

package/dist/components/Checkbox.js

@@ -43,13 +43,13 @@ const Checkbox = ({ checked, onChange, disabled, name, rounded, variant = 'defau
         top: 0,
         left: 0,
         pointerEvents: 'none',
-        color: 'white',
+        color: colors_1.WHITE,
     }), [size]);
     const input = (0, react_1.useMemo)(() => {
         return {
             appearance: 'none',
-            background: disabled ? 'transparent' : colors_1.INPUT_BACKGROUND,
-            border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            background: disabled ? colors_1.TRANSPARENT : colors_1.INPUT_BACKGROUND,
+            border: '1px solid ' + colors_1.BLACK_ALPHA_60,
             height: size,
             width: size,
             top: 0,

package/dist/components/ColorPicker/AlphaSlider.js

@@ -4,6 +4,7 @@ exports.AlphaSlider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const color_conversion_1 = require("../../helpers/color-conversion");
+const colors_1 = require("../../helpers/colors");
 const checker_1 = require("./checker");
 const SLIDER_HEIGHT = 12;
 const HANDLE_WIDTH = 8;
@@ -33,7 +34,7 @@ const AlphaSlider = ({ hue, saturation, value, alpha, onChange, onChangeComplete
     const gradientStyle = (0, react_1.useMemo)(() => {
         return {
             ...innerStyle,
-            background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${opaqueColor})`,
+            background: `linear-gradient(to right, ${colors_1.COLOR_PICKER_ALPHA_TRANSPARENT}, ${opaqueColor})`,
         };
     }, [opaqueColor]);
     const updateFromEvent = (0, react_1.useCallback)((clientX, isFinal) => {
@@ -76,8 +77,8 @@ const AlphaSlider = ({ hue, saturation, value, alpha, onChange, onChangeComplete
             width: HANDLE_WIDTH,
             height: SLIDER_HEIGHT + 4,
             borderRadius: 2,
-            border: '2px solid #fff',
-            boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.6)',
+            border: colors_1.BORDER_WHITE_2PX,
+            boxShadow: colors_1.COLOR_PICKER_HANDLE_SHADOW,
             pointerEvents: 'none',
         };
     }, [alpha]);

package/dist/components/ColorPicker/ColorPicker.js

@@ -46,7 +46,7 @@ const controlStyle = {
     flex: '0 0 auto',
 };
 const eyedropperButtonBaseStyle = {
-    background: 'transparent',
+    background: colors_1.TRANSPARENT,
     border: 'none',
     padding: 0,
     margin: 0,
@@ -179,7 +179,7 @@ const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45,
                 ...styles_1.menuContainerTowardsBottom,
                 top: size.top + size.height + margin,
                 left,
-                background: 'transparent',
+                background: colors_1.TRANSPARENT,
                 boxShadow: 'none',
             };
         }
@@ -187,7 +187,7 @@ const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45,
             ...styles_1.menuContainerTowardsTop,
             bottom: size.windowSize.height - size.top + margin,
             left,
-            background: 'transparent',
+            background: colors_1.TRANSPARENT,
             boxShadow: 'none',
         };
     }, [opened, size]);
@@ -204,7 +204,7 @@ const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45,
             jsx_runtime_1.jsxs("span", { style: controlStyle, children: [
                     jsx_runtime_1.jsx("button", { ref: triggerRef, type: "button", className: [is_menu_item_1.MENU_INITIATOR_CLASSNAME, SWATCH_CLASSNAME, className]
                             .filter(Boolean)
-                            .join(' '), disabled: disabled, name: name, title: title !== null && title !== void 0 ? title : value, tabIndex: tabIndex, style: swatchStyle, onPointerDown: onTriggerPointerDown, onClick: onTriggerClick, children: jsx_runtime_1.jsx("span", { style: swatchFill }) }), showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, style: eyedropperButtonStyle, onPointerDown: onEyeDropperPointerDown, onClick: onPickWithEyeDropper, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: eyedropperIconStyle, color: "currentColor" }) })) : null] }), portalStyle
+                            .join(' '), disabled: disabled, name: name, title: title !== null && title !== void 0 ? title : value, tabIndex: tabIndex, style: swatchStyle, onPointerDown: onTriggerPointerDown, onClick: onTriggerClick, children: jsx_runtime_1.jsx("span", { style: swatchFill }) }), showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, style: eyedropperButtonStyle, onPointerDown: onEyeDropperPointerDown, onClick: onPickWithEyeDropper, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: eyedropperIconStyle, color: colors_1.CURRENT_COLOR }) })) : null] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(ColorPickerPopup_1.ColorPickerPopup, { value: value, onChange: onChange, onChangeComplete: onChangeComplete }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/ColorPicker/ColorPickerPopup.js

@@ -16,14 +16,14 @@ const POPUP_PADDING = 12;
 const popupShellStyle = {
     width: exports.POPUP_WIDTH,
     padding: POPUP_PADDING,
-    background: '#1f2428',
-    border: '1px solid rgba(0, 0, 0, 0.6)',
+    background: colors_1.BACKGROUND_HEX,
+    border: colors_1.BORDER_BLACK_ALPHA_60,
     borderRadius: 4,
-    boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
+    boxShadow: colors_1.COLOR_PICKER_POPUP_SHADOW,
     display: 'flex',
     flexDirection: 'column',
     gap: 10,
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 12,
     userSelect: 'none',
     WebkitUserSelect: 'none',
@@ -40,7 +40,7 @@ const previewSwatchStyle = {
     flex: '0 0 auto',
     borderRadius: 14,
     overflow: 'hidden',
-    border: '1px solid rgba(0, 0, 0, 0.6)',
+    border: colors_1.BORDER_BLACK_ALPHA_60,
     backgroundColor: checker_1.CHECKER_BACKGROUND_COLOR,
     backgroundImage: checker_1.CHECKER_BACKGROUND_IMAGE,
     backgroundSize: checker_1.CHECKER_BACKGROUND_SIZE,
@@ -77,17 +77,17 @@ const labelStyle = {
 const baseInputStyle = {
     width: '100%',
     background: colors_1.INPUT_BACKGROUND,
-    border: '1px solid rgba(0, 0, 0, 0.6)',
+    border: colors_1.BORDER_BLACK_ALPHA_60,
     borderRadius: 3,
-    color: 'white',
+    color: colors_1.WHITE,
     padding: '4px 6px',
     fontSize: 12,
     textAlign: 'center',
     boxSizing: 'border-box',
 };
 const eyedropperButtonStyle = {
-    background: 'transparent',
-    border: '1px solid rgba(0, 0, 0, 0.6)',
+    background: colors_1.TRANSPARENT,
+    border: colors_1.BORDER_BLACK_ALPHA_60,
     borderRadius: 3,
     padding: 0,
     cursor: 'pointer',
@@ -271,7 +271,7 @@ const ColorPickerPopup = ({ value, onChange, onChangeComplete }) => {
     }, [formatted]);
     const showEyeDropper = (0, exports.hasEyeDropper)();
     return (jsx_runtime_1.jsxs("div", { style: popupShellStyle, children: [
-            jsx_runtime_1.jsx(SaturationValueArea_1.SaturationValueArea, { hue: hsva.h, saturation: hsva.s, value: hsva.v, onChange: onSvChange, onChangeComplete: onSvComplete }), jsx_runtime_1.jsxs("div", { style: sliderRowStyle, children: [showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", style: eyedropperButtonStyle, onClick: onPickWithEyeDropper, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: { width: 14, height: 14 }, color: "currentColor" }) })) : null, jsx_runtime_1.jsx("div", { style: previewSwatchStyle, title: formatted, children: jsx_runtime_1.jsx("div", { style: previewFill }) }), jsx_runtime_1.jsxs("div", { style: slidersColumnStyle, children: [
+            jsx_runtime_1.jsx(SaturationValueArea_1.SaturationValueArea, { hue: hsva.h, saturation: hsva.s, value: hsva.v, onChange: onSvChange, onChangeComplete: onSvComplete }), jsx_runtime_1.jsxs("div", { style: sliderRowStyle, children: [showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", style: eyedropperButtonStyle, onClick: onPickWithEyeDropper, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: { width: 14, height: 14 }, color: colors_1.CURRENT_COLOR }) })) : null, jsx_runtime_1.jsx("div", { style: previewSwatchStyle, title: formatted, children: jsx_runtime_1.jsx("div", { style: previewFill }) }), jsx_runtime_1.jsxs("div", { style: slidersColumnStyle, children: [
                             jsx_runtime_1.jsx(HueSlider_1.HueSlider, { hue: hsva.h, onChange: onHueChange, onChangeComplete: onHueComplete }), jsx_runtime_1.jsx(AlphaSlider_1.AlphaSlider, { hue: hsva.h, saturation: hsva.s, value: hsva.v, alpha: hsva.a, onChange: onAlphaChange, onChangeComplete: onAlphaComplete })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: inputsRowStyle, children: [

package/dist/components/ColorPicker/HueSlider.js

@@ -4,6 +4,7 @@ exports.HueSlider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const color_conversion_1 = require("../../helpers/color-conversion");
+const colors_1 = require("../../helpers/colors");
 const SLIDER_HEIGHT = 12;
 const HANDLE_WIDTH = 8;
 const containerStyle = {
@@ -12,7 +13,7 @@ const containerStyle = {
     width: '100%',
     borderRadius: 3,
     cursor: 'ew-resize',
-    background: 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)',
+    background: colors_1.COLOR_PICKER_HUE_GRADIENT,
     touchAction: 'none',
 };
 const HueSlider = ({ hue, onChange, onChangeComplete }) => {
@@ -58,8 +59,8 @@ const HueSlider = ({ hue, onChange, onChangeComplete }) => {
             width: HANDLE_WIDTH,
             height: SLIDER_HEIGHT + 4,
             borderRadius: 2,
-            border: '2px solid #fff',
-            boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.6)',
+            border: colors_1.BORDER_WHITE_2PX,
+            boxShadow: colors_1.COLOR_PICKER_HANDLE_SHADOW,
             pointerEvents: 'none',
         };
     }, [hue]);

package/dist/components/ColorPicker/SaturationValueArea.js

@@ -4,6 +4,7 @@ exports.SaturationValueArea = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const color_conversion_1 = require("../../helpers/color-conversion");
+const colors_1 = require("../../helpers/colors");
 const AREA_HEIGHT = 140;
 const containerStyle = {
     position: 'relative',
@@ -17,12 +18,12 @@ const containerStyle = {
 const valueOverlay = {
     position: 'absolute',
     inset: 0,
-    background: 'linear-gradient(to top, #000, transparent)',
+    background: colors_1.COLOR_PICKER_SATURATION_BLACK_GRADIENT,
 };
 const saturationOverlay = {
     position: 'absolute',
     inset: 0,
-    background: 'linear-gradient(to right, #fff, transparent)',
+    background: colors_1.COLOR_PICKER_SATURATION_VALUE_GRADIENT,
 };
 const SaturationValueArea = ({ hue, saturation, value, onChange, onChangeComplete }) => {
     const containerRef = (0, react_1.useRef)(null);
@@ -81,8 +82,8 @@ const SaturationValueArea = ({ hue, saturation, value, onChange, onChangeComplet
             marginLeft: -6,
             marginTop: -6,
             borderRadius: '50%',
-            border: '2px solid #fff',
-            boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.6)',
+            border: colors_1.BORDER_WHITE_2PX,
+            boxShadow: colors_1.COLOR_PICKER_HANDLE_SHADOW,
             pointerEvents: 'none',
         };
     }, [saturation, value]);

package/dist/components/ColorPicker/checker.d.ts

@@ -1,4 +1,4 @@
-export declare const CHECKER_BACKGROUND_IMAGE = "linear-gradient(45deg, #888 25%, transparent 25%), linear-gradient(-45deg, #888 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #888 75%), linear-gradient(-45deg, transparent 75%, #888 75%)";
+export declare const CHECKER_BACKGROUND_IMAGE: string;
 export declare const CHECKER_BACKGROUND_SIZE = "8px 8px";
 export declare const CHECKER_BACKGROUND_POSITION = "0 0, 0 4px, 4px -4px, -4px 0";
 export declare const CHECKER_BACKGROUND_COLOR = "#444";

package/dist/components/ColorPicker/checker.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CHECKER_BACKGROUND_COLOR = exports.CHECKER_BACKGROUND_POSITION = exports.CHECKER_BACKGROUND_SIZE = exports.CHECKER_BACKGROUND_IMAGE = void 0;
-// Checkerboard background used to indicate transparency in color swatches
+const colors_1 = require("../../helpers/colors"); // Checkerboard background used to indicate transparency in color swatches
 // and the alpha slider. Rendered as a CSS gradient so we don't need an asset.
-exports.CHECKER_BACKGROUND_IMAGE = 'linear-gradient(45deg, #888 25%, transparent 25%), linear-gradient(-45deg, #888 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #888 75%), linear-gradient(-45deg, transparent 75%, #888 75%)';
+exports.CHECKER_BACKGROUND_IMAGE = colors_1.COLOR_PICKER_CHECKER_BACKGROUND_IMAGE;
 exports.CHECKER_BACKGROUND_SIZE = '8px 8px';
 exports.CHECKER_BACKGROUND_POSITION = '0 0, 0 4px, 4px -4px, -4px 0';
-exports.CHECKER_BACKGROUND_COLOR = '#444';
+exports.CHECKER_BACKGROUND_COLOR = colors_1.COLOR_PICKER_CHECKER_BACKGROUND_COLOR;

package/dist/components/CompactExplanation.js

@@ -26,12 +26,12 @@ const compactHelpLink = {
 };
 const compactHelpLinkHovered = {
     ...compactHelpLink,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const compactHelpIcon = {
     color: 'inherit',
     display: 'block',
-    fill: 'currentColor',
+    fill: colors_1.CURRENT_COLOR,
     height: 13,
     width: 13,
 };
@@ -40,7 +40,7 @@ const compactHelpIconPath = {
 };
 const CompactHelpLink = ({ href, ariaLabel, title, }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    return (jsx_runtime_1.jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: hovered ? compactHelpLinkHovered : compactHelpLink, "aria-label": ariaLabel, title: title, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: compactHelpIcon, "aria-hidden": "true", children: jsx_runtime_1.jsx("path", { style: compactHelpIconPath, fill: "currentColor", d: "M464 256a208 208 0 1 0 -416 0 208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0 256 256 0 1 1 -512 0zm256-80c-17.7 0-32 14.3-32 32l-48 0c0-44.2 35.8-80 80-80s80 35.8 80 80c0 35.1-20.5 57.5-38.2 70-6.3 4.4-12.5 7.8-17.8 10.4l0 21.9-48 0 0-56.7c1.4-.4 2.7-.7 4.1-1.1 12.2-3.2 23.3-6.1 34.1-13.7 10.4-7.3 17.8-16.9 17.8-30.8 0-17.7-14.3-32-32-32zM232 344l48 0 0 48-48 0 0-48z" }) }) }));
+    return (jsx_runtime_1.jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: hovered ? compactHelpLinkHovered : compactHelpLink, "aria-label": ariaLabel, title: title, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: compactHelpIcon, "aria-hidden": "true", children: jsx_runtime_1.jsx("path", { style: compactHelpIconPath, fill: colors_1.CURRENT_COLOR, d: "M464 256a208 208 0 1 0 -416 0 208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0 256 256 0 1 1 -512 0zm256-80c-17.7 0-32 14.3-32 32l-48 0c0-44.2 35.8-80 80-80s80 35.8 80 80c0 35.1-20.5 57.5-38.2 70-6.3 4.4-12.5 7.8-17.8 10.4l0 21.9-48 0 0-56.7c1.4-.4 2.7-.7 4.1-1.1 12.2-3.2 23.3-6.1 34.1-13.7 10.4-7.3 17.8-16.9 17.8-30.8 0-17.7-14.3-32-32-32zM232 344l48 0 0 48-48 0 0-48z" }) }) }));
 };
 const CompactExplanation = ({ children, learnMoreAriaLabel, learnMoreHref, learnMoreTitle = 'Learn more', }) => {
     return (jsx_runtime_1.jsxs("div", { style: compactExplanation, children: [children, learnMoreHref ? (jsx_runtime_1.jsx(CompactHelpLink, { href: learnMoreHref, ariaLabel: learnMoreAriaLabel !== null && learnMoreAriaLabel !== void 0 ? learnMoreAriaLabel : learnMoreTitle, title: learnMoreTitle })) : null] }));