From 9767ff2fb9228adef09503b1278bae017cd06969 Mon Sep 17 00:00:00 2001
From: Troy O'Leary <84645104+TROY665@users.noreply.github.com>
Date: Mon, 10 Aug 2026 18:32:10 +1000
Subject: [PATCH] Add contract tests for chart text colour on dark themes

Follows the existing source-assertion style in this file. Both tests fail
against the pre-fix Explainer and pass after it:

- charts must receive textColor={textColor}, or their labels render
  dark-on-dark (the components default textColor to #1F2937)
- ComparisonCard must get a themed cardBackgroundColor, or its labels
  render light-on-light (the component hardcodes #F3F4F6)
---
 ...test_remotion_video_transition_contract.py | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/tests/contracts/test_remotion_video_transition_contract.py b/tests/contracts/test_remotion_video_transition_contract.py
index 3d30934b..a3286717 100644
--- a/tests/contracts/test_remotion_video_transition_contract.py
+++ b/tests/contracts/test_remotion_video_transition_contract.py
@@ -26,3 +26,43 @@ def test_cinematic_fades_are_bounded_by_each_scene_duration() -> None:
 
     assert "Math.round(scene.durationSeconds * fps)" in source
     assert "durationInFrames - fadeOutFrames" in source
+
+
+def _jsx_block(source: str, component: str) -> str:
+    """Return the JSX element text for <Component ... /> in the source."""
+    start = source.index(f"<{component}")
+    end = source.index("/>", start)
+    return source[start:end]
+
+
+def test_chart_scenes_receive_the_theme_text_color() -> None:
+    """Charts default textColor to near-black (#1F2937).
+
+    If Explainer does not forward the theme's textColor, every chart title,
+    axis label, category label and value renders dark-on-dark and is invisible
+    on any dark theme.
+    """
+    source = (REPO_ROOT / "remotion-composer/src/Explainer.tsx").read_text(
+        encoding="utf-8"
+    )
+
+    for component in ("BarChart", "LineChart", "PieChart", "KPIGrid"):
+        assert "textColor={textColor}" in _jsx_block(source, component), (
+            f"{component} must receive the theme textColor, "
+            f"or its labels are invisible on dark themes"
+        )
+
+
+def test_comparison_card_surface_follows_the_theme() -> None:
+    """ComparisonCard hardcodes cardBackgroundColor to a light grey (#F3F4F6).
+
+    On a dark theme it receives the theme's light textColor, so without a
+    themed card surface the labels are light-on-light.
+    """
+    source = (REPO_ROOT / "remotion-composer/src/Explainer.tsx").read_text(
+        encoding="utf-8"
+    )
+    block = _jsx_block(source, "ComparisonCard")
+
+    assert "textColor={textColor}" in block
+    assert "cardBackgroundColor={cut.cardBackgroundColor || theme.surfaceColor}" in block