Skip to content

Commit d36cf00

Browse files
encukouencukou
committed
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)
1 parent f271745 commit d36cf00

File tree

2 files changed

+102
-101
lines changed

2 files changed

+102
-101
lines changed

‎_static/devguide_overrides.css‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,6 @@
66
height: 110px;
77
}
88

9-
/* Release cycle chart */
10-
.release-cycle-chart .release-cycle-year-line {
11-
stroke: var(--color-foreground-primary);
12-
}
13-
14-
.release-cycle-chart .release-cycle-year-text {
15-
fill: var(--color-foreground-primary);
16-
}
17-
18-
.release-cycle-chart .release-cycle-today-line {
19-
stroke: var(--color-brand-primary);
20-
}
21-
22-
.release-cycle-chart .release-cycle-row-shade {
23-
fill: var(--color-background-item);
24-
}
25-
26-
.release-cycle-chart .release-cycle-version-label {
27-
fill: var(--color-foreground-primary);
28-
}
29-
30-
.release-cycle-chart .release-cycle-blob-label.release-cycle-status-end-of-life,
31-
.release-cycle-chart .release-cycle-blob-label.release-cycle-status-prerelease,
32-
.release-cycle-chart .release-cycle-blob-label.release-cycle-status-feature {
33-
/* and FG when it's not in a blob */
34-
fill: var(--color-foreground-primary);
35-
}
36-
379
.good pre {
3810
border-left: 3px solid rgba(74, 182, 93, 1);
3911
}

‎_tools/release_cycle_template.svg.jinja‎

Lines changed: 102 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,95 +5,108 @@
55
viewBox="0 0 {{ diagram_width }} {{ diagram_height }}"
66
>
77
<style>
8+
:root {
9+
color-scheme: light dark;
10+
11+
{# Copy vars from Furo theme if present #}
12+
{% for varname, default in {
13+
'color-foreground-primary': 'light-dark(#333, #fff)',
14+
'color-background-primary': 'light-dark(#fff, #333)',
15+
'color-brand-primary': '#4B8BBE',
16+
'color-background-item': '#e0e0e0',
17+
}.items() %}
18+
--svg-{{varname}}: var(--{{varname}}, {{default}});
19+
{% endfor %}
20+
}
821
/* Embedded styles for standalone viewing */
922
.release-cycle-chart {
10-
font-family: Arial, sans-serif;
23+
font-family: var(
24+
--font-stack,
25+
-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
26+
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji);
1127
width: 100%;
28+
29+
--blob-border-width: 1.6px;
1230
}
1331
.release-cycle-year-line {
14-
stroke: #333;
32+
stroke: var(--svg-color-foreground-primary);
1533
stroke-width: 0.8px;
1634
opacity: 75%;
1735
}
1836
.release-cycle-year-text {
19-
fill: #333;
37+
fill: var(--svg-color-foreground-primary);
2038
}
2139
.release-cycle-today-line {
22-
stroke: #4B8BBE;
23-
stroke-width: 1.6px;
40+
stroke: var(--svg-color-brand-primary);
41+
stroke-width: var(--blob-border-width);
2442
}
2543
.release-cycle-row-shade {
26-
fill: #e0e0e0;
44+
fill: var(--svg-color-background-item);
2745
opacity: 50%;
2846
}
2947
.release-cycle-version-label {
30-
fill: #333;
48+
fill: var(--svg-color-foreground-primary);
3149
}
3250
.release-cycle-blob {
33-
stroke-width: 1.6px;
34-
}
35-
.release-cycle-blob-label {
36-
/* white looks good on both light and dark */
37-
fill: white;
51+
stroke-width: var(--blob-border-width);
3852
}
39-
.release-cycle-blob-label.release-cycle-status-security,
40-
.release-cycle-blob-label.release-cycle-status-bugfix {
41-
/* but use black to improve contrast for lighter backgrounds */
42-
fill: black;
53+
text {
54+
fill: var(--svg-color-foreground-primary);
55+
56+
/* an outline of the background color, in case it's not set
57+
correctly */
58+
stroke: var(--svg-color-background-primary);
59+
stroke-width: var(--blob-border-width);
60+
/* draw stroke first (half of it will be visible as outline) */
61+
paint-order: stroke;
62+
63+
/* use specific colours on known backgrounds */
64+
&amp;.release-cycle-status-security ,
65+
&amp;.release-cycle-status-bugfix {
66+
fill: black;
67+
stroke: var(--status-bg-color);
68+
}
69+
/* For year labels, keep outline below the row shading
70+
(it's a separate element) */
71+
&amp;.release-cycle-version-label-outline {
72+
fill: transparent;
73+
}
74+
&amp;.release-cycle-version-label {
75+
stroke: none;
76+
}
4377
}
44-
.release-cycle-blob-label.release-cycle-status-end-of-life,
45-
.release-cycle-blob-label.release-cycle-status-prerelease,
46-
.release-cycle-blob-label.release-cycle-status-feature {
47-
fill: #333;
78+
.release-cycle-status-end-of-life {
79+
--status-bg-color: #DD2200;
80+
--status-border-color: #FF8888;
4881
}
49-
.release-cycle-status-end-of-life .release-cycle-blob,
50-
.release-cycle-blob.release-cycle-status-end-of-life {
51-
fill: #DD2200;
52-
stroke: #FF8888;
82+
.release-cycle-status-security {
83+
--status-bg-color: #FFDD44;
84+
--status-border-color: #FF8800;
5385
}
54-
.release-cycle-status-security .release-cycle-blob,
55-
.release-cycle-blob.release-cycle-status-security {
56-
fill: #FFDD44;
57-
stroke: transparent;
86+
.release-cycle-status-bugfix {
87+
--status-bg-color: #00DD22;
88+
--status-border-color: #008844;
5889
}
59-
.release-cycle-status-bugfix .release-cycle-blob,
60-
.release-cycle-blob.release-cycle-status-bugfix {
61-
fill: #00DD22;
62-
stroke: transparent;
90+
.release-cycle-status-prerelease {
91+
--status-bg-color: teal;
92+
--status-border-color: darkgreen;
6393
}
64-
.release-cycle-status-prerelease .release-cycle-blob,
65-
.release-cycle-blob.release-cycle-status-prerelease {
66-
fill: teal;
67-
stroke: transparent;
94+
.release-cycle-status-feature {
95+
--status-bg-color: #2222EE;
96+
--status-border-color: #008888;
6897
}
69-
.release-cycle-status-feature .release-cycle-blob,
70-
.release-cycle-blob.release-cycle-status-feature {
71-
fill: #2222EE;
98+
.release-cycle-blob {
99+
fill: var(--status-bg-color);
72100
stroke: transparent;
73101
}
74-
.release-cycle-blob-full.release-cycle-status-end-of-life {
75-
fill: #DD2200;
76-
stroke: #FF8888;
77-
}
78-
.release-cycle-border.release-cycle-status-security {
79-
fill: transparent;
80-
stroke: #FF8800;
81-
stroke-width: 1.6px;
82-
}
83-
.release-cycle-border.release-cycle-status-bugfix {
84-
fill: transparent;
85-
stroke: #008844;
86-
stroke-width: 1.6px;
102+
.release-cycle-blob-full {
103+
fill: var(--status-bg-color);
104+
stroke: var(--status-border-color);
87105
}
88-
.release-cycle-border.release-cycle-status-prerelease {
106+
.release-cycle-border {
89107
fill: transparent;
90-
stroke: darkgreen;
91-
stroke-width: 1.6px;
92-
}
93-
.release-cycle-border.release-cycle-status-feature {
94-
fill: transparent;
95-
stroke: #008888;
96-
stroke-width: 1.6px;
108+
stroke: var(--status-border-color);
109+
stroke-width: var(--blob-border-width);
97110
}
98111
</style>
99112
<defs>
@@ -105,6 +118,15 @@
105118

106119
{% for version in versions %}
107120
{% set y = version.y * line_height %}
121+
<!-- Outline for legend on the left -->
122+
<text
123+
class="release-cycle-version-label-outline"
124+
x="{{ 0.5 * SCALE }}"
125+
y="{{ version.y * line_height }}"
126+
font-size="{{ SCALE }}"
127+
>
128+
Python {{ version.key }}
129+
</text>
108130

109131
{% if version.y % 2 %}
110132
<!-- Row shading -->
@@ -166,16 +188,14 @@
166188
</mask>
167189

168190
{% for version in versions %}
169-
<!-- Colourful blob with a label. -->
191+
<!-- Colourful blob. -->
170192

171193
{% set top_y = version.y * line_height - 1 * SCALE %}
172194
{% set height = 1.25 * SCALE %}
173195
{% set start_x = date_to_x(version.first_release_date) %}
174196
{% set end_x = date_to_x(version.end_of_life_date) %}
175197
{% set radius = 0.25 * SCALE %}
176198

177-
{% set small_text_y = version.y * line_height - 0.1 * SCALE %}
178-
179199
<!-- bugfix/security blobs need to be split between the two phases.
180200
Draw the rectangle with two path elements instead.
181201
Thanks Claude.ai for the initial conversion.
@@ -243,6 +263,25 @@
243263
mask="url(#release-cycle-mask-{{ id_key }})"
244264
/>
245265
{% endif %}
266+
{% endfor %}
267+
268+
<!-- A line for today -->
269+
<line
270+
class="release-cycle-today-line"
271+
x1="{{ date_to_x(today) }}"
272+
x2="{{ date_to_x(today) }}"
273+
y1="0"
274+
y2="{{ diagram_height - line_height }}"
275+
font-size="{{ SCALE }}"
276+
/>
277+
278+
{% for version in versions %}
279+
<!-- Label for colourful blob -->
280+
281+
{% set start_x = date_to_x(version.first_release_date) %}
282+
{% set end_x = date_to_x(version.end_of_life_date) %}
283+
{% set middle_x = ([end_x, date_to_x(version.start_security_date)]|min) %}
284+
{% set small_text_y = version.y * line_height - 0.1 * SCALE %}
246285

247286
<!-- Add text before/after/inside the blob -->
248287
<text
@@ -276,14 +315,4 @@
276315
Python {{ version.key }}
277316
</text>
278317
{% endfor %}
279-
280-
<!-- A line for today -->
281-
<line
282-
class="release-cycle-today-line"
283-
x1="{{ date_to_x(today) }}"
284-
x2="{{ date_to_x(today) }}"
285-
y1="0"
286-
y2="{{ diagram_height - line_height }}"
287-
font-size="{{ SCALE }}"
288-
/>
289318
</svg>

0 commit comments

Comments
 (0)