Update with variables for both light and dark

Author: hugovk

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);

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);

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;
 }
 
 /* --------------------------------------------------------------------------