@remotion/studio 4.0.526 → 4.0.528

package/dist/helpers/editor-ruler.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/helpers/hoverable.js

@@ -12,10 +12,10 @@ exports.HOVERABLE_CLASS_NAME = '__remotion-hoverable';
 exports.HOVER_GROUP_CLASS_NAME = '__remotion-hover-group';
 exports.HOVER_GROUP_REVEAL_CLASS_NAME = '__remotion-hover-group-reveal';
 exports.FOCUS_VISIBLE_ONLY_CLASS_NAME = '__remotion-focus-visible-only';
-const BG_VARIABLE = '--remotion-hoverable-bg';
-const HOVER_BG_VARIABLE = '--remotion-hoverable-hover-bg';
-const COLOR_VARIABLE = '--remotion-hoverable-color';
-const HOVER_COLOR_VARIABLE = '--remotion-hoverable-hover-color';
+const BG_VARIABLE = '--remotion-studio-hoverable-bg';
+const HOVER_BG_VARIABLE = '--remotion-studio-hoverable-hover-bg';
+const COLOR_VARIABLE = '--remotion-studio-hoverable-color';
+const HOVER_COLOR_VARIABLE = '--remotion-studio-hoverable-hover-color';
 exports.NO_HOVER_BACKGROUND_STYLE = {
     [HOVER_BG_VARIABLE]: colors_1.TRANSPARENT,
 };
@@ -77,7 +77,8 @@ const makeHoverableCSS = () => `
       overflow: hidden;
     }
 
-    ${hoverGroup}:hover ${reveal} {
+    ${hoverGroup}:hover ${reveal},
+    ${hoverGroup}:has([aria-expanded="true"]) ${reveal} {
       opacity: 1;
       width: auto;
       overflow: visible;

package/dist/helpers/inject-css.js

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

package/dist/helpers/open-in-editor.js

@@ -174,7 +174,7 @@ const loadCompositionComponentInfo = async ({ compositionFile, compositionId, })
                     if (files === null) {
                         throw new Error(`Could not find source map contents for ${compositionFile}`);
                     }
-                    const { resolveCompositionComponentLocation } = await Promise.resolve().then(() => __importStar(require('@remotion/studio-codemods/resolve-composition-component-location')));
+                    const { resolveCompositionComponentLocation } = await Promise.resolve().then(() => __importStar(require('@remotion/codemods/resolve-composition-component-location')));
                     return {
                         canAddSequence: false,
                         location: resolveCompositionComponentLocation({

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

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

package/dist/helpers/prism-vsc-dark-plus.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.prismVscDarkPlus = void 0;
-// Unmodified prism-themes@1.9.0/themes/prism-vsc-dark-plus.css, stored as a
-// string for Studio’s CSS injection (including Browser Studio, which has no
-// CSS loader).
+const colors_1 = require("./colors");
+// Adapted from prism-themes@1.9.0/themes/prism-vsc-dark-plus.css to use the
+// Studio palette. Stored as a string for CSS injection (including Browser
+// Studio, which has no CSS loader).
 /*
 The MIT License (MIT)
 
@@ -29,7 +30,7 @@ SOFTWARE.
 */
 exports.prismVscDarkPlus = `pre[class*="language-"],
 code[class*="language-"] {
-	color: #d4d4d4;
+	color: ${colors_1.PRISM_TEXT_COLOR};
 	font-size: 13px;
 	text-shadow: none;
 	font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
@@ -53,7 +54,7 @@ code[class*="language-"]::selection,
 pre[class*="language-"] *::selection,
 code[class*="language-"] *::selection {
 	text-shadow: none;
-	background: #264F78;
+	background: ${colors_1.PRISM_SELECTION_BACKGROUND};
 }
 
 @media print {
@@ -67,14 +68,14 @@ pre[class*="language-"] {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
-	background: #1e1e1e;
+	background: ${colors_1.PRISM_BACKGROUND};
 }
 
 :not(pre) > code[class*="language-"] {
 	padding: .1em .3em;
 	border-radius: .3em;
-	color: #db4c69;
-	background: #1e1e1e;
+	color: ${colors_1.PRISM_INLINE_COLOR};
+	background: ${colors_1.PRISM_BACKGROUND};
 }
 /*********************************************************
 * Tokens
@@ -84,22 +85,22 @@ pre[class*="language-"] {
 }
 
 .token.doctype .token.doctype-tag {
-	color: #569CD6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.doctype .token.name {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.comment,
 .token.prolog {
-	color: #6a9955;
+	color: ${colors_1.PRISM_COMMENT_COLOR};
 }
 
 .token.punctuation,
 .language-html .language-css .token.punctuation,
 .language-html .language-javascript .token.punctuation {
-	color: #d4d4d4;
+	color: ${colors_1.PRISM_TEXT_COLOR};
 }
 
 .token.property,
@@ -110,7 +111,7 @@ pre[class*="language-"] {
 .token.symbol,
 .token.inserted,
 .token.unit {
-	color: #b5cea8;
+	color: ${colors_1.PRISM_NUMBER_COLOR};
 }
 
 .token.selector,
@@ -119,7 +120,7 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.deleted {
-	color: #ce9178;
+	color: ${colors_1.PRISM_STRING_COLOR};
 }
 
 .language-css .token.string.url {
@@ -128,53 +129,53 @@ pre[class*="language-"] {
 
 .token.operator,
 .token.entity {
-	color: #d4d4d4;
+	color: ${colors_1.PRISM_TEXT_COLOR};
 }
 
 .token.operator.arrow {
-	color: #569CD6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.atrule {
-	color: #ce9178;
+	color: ${colors_1.PRISM_STRING_COLOR};
 }
 
 .token.atrule .token.rule {
-	color: #c586c0;
+	color: ${colors_1.PRISM_CONTROL_FLOW_COLOR};
 }
 
 .token.atrule .token.url {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.atrule .token.url .token.function {
-	color: #dcdcaa;
+	color: ${colors_1.PRISM_FUNCTION_COLOR};
 }
 
 .token.atrule .token.url .token.punctuation {
-	color: #d4d4d4;
+	color: ${colors_1.PRISM_TEXT_COLOR};
 }
 
 .token.keyword {
-	color: #569CD6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.keyword.module,
 .token.keyword.control-flow {
-	color: #c586c0;
+	color: ${colors_1.PRISM_CONTROL_FLOW_COLOR};
 }
 
 .token.function,
 .token.function .token.maybe-class-name {
-	color: #dcdcaa;
+	color: ${colors_1.PRISM_FUNCTION_COLOR};
 }
 
 .token.regex {
-	color: #d16969;
+	color: ${colors_1.PRISM_REGEX_COLOR};
 }
 
 .token.important {
-	color: #569cd6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.italic {
@@ -182,80 +183,80 @@ pre[class*="language-"] {
 }
 
 .token.constant {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.class-name,
 .token.maybe-class-name {
-	color: #4ec9b0;
+	color: ${colors_1.PRISM_CLASS_NAME_COLOR};
 }
 
 .token.console {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.parameter {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.interpolation {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.punctuation.interpolation-punctuation {
-	color: #569cd6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.boolean {
-	color: #569cd6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.property,
 .token.variable,
 .token.imports .token.maybe-class-name,
 .token.exports .token.maybe-class-name {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.selector {
-	color: #d7ba7d;
+	color: ${colors_1.PRISM_SELECTOR_COLOR};
 }
 
 .token.escape {
-	color: #d7ba7d;
+	color: ${colors_1.PRISM_SELECTOR_COLOR};
 }
 
 .token.tag {
-	color: #569cd6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.tag .token.punctuation {
-	color: #808080;
+	color: ${colors_1.RULER_COLOR};
 }
 
 .token.cdata {
-	color: #808080;
+	color: ${colors_1.RULER_COLOR};
 }
 
 .token.attr-name {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 .token.attr-value,
 .token.attr-value .token.punctuation {
-	color: #ce9178;
+	color: ${colors_1.PRISM_STRING_COLOR};
 }
 
 .token.attr-value .token.punctuation.attr-equals {
-	color: #d4d4d4;
+	color: ${colors_1.PRISM_TEXT_COLOR};
 }
 
 .token.entity {
-	color: #569cd6;
+	color: ${colors_1.PRISM_KEYWORD_COLOR};
 }
 
 .token.namespace {
-	color: #4ec9b0;
+	color: ${colors_1.PRISM_CLASS_NAME_COLOR};
 }
 /*********************************************************
 * Language Specific
@@ -269,25 +270,25 @@ pre[class*="language-typescript"],
 code[class*="language-typescript"],
 pre[class*="language-tsx"],
 code[class*="language-tsx"] {
-	color: #9cdcfe;
+	color: ${colors_1.PRISM_VARIABLE_COLOR};
 }
 
 pre[class*="language-css"],
 code[class*="language-css"] {
-	color: #ce9178;
+	color: ${colors_1.PRISM_STRING_COLOR};
 }
 
 pre[class*="language-html"],
 code[class*="language-html"] {
-	color: #d4d4d4;
+	color: ${colors_1.PRISM_TEXT_COLOR};
 }
 
 .language-regex .token.anchor {
-	color: #dcdcaa;
+	color: ${colors_1.PRISM_FUNCTION_COLOR};
 }
 
 .language-html .token.punctuation {
-	color: #808080;
+	color: ${colors_1.RULER_COLOR};
 }
 /*********************************************************
 * Line highlighting
@@ -298,8 +299,8 @@ pre[class*="language-"] > code[class*="language-"] {
 }
 
 .line-highlight.line-highlight {
-	background: #f7ebc6;
-	box-shadow: inset 5px 0 0 #f7d87c;
+	background: ${colors_1.PRISM_LINE_HIGHLIGHT_BACKGROUND};
+	box-shadow: inset 5px 0 0 ${colors_1.PRISM_LINE_HIGHLIGHT_BORDER_COLOR};
 	z-index: 0;
 }
 `;

package/dist/helpers/resolve-studio-color.d.ts

@@ -0,0 +1 @@
+export declare const resolveStudioColor: (color: string, computedStyle: CSSStyleDeclaration) => string;

package/dist/helpers/resolve-studio-color.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveStudioColor = void 0;
+// Canvas and JavaScript color parsers need concrete colors rather than CSS var().
+// Reuse the computed style for all colors in a draw to avoid repeated style reads.
+const resolveStudioColor = (color, computedStyle) => {
+    return color.replace(/var\((--remotion-studio-[a-z0-9-]+)\)/g, (_, name) => {
+        return computedStyle.getPropertyValue(name).trim();
+    });
+};
+exports.resolveStudioColor = resolveStudioColor;

package/dist/helpers/studio-css-variables.d.ts

@@ -0,0 +1 @@
+export declare const studioCssVariables = "\n:where(:root) {\n  --remotion-studio-black: black;\n  --remotion-studio-white: white;\n  --remotion-studio-red: red;\n  --remotion-studio-transparent: transparent;\n  --remotion-studio-current-color: currentColor;\n  --remotion-studio-background: rgb(31,36,40);\n  --remotion-studio-background-transparent: rgba(31,36,40, 0);\n  --remotion-studio-input-background: #2f363d;\n  --remotion-studio-light-color: #ddd;\n  --remotion-studio-light-text: #A6A7A9;\n  --remotion-studio-ruler-color: #808080;\n  --remotion-studio-white-alpha-05: rgba(255, 255, 255, 0.05);\n  --remotion-studio-white-alpha-06: rgba(255, 255, 255, 0.06);\n  --remotion-studio-white-alpha-08: rgba(255, 255, 255, 0.08);\n  --remotion-studio-white-alpha-10: rgba(255, 255, 255, 0.1);\n  --remotion-studio-white-alpha-12: rgba(255, 255, 255, 0.12);\n  --remotion-studio-white-alpha-15: rgba(255, 255, 255, 0.15);\n  --remotion-studio-white-alpha-20: rgba(255, 255, 255, 0.2);\n  --remotion-studio-white-alpha-25: rgba(255, 255, 255, 0.25);\n  --remotion-studio-white-alpha-30: rgba(255, 255, 255, 0.3);\n  --remotion-studio-white-alpha-35: rgba(255, 255, 255, 0.35);\n  --remotion-studio-white-alpha-40: rgba(255, 255, 255, 0.4);\n  --remotion-studio-white-alpha-45: rgba(255, 255, 255, 0.45);\n  --remotion-studio-white-alpha-50: rgba(255, 255, 255, 0.5);\n  --remotion-studio-white-alpha-60: rgba(255, 255, 255, 0.6);\n  --remotion-studio-white-alpha-70: rgba(255, 255, 255, 0.7);\n  --remotion-studio-white-alpha-72: rgba(255, 255, 255, 0.72);\n  --remotion-studio-white-alpha-80: rgba(255, 255, 255, 0.8);\n  --remotion-studio-white-alpha-90: rgba(255, 255, 255, 0.9);\n  --remotion-studio-black-alpha-10: rgba(0, 0, 0, 0.1);\n  --remotion-studio-black-alpha-28: rgba(0, 0, 0, 0.28);\n  --remotion-studio-black-alpha-30: rgba(0, 0, 0, 0.3);\n  --remotion-studio-black-alpha-40: rgba(0, 0, 0, 0.4);\n  --remotion-studio-black-alpha-50: rgba(0, 0, 0, 0.5);\n  --remotion-studio-black-alpha-60: rgba(0, 0, 0, 0.6);\n  --remotion-studio-black-alpha-80: rgba(0, 0, 0, 0.8);\n  --remotion-studio-black-alpha-85: rgba(0, 0, 0, 0.85);\n  --remotion-studio-black-alpha-90: rgba(0, 0, 0, 0.9);\n  --remotion-studio-fail-color: #ff3232;\n  --remotion-studio-warning-color: #f1c40f;\n  --remotion-studio-blue: #0b84f3;\n  --remotion-studio-blue-hovered: #4da3f7;\n  --remotion-studio-blue-disabled: #284f73;\n  --remotion-studio-unselected-guide: #7e1219;\n  --remotion-studio-selected-guide: #d22d3a;\n  --remotion-studio-line-color: #363A3E;\n  --remotion-studio-timeline-track-separator: #13161B;\n  --remotion-studio-light-gray: #ccc;\n  --remotion-studio-keyboard-shortcut-key-color: #eee;\n  --remotion-studio-notification-background: #111111;\n  --remotion-studio-render-status-background: #222;\n  --remotion-studio-error-code-frame-background: #070707;\n  --remotion-studio-error-code-frame-line-background: #121212;\n  --remotion-studio-error-link-color: #58a6ff;\n  --remotion-studio-info-blue: #60a5fa;\n  --remotion-studio-server-disconnected-background: #e74c3c;\n  --remotion-studio-timeline-background-color: #15181B;\n  --remotion-studio-timeline-negative-start-background-color: #2C2F32;\n  --remotion-studio-timeline-negative-start-border-color: #414446;\n  --remotion-studio-timeline-selected-background-color: #3B3F42;\n  --remotion-studio-timeline-selected-label-background-color: #B0B0B0;\n  --remotion-studio-timeline-blue: #0b84ff;\n  --remotion-studio-timeline-playhead-color: #f02c00;\n  --remotion-studio-timeline-drop-blue-alpha-12: rgba(0, 155, 255, 0.12);\n  --remotion-studio-timeline-drop-blue-alpha-16: rgba(0, 155, 255, 0.16);\n  --remotion-studio-timeline-drop-blue-alpha-75: rgba(0, 155, 255, 0.75);\n  --remotion-studio-timeline-marquee-blue-alpha-16: rgba(70, 130, 255, 0.16);\n  --remotion-studio-timeline-marquee-blue-alpha-75: rgba(70, 130, 255, 0.75);\n  --remotion-studio-easing-selected-background: rgba(11, 132, 243, 0.18);\n  --remotion-studio-info-blue-background: rgba(59, 130, 246, 0.15);\n  --remotion-studio-color-picker-checker-background-color: #444;\n  --remotion-studio-color-picker-hue-gradient: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n  --remotion-studio-timeline-audio-gradient: linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%);\n  --remotion-studio-timeline-video-gradient: linear-gradient(to top, #8e44ad, #9b59b6);\n  --remotion-studio-focus-color: #555;\n  --remotion-studio-color-picker-checker-color: #888;\n  --remotion-studio-info-blue-border-color: rgba(59, 130, 246, 0.4);\n  --remotion-studio-black-alpha-22: rgba(0, 0, 0, 0.22);\n  --remotion-studio-font-family-error-color: #ff8a8a;\n  --remotion-studio-selected-outline-snap-color: #ff00ff;\n  --remotion-studio-prism-text-color: #d4d4d4;\n  --remotion-studio-prism-selection-background: #264f78;\n  --remotion-studio-prism-background: #1e1e1e;\n  --remotion-studio-prism-inline-color: #db4c69;\n  --remotion-studio-prism-keyword-color: #569cd6;\n  --remotion-studio-prism-variable-color: #9cdcfe;\n  --remotion-studio-prism-comment-color: #6a9955;\n  --remotion-studio-prism-number-color: #b5cea8;\n  --remotion-studio-prism-string-color: #ce9178;\n  --remotion-studio-prism-control-flow-color: #c586c0;\n  --remotion-studio-prism-function-color: #dcdcaa;\n  --remotion-studio-prism-regex-color: #d16969;\n  --remotion-studio-prism-class-name-color: #4ec9b0;\n  --remotion-studio-prism-selector-color: #d7ba7d;\n  --remotion-studio-prism-line-highlight-background: #f7ebc6;\n  --remotion-studio-prism-line-highlight-border-color: #f7d87c;\n}\n";