From b815680a6b01013985bf03a3b09888af055327c9 Mon Sep 17 00:00:00 2001
From: Paul Marbach <paul.marbach@grafana.com>
Date: Wed, 17 Dec 2025 08:41:56 -0500
Subject: [PATCH] test all dark/light theme variants

---
 .../__snapshots__/colors.test.ts.snap         | 152 ++++++++++++++++++
 .../src/components/RadialGauge/colors.test.ts |  17 +-
 2 files changed, 165 insertions(+), 4 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/RadialGauge/__snapshots__/colors.test.ts.snap

diff --git a/packages/grafana-ui/src/components/RadialGauge/__snapshots__/colors.test.ts.snap b/packages/grafana-ui/src/components/RadialGauge/__snapshots__/colors.test.ts.snap
new file mode 100644
index 00000000000..3fabe922a8d
--- /dev/null
+++ b/packages/grafana-ui/src/components/RadialGauge/__snapshots__/colors.test.ts.snap
@@ -0,0 +1,152 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RadialGauge color utils buildGradientColors should map threshold colors correctly (with baseColor if displayProcessor does not return colors) 1`] = `
+[
+  {
+    "color": "#444444",
+    "percent": 0,
+  },
+  {
+    "color": "#FADE2A",
+    "percent": 0.5,
+  },
+  {
+    "color": "#F2495C",
+    "percent": 0.8,
+  },
+  {
+    "color": "#444444",
+    "percent": 1,
+  },
+]
+`;
+
+exports[`RadialGauge color utils buildGradientColors should map threshold colors correctly (with baseColor if displayProcessor does not return colors) 2`] = `
+[
+  {
+    "color": "#FF0000",
+    "percent": 0,
+  },
+  {
+    "color": "#FADE2A",
+    "percent": 0.5,
+  },
+  {
+    "color": "#F2495C",
+    "percent": 0.8,
+  },
+  {
+    "color": "#FF0000",
+    "percent": 1,
+  },
+]
+`;
+
+exports[`RadialGauge color utils buildGradientColors should return gradient colors for by-value color mode in dark theme 1`] = `
+[
+  {
+    "color": "#181b1f",
+    "percent": 0,
+  },
+  {
+    "color": "#1F60C4",
+    "percent": 1,
+  },
+]
+`;
+
+exports[`RadialGauge color utils buildGradientColors should return gradient colors for by-value color mode in light theme 1`] = `
+[
+  {
+    "color": "#ffffff",
+    "percent": 0,
+  },
+  {
+    "color": "#1250B0",
+    "percent": 1,
+  },
+]
+`;
+
+exports[`RadialGauge color utils buildGradientColors should return gradient colors for continuous color modes 1`] = `
+[
+  {
+    "color": "rgb(0, 32, 81)",
+    "percent": 0,
+  },
+  {
+    "color": "rgb(17, 54, 108)",
+    "percent": 0.125,
+  },
+  {
+    "color": "rgb(60, 77, 110)",
+    "percent": 0.25,
+  },
+  {
+    "color": "rgb(98, 100, 111)",
+    "percent": 0.375,
+  },
+  {
+    "color": "rgb(127, 124, 117)",
+    "percent": 0.5,
+  },
+  {
+    "color": "rgb(154, 148, 120)",
+    "percent": 0.625,
+  },
+  {
+    "color": "rgb(187, 175, 113)",
+    "percent": 0.75,
+  },
+  {
+    "color": "rgb(226, 203, 92)",
+    "percent": 0.875,
+  },
+  {
+    "color": "rgb(253, 234, 69)",
+    "percent": 1,
+  },
+]
+`;
+
+exports[`RadialGauge color utils buildGradientColors should return gradient colors for fixed color mode in dark theme 1`] = `
+[
+  {
+    "color": "#030108",
+    "percent": 0,
+  },
+  {
+    "color": "#442299",
+    "percent": 0.45,
+  },
+  {
+    "color": "#442299",
+    "percent": 0.55,
+  },
+  {
+    "color": "#ffffff",
+    "percent": 1,
+  },
+]
+`;
+
+exports[`RadialGauge color utils buildGradientColors should return gradient colors for fixed color mode in light theme 1`] = `
+[
+  {
+    "color": "#9689ca",
+    "percent": 0,
+  },
+  {
+    "color": "#442299",
+    "percent": 0.45,
+  },
+  {
+    "color": "#442299",
+    "percent": 0.55,
+  },
+  {
+    "color": "#030108",
+    "percent": 1,
+  },
+]
+`;
diff --git a/packages/grafana-ui/src/components/RadialGauge/colors.test.ts b/packages/grafana-ui/src/components/RadialGauge/colors.test.ts
index 5c18107ed5c..bd70e13e3c0 100644
--- a/packages/grafana-ui/src/components/RadialGauge/colors.test.ts
+++ b/packages/grafana-ui/src/components/RadialGauge/colors.test.ts
@@ -101,15 +101,24 @@ describe('RadialGauge color utils', () => {
       ).toMatchSnapshot();
     });
 
-    it('should return gradient colors for by-value color modes', () => {
+    it.each(['dark', 'light'] as const)('should return gradient colors for by-value color mode in %s theme', (mode) => {
       expect(
-        buildGradientColors('auto', createTheme(), buildFieldDisplay(createField(FieldColorModeId.ContinuousBlues)))
+        buildGradientColors(
+          'auto',
+          createTheme({ colors: { mode } }),
+          buildFieldDisplay(createField(FieldColorModeId.ContinuousBlues))
+        )
       ).toMatchSnapshot();
     });
 
-    it('should return gradient colors for fixed color mode', () => {
+    it.each(['dark', 'light'] as const)('should return gradient colors for fixed color mode in %s theme', (mode) => {
       expect(
-        buildGradientColors('auto', createTheme(), buildFieldDisplay(createField(FieldColorModeId.Fixed)), '#442299')
+        buildGradientColors(
+          'auto',
+          createTheme({ colors: { mode } }),
+          buildFieldDisplay(createField(FieldColorModeId.Fixed)),
+          '#442299'
+        )
       ).toMatchSnapshot();
     });
   });