gh-142927: Tachyon: Fix contrast ratio in top panel

[hugovk]

Before

In dark mode, the samples/sec numbers has contrast ratio of 2.9.

In light mode, duration and missed samples are 1.63 and 2.15 respectively.

They should be at least 4.5 to meet WCAG AA guidelines.

After

The values suggested by Chrome:

• Issue: Improve Tachyon UX #142927

[pablogsal]

Thanks a lot @hugovk 🖤

[StanFromIreland]

This also affects the flamegraph output.

[hugovk]

This also affects the flamegraph output.

In what way? For better, or worse? Please share more details.

[StanFromIreland]

As in, the CSS is copy-pasted:

cpython/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css

Lines 349 to 352 in 14f0b51

	.summary-card:nth-child(1){--i:0; --card-color:55,118,171}
	.summary-card:nth-child(2){--i:1; --card-color:40,167,69}
	.summary-card:nth-child(3){--i:2; --card-color:255,193,7}
	.summary-card:nth-child(4){--i:3; --card-color:111,66,193}

[hugovk]

Ah right, thanks. Let's update those too.

They should be at least 4.5 to meet WCAG AA guidelines.

Actually, that's for normal size text. The heatmap panel is large, so the original colours are at least 3.

We need 4.5 for the flamegraph, and it's hard to find colours that work for both dark and light themes. So this is now updated to different colour for dark/light and re-use via variables.

Also we don't need stat-card for 5th and 6th children, rate-card is used instead. So delete that dead code.

Heatmap:

Flamegraph:

[pablogsal]

Thanks a lot @hugovk and @StanFromIreland !