Move styles into SVG image

Author: hugovk

_static/devguide_overrides.css

@@ -6,16 +6,9 @@
     height: 110px;
 }
 
-/* Release cycle chart */
-
-.release-cycle-chart {
-    width: 100%;
-}
-
+/* Release cycle chart - theme-aware overrides */
 .release-cycle-chart .release-cycle-year-line {
     stroke: var(--color-foreground-primary);
-    stroke-width: 0.8px;
-    opacity: 75%;
 }
 
 .release-cycle-chart .release-cycle-year-text {
@@ -24,84 +17,23 @@
 
 .release-cycle-chart .release-cycle-today-line {
     stroke: var(--color-brand-primary);
-    stroke-width: 1.6px;
 }
 
 .release-cycle-chart .release-cycle-row-shade {
     fill: var(--color-background-item);
-    opacity: 50%;
 }
 
 .release-cycle-chart .release-cycle-version-label {
     fill: var(--color-foreground-primary);
 }
 
-.release-cycle-chart .release-cycle-blob {
-    stroke-width: 1.6px;
-    /* default colours, overridden below for individual statuses */
-    fill: var(--color-background-primary);
-    stroke: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-blob-label {
-    /* white looks good on both light & dark */
-    fill: white;
-}
-
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-security,
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-bugfix {
-    /* but use black to improve contrast for lighter backgrounds */
-    fill: black;
-}
-
 .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);
 }
 
-.release-cycle-chart .release-cycle-status-end-of-life {
-    --status-bg-color: #DD2200;
-    --status-border-color: #FF8888;
-}
-
-.release-cycle-chart .release-cycle-status-security {
-    --status-bg-color: #FFDD44;
-    --status-border-color: #FF8800;
-}
-
-.release-cycle-chart .release-cycle-status-bugfix {
-    --status-bg-color: #00DD22;
-    --status-border-color: #008844;
-}
-
-.release-cycle-chart .release-cycle-status-prerelease {
-    --status-bg-color: teal;
-    --status-border-color: darkgreen;
-}
-
-.release-cycle-chart .release-cycle-status-feature {
-    --status-bg-color: #2222EE;
-    --status-border-color: #008888;
-}
-
-.release-cycle-chart .release-cycle-blob {
-    fill: var(--status-bg-color);
-    stroke: transparent;
-}
-
-.release-cycle-chart .release-cycle-blob-full {
-    fill: var(--status-bg-color);
-    stroke: var(--status-border-color);
-}
-
-.release-cycle-chart .release-cycle-border {
-    fill: transparent;
-    stroke: var(--status-border-color);
-    stroke-width: 1.6px;
-}
-
 .good pre {
   border-left: 3px solid rgba(74, 182, 93, 1);
 }

_tools/release_cycle_template.svg.jinja

@@ -4,6 +4,95 @@
     class="release-cycle-chart"
     viewBox="0 0 {{ diagram_width }} {{ diagram_height }}"
 >
+    <style>
+        /* Embedded styles for standalone viewing */
+        .release-cycle-chart {
+            width: 100%;
+        }
+        .release-cycle-year-line {
+            stroke: #333;
+            stroke-width: 0.8px;
+            opacity: 75%;
+        }
+        .release-cycle-year-text {
+            fill: #333;
+        }
+        .release-cycle-today-line {
+            stroke: #4B8BBE; /* Python blue */
+            stroke-width: 1.6px;
+        }
+        .release-cycle-row-shade {
+            fill: #e0e0e0;
+            opacity: 50%;
+        }
+        .release-cycle-version-label {
+            fill: #333;
+        }
+        .release-cycle-blob {
+            stroke-width: 1.6px;
+        }
+        .release-cycle-blob-label {
+            fill: white;
+        }
+        .release-cycle-blob-label.release-cycle-status-security,
+        .release-cycle-blob-label.release-cycle-status-bugfix {
+            fill: black;
+        }
+        .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 .release-cycle-blob,
+        .release-cycle-blob.release-cycle-status-end-of-life {
+            fill: #DD2200;
+            stroke: #FF8888;
+        }
+        .release-cycle-status-security .release-cycle-blob,
+        .release-cycle-blob.release-cycle-status-security {
+            fill: #FFDD44;
+            stroke: transparent;
+        }
+        .release-cycle-status-bugfix .release-cycle-blob,
+        .release-cycle-blob.release-cycle-status-bugfix {
+            fill: #00DD22;
+            stroke: transparent;
+        }
+        .release-cycle-status-prerelease .release-cycle-blob,
+        .release-cycle-blob.release-cycle-status-prerelease {
+            fill: teal;
+            stroke: transparent;
+        }
+        .release-cycle-status-feature .release-cycle-blob,
+        .release-cycle-blob.release-cycle-status-feature {
+            fill: #2222EE;
+            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-border.release-cycle-status-prerelease {
+            fill: transparent;
+            stroke: darkgreen;
+            stroke-width: 1.6px;
+        }
+        .release-cycle-border.release-cycle-status-feature {
+            fill: transparent;
+            stroke: #008888;
+            stroke-width: 1.6px;
+        }
+    </style>
     <defs>
         <linearGradient id="release-cycle-mask-gradient-{{ id_key }}">
             <stop stop-color="black" offset="0%" />