remotion: Support editing background colors

[JonnyBurger]

Summary

• add a reusable backgroundSchema for editable style.backgroundColor values
• expose background color controls on components that already support CSS box styling
• safely migrate color-only background shorthands while preserving their reset semantics
• group the field under Background in the Studio inspector and document the schema

Tests

• bun run build
• bun run stylecheck
• affected package and shorthand migration tests

Closes #8804

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview, Comment	Jul 23, 2026 9:23am
remotion	Ready	Preview, Comment	Jul 23, 2026 9:23am

[pullfrog]

Reviewed changes — adds a reusable backgroundSchema for editable style.backgroundColor values, exposes it on all CSS box-style components, and safely migrates color-only background shorthands to their longhand equivalents when the user edits through the Studio inspector.

• Add backgroundSchema to interactivity-schema.ts — a 'color' field for style.backgroundColor defaulting to 'transparent', mirroring the existing borderSchema pattern.
• Add parseBackgroundShorthand — conservatively expands only color-only background shorthand values (e.g. 'red', '#123', 'rgba(...)') while rejecting complex values, dynamic references, and CSS-wide keywords.
• Add backgroundShorthand to CSS shorthand migration — wires the new parser into cssShorthandProperties so background: 'red' is expanded to longhands when the user edits backgroundColor through the schema.
• Add 'background' field group in Studio inspector — style.backgroundColor renders under a "Background" header, placed between "Text" and "Border" groups.
• Expose backgroundSchema on all CSS box components — <Interactive.Div>, <Img>, <CanvasImage>, <AnimatedImage>, <Gif>, <Video>, shapes, <LightLeak>, <Starburst>, <Annotation>, <Rive>, and <Sequence> (via sequenceStyleSchema).
• Add Interactive.backgroundSchema to docs — both interactive.mdx and interactivity-schema.mdx.
• Tests — schema exposure, shorthand parsing, shorthand migration (including property order and independent longhands), field grouping, and keyframe interpolation.

✅ No new issues found.

  ^{｜ View workflow run ｜ Using DeepSeek Pro (free via Pullfrog for OSS) (Claude Opus not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏}