From c5bd63c2e5dd0b742cee992a42e348d3f18099b3 Mon Sep 17 00:00:00 2001 From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com> Date: Thu, 18 Dec 2025 15:59:23 +0200 Subject: [PATCH 1/3] Fix contrast for samples/sec with dark theme --- Lib/profiling/sampling/_heatmap_assets/heatmap.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Lib/profiling/sampling/_heatmap_assets/heatmap.css b/Lib/profiling/sampling/_heatmap_assets/heatmap.css index 9999cd6760fd49..0a692ff9a5e79e 100644 --- a/Lib/profiling/sampling/_heatmap_assets/heatmap.css +++ b/Lib/profiling/sampling/_heatmap_assets/heatmap.css @@ -72,7 +72,7 @@ .stat-card:nth-child(1) { --i: 0; --card-color: 55, 118, 171; } .stat-card:nth-child(2) { --i: 1; --card-color: 40, 167, 69; } .stat-card:nth-child(3) { --i: 2; --card-color: 255, 193, 7; } -.stat-card:nth-child(4) { --i: 3; --card-color: 111, 66, 193; } +.stat-card:nth-child(4) { --i: 3; --card-color: 116, 69, 201; } .stat-card:nth-child(5) { --i: 4; --card-color: 220, 53, 69; } .stat-card:nth-child(6) { --i: 5; --card-color: 23, 162, 184; } From ccdfab067d15743e84baf759d4343dd87af713db Mon Sep 17 00:00:00 2001 From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com> Date: Thu, 18 Dec 2025 16:01:44 +0200 Subject: [PATCH 2/3] Fix contrast for duration and missed samples with light theme --- Lib/profiling/sampling/_heatmap_assets/heatmap.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Lib/profiling/sampling/_heatmap_assets/heatmap.css b/Lib/profiling/sampling/_heatmap_assets/heatmap.css index 0a692ff9a5e79e..2dddb944b1a275 100644 --- a/Lib/profiling/sampling/_heatmap_assets/heatmap.css +++ b/Lib/profiling/sampling/_heatmap_assets/heatmap.css @@ -71,7 +71,7 @@ .stat-card:nth-child(1) { --i: 0; --card-color: 55, 118, 171; } .stat-card:nth-child(2) { --i: 1; --card-color: 40, 167, 69; } -.stat-card:nth-child(3) { --i: 2; --card-color: 255, 193, 7; } +.stat-card:nth-child(3) { --i: 2; --card-color: 184, 140, 5; } .stat-card:nth-child(4) { --i: 3; --card-color: 116, 69, 201; } .stat-card:nth-child(5) { --i: 4; --card-color: 220, 53, 69; } .stat-card:nth-child(6) { --i: 5; --card-color: 23, 162, 184; } @@ -160,7 +160,7 @@ } .rate-card:nth-child(5) { animation-delay: 0.32s; --rate-color: 220, 53, 69; } -.rate-card:nth-child(6) { animation-delay: 0.40s; --rate-color: 255, 152, 0; } +.rate-card:nth-child(6) { animation-delay: 0.40s; --rate-color: 212, 126, 0; } .rate-card:hover { border-color: rgba(var(--rate-color), 0.5); From 0846506c052421efa65122f02284e83c169e7a49 Mon Sep 17 00:00:00 2001 From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com> Date: Mon, 22 Dec 2025 19:51:08 +0200 Subject: [PATCH 3/3] Update with variables for both light and dark --- .../sampling/_flamegraph_assets/flamegraph.css | 8 ++++---- .../sampling/_heatmap_assets/heatmap.css | 14 ++++++-------- Lib/profiling/sampling/_shared_assets/base.css | 16 ++++++++++++++++ 3 files changed, 26 insertions(+), 12 deletions(-) diff --git a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css index 03eb2274d23e68..521215365984b8 100644 --- a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css +++ b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css @@ -346,10 +346,10 @@ body.resizing-sidebar { position: relative; } -.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; } +.summary-card:nth-child(1) { --i: 0; --card-color: var(--card-blue); } +.summary-card:nth-child(2) { --i: 1; --card-color: var(--card-green); } +.summary-card:nth-child(3) { --i: 2; --card-color: var(--card-yellow); } +.summary-card:nth-child(4) { --i: 3; --card-color: var(--card-purple); } .summary-card:hover { border-color: rgba(var(--card-color), 0.6); diff --git a/Lib/profiling/sampling/_heatmap_assets/heatmap.css b/Lib/profiling/sampling/_heatmap_assets/heatmap.css index 2dddb944b1a275..8f7f034ba7e596 100644 --- a/Lib/profiling/sampling/_heatmap_assets/heatmap.css +++ b/Lib/profiling/sampling/_heatmap_assets/heatmap.css @@ -69,12 +69,10 @@ overflow: hidden; } -.stat-card:nth-child(1) { --i: 0; --card-color: 55, 118, 171; } -.stat-card:nth-child(2) { --i: 1; --card-color: 40, 167, 69; } -.stat-card:nth-child(3) { --i: 2; --card-color: 184, 140, 5; } -.stat-card:nth-child(4) { --i: 3; --card-color: 116, 69, 201; } -.stat-card:nth-child(5) { --i: 4; --card-color: 220, 53, 69; } -.stat-card:nth-child(6) { --i: 5; --card-color: 23, 162, 184; } +.stat-card:nth-child(1) { --i: 0; --card-color: var(--card-blue); } +.stat-card:nth-child(2) { --i: 1; --card-color: var(--card-green); } +.stat-card:nth-child(3) { --i: 2; --card-color: var(--card-yellow); } +.stat-card:nth-child(4) { --i: 3; --card-color: var(--card-purple); } .stat-card:hover { border-color: rgba(var(--card-color), 0.6); @@ -159,8 +157,8 @@ overflow: hidden; } -.rate-card:nth-child(5) { animation-delay: 0.32s; --rate-color: 220, 53, 69; } -.rate-card:nth-child(6) { animation-delay: 0.40s; --rate-color: 212, 126, 0; } +.rate-card:nth-child(5) { animation-delay: 0.32s; --rate-color: var(--card-red); } +.rate-card:nth-child(6) { animation-delay: 0.40s; --rate-color: var(--card-orange); } .rate-card:hover { border-color: rgba(var(--rate-color), 0.5); diff --git a/Lib/profiling/sampling/_shared_assets/base.css b/Lib/profiling/sampling/_shared_assets/base.css index cb59a0f77c5b63..2164f3f3aa13c7 100644 --- a/Lib/profiling/sampling/_shared_assets/base.css +++ b/Lib/profiling/sampling/_shared_assets/base.css @@ -100,6 +100,14 @@ /* Heatmap span highlighting colors */ --span-hot-base: 255, 100, 50; --span-cold-base: 150, 150, 150; + + /* Summary card colors - optimized for 4.5:1 contrast on light bg */ + --card-blue: 44, 102, 149; + --card-green: 26, 116, 49; + --card-yellow: 134, 100, 4; + --card-purple: 102, 57, 166; + --card-red: 180, 40, 50; + --card-orange: 166, 90, 0; } /* Dark theme */ @@ -162,6 +170,14 @@ /* Heatmap span highlighting colors - dark theme */ --span-hot-base: 255, 107, 53; --span-cold-base: 189, 189, 189; + + /* Summary card colors - optimized for 4.5:1 contrast on dark bg */ + --card-blue: 88, 166, 255; + --card-green: 63, 185, 80; + --card-yellow: 210, 153, 34; + --card-purple: 163, 113, 247; + --card-red: 248, 113, 113; + --card-orange: 251, 146, 60; } /* --------------------------------------------------------------------------