From d36cf008f8e986882994187373b523f10d4d44d5 Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Mon, 1 Dec 2025 16:48:47 +0100
Subject: [PATCH 1/7] Adjust standalone release chart CSS

- Use CSS variables from outside if present
- Use light or dark theme
- Add an outline to labels to improve readability (especially on
  incompatible background colours, and above the day line)
- Reorder elements to improve readability (put text on top of
  the day line)
---
 _static/devguide_overrides.css          |  28 ----
 _tools/release_cycle_template.svg.jinja | 175 ++++++++++++++----------
 2 files changed, 102 insertions(+), 101 deletions(-)

diff --git a/_static/devguide_overrides.css b/_static/devguide_overrides.css
index 2661c6810..625a9dda2 100644
--- a/_static/devguide_overrides.css
+++ b/_static/devguide_overrides.css
@@ -6,34 +6,6 @@
     height: 110px;
 }
 
-/* Release cycle chart */
-.release-cycle-chart .release-cycle-year-line {
-    stroke: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-year-text {
-    fill: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-today-line {
-    stroke: var(--color-brand-primary);
-}
-
-.release-cycle-chart .release-cycle-row-shade {
-    fill: var(--color-background-item);
-}
-
-.release-cycle-chart .release-cycle-version-label {
-    fill: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-end-of-life,
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-prerelease,
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-feature {
-    /* and FG when it's not in a blob */
-    fill: var(--color-foreground-primary);
-}
-
 .good pre {
   border-left: 3px solid rgba(74, 182, 93, 1);
 }
diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index 702a8cf18..c41537942 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -5,95 +5,108 @@
     viewBox="0 0 {{ diagram_width }} {{ diagram_height }}"
 >
     <style>
+        :root {
+            color-scheme: light dark;
+
+            {# Copy vars from Furo theme if present #}
+            {% for varname, default in {
+                'color-foreground-primary': 'light-dark(#333, #fff)',
+                'color-background-primary': 'light-dark(#fff, #333)',
+                'color-brand-primary': '#4B8BBE',
+                'color-background-item': '#e0e0e0',
+            }.items() %}
+                --svg-{{varname}}: var(--{{varname}}, {{default}});
+            {% endfor %}
+        }
         /* Embedded styles for standalone viewing */
         .release-cycle-chart {
-            font-family: Arial, sans-serif;
+            font-family: var(
+                --font-stack,
+                -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
+                Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji);
             width: 100%;
+
+            --blob-border-width: 1.6px;
         }
         .release-cycle-year-line {
-            stroke: #333;
+            stroke: var(--svg-color-foreground-primary);
             stroke-width: 0.8px;
             opacity: 75%;
         }
         .release-cycle-year-text {
-            fill: #333;
+            fill: var(--svg-color-foreground-primary);
         }
         .release-cycle-today-line {
-            stroke: #4B8BBE;
-            stroke-width: 1.6px;
+            stroke: var(--svg-color-brand-primary);
+            stroke-width: var(--blob-border-width);
         }
         .release-cycle-row-shade {
-            fill: #e0e0e0;
+            fill: var(--svg-color-background-item);
             opacity: 50%;
         }
         .release-cycle-version-label {
-            fill: #333;
+            fill: var(--svg-color-foreground-primary);
         }
         .release-cycle-blob {
-            stroke-width: 1.6px;
-        }
-        .release-cycle-blob-label {
-            /* white looks good on both light and dark */
-            fill: white;
+            stroke-width: var(--blob-border-width);
         }
-        .release-cycle-blob-label.release-cycle-status-security,
-        .release-cycle-blob-label.release-cycle-status-bugfix {
-            /* but use black to improve contrast for lighter backgrounds */
-            fill: black;
+        text {
+            fill: var(--svg-color-foreground-primary);
+
+            /* an outline of the background color, in case it's not set
+               correctly */
+            stroke: var(--svg-color-background-primary);
+            stroke-width: var(--blob-border-width);
+            /* draw stroke first (half of it will be visible as outline) */
+            paint-order: stroke;
+
+            /* use specific colours on known backgrounds */
+            &amp;.release-cycle-status-security ,
+            &amp;.release-cycle-status-bugfix {
+                fill: black;
+                stroke: var(--status-bg-color);
+            }
+            /* For year labels, keep outline below the row shading
+               (it's a separate element) */
+            &amp;.release-cycle-version-label-outline {
+                fill: transparent;
+            }
+            &amp;.release-cycle-version-label {
+                stroke: none;
+            }
         }
-        .release-cycle-blob-label.release-cycle-status-end-of-life,
-        .release-cycle-blob-label.release-cycle-status-prerelease,
-        .release-cycle-blob-label.release-cycle-status-feature {
-            fill: #333;
+        .release-cycle-status-end-of-life {
+            --status-bg-color: #DD2200;
+            --status-border-color: #FF8888;
         }
-        .release-cycle-status-end-of-life .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-end-of-life {
-            fill: #DD2200;
-            stroke: #FF8888;
+        .release-cycle-status-security {
+            --status-bg-color: #FFDD44;
+            --status-border-color: #FF8800;
         }
-        .release-cycle-status-security .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-security {
-            fill: #FFDD44;
-            stroke: transparent;
+        .release-cycle-status-bugfix {
+            --status-bg-color: #00DD22;
+            --status-border-color: #008844;
         }
-        .release-cycle-status-bugfix .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-bugfix {
-            fill: #00DD22;
-            stroke: transparent;
+        .release-cycle-status-prerelease {
+            --status-bg-color: teal;
+            --status-border-color: darkgreen;
         }
-        .release-cycle-status-prerelease .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-prerelease {
-            fill: teal;
-            stroke: transparent;
+        .release-cycle-status-feature {
+            --status-bg-color: #2222EE;
+            --status-border-color: #008888;
         }
-        .release-cycle-status-feature .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-feature {
-            fill: #2222EE;
+        .release-cycle-blob {
+            fill: var(--status-bg-color);
             stroke: transparent;
         }
-        .release-cycle-blob-full.release-cycle-status-end-of-life {
-            fill: #DD2200;
-            stroke: #FF8888;
-        }
-        .release-cycle-border.release-cycle-status-security {
-            fill: transparent;
-            stroke: #FF8800;
-            stroke-width: 1.6px;
-        }
-        .release-cycle-border.release-cycle-status-bugfix {
-            fill: transparent;
-            stroke: #008844;
-            stroke-width: 1.6px;
+        .release-cycle-blob-full {
+            fill: var(--status-bg-color);
+            stroke: var(--status-border-color);
         }
-        .release-cycle-border.release-cycle-status-prerelease {
+        .release-cycle-border {
             fill: transparent;
-            stroke: darkgreen;
-            stroke-width: 1.6px;
-        }
-        .release-cycle-border.release-cycle-status-feature {
-            fill: transparent;
-            stroke: #008888;
-            stroke-width: 1.6px;
+            stroke: var(--status-border-color);
+            stroke-width: var(--blob-border-width);
         }
     </style>
     <defs>
@@ -105,6 +118,15 @@
 
     {% for version in versions %}
         {% set y = version.y * line_height %}
+        <!-- Outline for legend on the left -->
+        <text
+            class="release-cycle-version-label-outline"
+            x="{{ 0.5 * SCALE }}"
+            y="{{ version.y * line_height }}"
+            font-size="{{ SCALE }}"
+        >
+            Python {{ version.key }}
+        </text>
 
         {% if version.y % 2 %}
             <!-- Row shading -->
@@ -166,7 +188,7 @@
     </mask>
 
     {% for version in versions %}
-        <!-- Colourful blob with a label. -->
+        <!-- Colourful blob. -->
 
         {% set top_y = version.y * line_height - 1 * SCALE %}
         {% set height = 1.25 * SCALE %}
@@ -174,8 +196,6 @@
         {% set end_x = date_to_x(version.end_of_life_date) %}
         {% set radius = 0.25 * SCALE %}
 
-        {% set small_text_y = version.y * line_height - 0.1 * SCALE %}
-
         <!-- bugfix/security blobs need to be split between the two phases.
             Draw the rectangle with two path elements instead.
             Thanks Claude.ai for the initial conversion.
@@ -243,6 +263,25 @@
                 mask="url(#release-cycle-mask-{{ id_key }})"
             />
         {% endif %}
+    {% endfor %}
+
+    <!-- A line for today -->
+    <line
+        class="release-cycle-today-line"
+        x1="{{ date_to_x(today) }}"
+        x2="{{ date_to_x(today) }}"
+        y1="0"
+        y2="{{ diagram_height - line_height }}"
+        font-size="{{ SCALE }}"
+    />
+
+    {% for version in versions %}
+        <!-- Label for colourful blob -->
+
+        {% set start_x = date_to_x(version.first_release_date) %}
+        {% set end_x = date_to_x(version.end_of_life_date) %}
+        {% set middle_x = ([end_x, date_to_x(version.start_security_date)]|min)  %}
+        {% set small_text_y = version.y * line_height - 0.1 * SCALE %}
 
         <!-- Add text before/after/inside the blob -->
         <text
@@ -276,14 +315,4 @@
             Python {{ version.key }}
         </text>
     {% endfor %}
-
-    <!-- A line for today -->
-    <line
-        class="release-cycle-today-line"
-        x1="{{ date_to_x(today) }}"
-        x2="{{ date_to_x(today) }}"
-        y1="0"
-        y2="{{ diagram_height - line_height }}"
-        font-size="{{ SCALE }}"
-    />
 </svg>

From 2f0db0bd80b9d7f109ff40bb28d6431e123d171a Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Tue, 2 Dec 2025 15:47:25 +0100
Subject: [PATCH 2/7] Draw outlines and text separately

---
 _tools/release_cycle_template.svg.jinja | 97 ++++++++++++-------------
 1 file changed, 46 insertions(+), 51 deletions(-)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index c41537942..89f9d9ad2 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -33,9 +33,6 @@
             stroke-width: 0.8px;
             opacity: 75%;
         }
-        .release-cycle-year-text {
-            fill: var(--svg-color-foreground-primary);
-        }
         .release-cycle-today-line {
             stroke: var(--svg-color-brand-primary);
             stroke-width: var(--blob-border-width);
@@ -44,36 +41,30 @@
             fill: var(--svg-color-background-item);
             opacity: 50%;
         }
-        .release-cycle-version-label {
-            fill: var(--svg-color-foreground-primary);
-        }
         .release-cycle-blob {
             stroke-width: var(--blob-border-width);
         }
-        text {
+        .text-main {
             fill: var(--svg-color-foreground-primary);
 
+            /* use specific colours on known backgrounds */
+            &amp;.release-cycle-status-security,
+            &amp;.release-cycle-status-bugfix {
+                fill: black;
+            }
+        }
+        .text-outline {
             /* an outline of the background color, in case it's not set
-               correctly */
+            correctly */
+            fill: transparent;
             stroke: var(--svg-color-background-primary);
             stroke-width: var(--blob-border-width);
-            /* draw stroke first (half of it will be visible as outline) */
-            paint-order: stroke;
 
             /* use specific colours on known backgrounds */
-            &amp;.release-cycle-status-security ,
+            &amp;.release-cycle-status-security,
             &amp;.release-cycle-status-bugfix {
-                fill: black;
                 stroke: var(--status-bg-color);
             }
-            /* For year labels, keep outline below the row shading
-               (it's a separate element) */
-            &amp;.release-cycle-version-label-outline {
-                fill: transparent;
-            }
-            &amp;.release-cycle-version-label {
-                stroke: none;
-            }
         }
         .release-cycle-status-end-of-life {
             --status-bg-color: #DD2200;
@@ -120,7 +111,7 @@
         {% set y = version.y * line_height %}
         <!-- Outline for legend on the left -->
         <text
-            class="release-cycle-version-label-outline"
+            class="release-cycle-version-label text-outline"
             x="{{ 0.5 * SCALE }}"
             y="{{ version.y * line_height }}"
             font-size="{{ SCALE }}"
@@ -141,15 +132,17 @@
     {% endfor %}
 
     {% for year in years %}
-        <text
-            class="release-cycle-year-text"
-            x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
-            y="{{ diagram_height - line_height }}"
-            font-size="{{ SCALE * 0.75 }}"
-            text-anchor="middle"
-        >
-            {{ format_year(year) }}
-        </text>
+        {% for cls in ('text-outline', 'text-main') %}
+            <text
+                class="release-cycle-year-text {{cls}}"
+                x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
+                y="{{ diagram_height - line_height }}"
+                font-size="{{ SCALE * 0.75 }}"
+                text-anchor="middle"
+            >
+                {{ format_year(year) }}
+            </text>
+        {% endfor %}
         {% if not loop.last %}
         <line
             class="release-cycle-year-line"
@@ -284,30 +277,32 @@
         {% set small_text_y = version.y * line_height - 0.1 * SCALE %}
 
         <!-- Add text before/after/inside the blob -->
-        <text
-            class="release-cycle-blob-label release-cycle-status-{{ version.status }}"
-            font-size="{{ SCALE * 0.75 }}"
-            y="{{ small_text_y }}"
-            {% if version.status == "bugfix" %}
-                x="{{ (start_x + middle_x) / 2 }}"
-                text-anchor="middle"
-            {% elif version.status == "security" %}
-                x="{{ (middle_x + end_x) / 2 }}"
-                text-anchor="middle"
-            {% elif version.status == "end-of-life" %}
-                x="{{ end_x + (0.25 * SCALE) }}"
-                text-anchor="start"
-            {% else %}
-                x="{{ start_x - (0.25 * SCALE) }}"
-                text-anchor="end"
-            {% endif %}
-        >
-            {{ version.status }}
-        </text>
+        {% for cls in ('text-outline', 'text-main') %}
+            <text
+                class="release-cycle-blob-label {{cls}} release-cycle-status-{{ version.status }}"
+                font-size="{{ SCALE * 0.75 }}"
+                y="{{ small_text_y }}"
+                {% if version.status == "bugfix" %}
+                    x="{{ (start_x + middle_x) / 2 }}"
+                    text-anchor="middle"
+                {% elif version.status == "security" %}
+                    x="{{ (middle_x + end_x) / 2 }}"
+                    text-anchor="middle"
+                {% elif version.status == "end-of-life" %}
+                    x="{{ end_x + (0.25 * SCALE) }}"
+                    text-anchor="start"
+                {% else %}
+                    x="{{ start_x - (0.25 * SCALE) }}"
+                    text-anchor="end"
+                {% endif %}
+            >
+                {{ version.status }}
+            </text>
+        {% endfor %}
 
         <!-- Legend on the left -->
         <text
-            class="release-cycle-version-label"
+            class="release-cycle-version-label text-main"
             x="{{ 0.5 * SCALE }}"
             y="{{ version.y * line_height }}"
             font-size="{{ SCALE }}"

From 29c0602eb752cd0d6b5dfb4bb5259850e9d252cc Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Tue, 2 Dec 2025 15:48:41 +0100
Subject: [PATCH 3/7] Set background color explicitly

---
 _tools/release_cycle_template.svg.jinja | 32 +++++++++----------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index 89f9d9ad2..744073335 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -27,6 +27,8 @@
             width: 100%;
 
             --blob-border-width: 1.6px;
+
+            background-color: var(--color-background-primary);
         }
         .release-cycle-year-line {
             stroke: var(--svg-color-foreground-primary);
@@ -109,16 +111,6 @@
 
     {% for version in versions %}
         {% set y = version.y * line_height %}
-        <!-- Outline for legend on the left -->
-        <text
-            class="release-cycle-version-label text-outline"
-            x="{{ 0.5 * SCALE }}"
-            y="{{ version.y * line_height }}"
-            font-size="{{ SCALE }}"
-        >
-            Python {{ version.key }}
-        </text>
-
         {% if version.y % 2 %}
             <!-- Row shading -->
             <rect
@@ -132,17 +124,15 @@
     {% endfor %}
 
     {% for year in years %}
-        {% for cls in ('text-outline', 'text-main') %}
-            <text
-                class="release-cycle-year-text {{cls}}"
-                x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
-                y="{{ diagram_height - line_height }}"
-                font-size="{{ SCALE * 0.75 }}"
-                text-anchor="middle"
-            >
-                {{ format_year(year) }}
-            </text>
-        {% endfor %}
+        <text
+            class="release-cycle-year-text {{cls}}"
+            x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
+            y="{{ diagram_height - line_height }}"
+            font-size="{{ SCALE * 0.75 }}"
+            text-anchor="middle"
+        >
+            {{ format_year(year) }}
+        </text>
         {% if not loop.last %}
         <line
             class="release-cycle-year-line"

From eabf2f04ee2be3f196eb0cdf36ca69fdacb27391 Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Tue, 2 Dec 2025 15:50:26 +0100
Subject: [PATCH 4/7] Fix

---
 _tools/release_cycle_template.svg.jinja | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index 744073335..20b3bc9c4 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -125,7 +125,7 @@
 
     {% for year in years %}
         <text
-            class="release-cycle-year-text {{cls}}"
+            class="release-cycle-year-text"
             x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
             y="{{ diagram_height - line_height }}"
             font-size="{{ SCALE * 0.75 }}"

From fb4e66e986adce617839220ea320bed267c5a2c8 Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Tue, 2 Dec 2025 16:18:18 +0100
Subject: [PATCH 5/7] Avoid :root

---
 _tools/release_cycle_template.svg.jinja | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index 20b3bc9c4..ee44edbd6 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -5,7 +5,8 @@
     viewBox="0 0 {{ diagram_width }} {{ diagram_height }}"
 >
     <style>
-        :root {
+        /* Embedded styles for standalone viewing */
+        .release-cycle-chart {
             color-scheme: light dark;
 
             {# Copy vars from Furo theme if present #}
@@ -17,9 +18,7 @@
             }.items() %}
                 --svg-{{varname}}: var(--{{varname}}, {{default}});
             {% endfor %}
-        }
-        /* Embedded styles for standalone viewing */
-        .release-cycle-chart {
+
             font-family: var(
                 --font-stack,
                 -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,

From 4bdcd0d24c373053204ff60d9bab1ff5667557e7 Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Tue, 2 Dec 2025 19:04:33 +0100
Subject: [PATCH 6/7] Responsive colours for years

---
 _tools/release_cycle_template.svg.jinja | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index ee44edbd6..436fd7c96 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -124,7 +124,7 @@
 
     {% for year in years %}
         <text
-            class="release-cycle-year-text"
+            class="release-cycle-year-text text-main"
             x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
             y="{{ diagram_height - line_height }}"
             font-size="{{ SCALE * 0.75 }}"

From 53a698cca6c06f152c4287646199f4b41d78e19d Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Wed, 3 Dec 2025 12:25:47 +0100
Subject: [PATCH 7/7] Light only; add background

---
 _tools/release_cycle_template.svg.jinja | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index 436fd7c96..9f23814a9 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -7,7 +7,7 @@
     <style>
         /* Embedded styles for standalone viewing */
         .release-cycle-chart {
-            color-scheme: light dark;
+            color-scheme: light;
 
             {# Copy vars from Furo theme if present #}
             {% for varname, default in {
@@ -26,8 +26,9 @@
             width: 100%;
 
             --blob-border-width: 1.6px;
-
-            background-color: var(--color-background-primary);
+        }
+        .background {
+            fill: var(--svg-color-background-primary);
         }
         .release-cycle-year-line {
             stroke: var(--svg-color-foreground-primary);
@@ -108,6 +109,14 @@
         </linearGradient>
     </defs>
 
+    <rect
+        class="background"
+        x="0"
+        y="0"
+        width="{{ diagram_width }}"
+        height="{{ diagram_height }}"
+    />
+
     {% for version in versions %}
         {% set y = version.y * line_height %}
         {% if version.y % 2 %}