From af578045136a76c2e59ae308c3045abf5efaa8ad Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Thu, 5 May 2022 14:28:45 +0100
Subject: [PATCH] Tooltip: Make tooltip use secondary background color for
 legible links (#48748)

---
 packages/grafana-data/src/themes/createComponents.ts   | 4 ++--
 packages/grafana-ui/src/components/Tooltip/Tooltip.tsx | 3 +++
 public/sass/_variables.dark.generated.scss             | 4 ++--
 public/sass/_variables.light.generated.scss            | 6 +++---
 public/sass/components/_panel_header.scss              | 8 --------
 5 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts
index 51603f036c7..54af55d55bc 100644
--- a/packages/grafana-data/src/themes/createComponents.ts
+++ b/packages/grafana-data/src/themes/createComponents.ts
@@ -75,8 +75,8 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
       background: input.background,
     },
     tooltip: {
-      background: colors.mode === 'light' ? '#555' : '#35383e',
-      text: colors.mode === 'light' ? '#FFF' : colors.text.primary,
+      background: colors.background.secondary,
+      text: colors.text.primary,
     },
     dashboard: {
       background: colors.background.canvas,
diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
index 08647671b66..a0cd2ef0551 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
@@ -188,6 +188,9 @@ function getStyles(theme: GrafanaTheme2) {
 
       a {
         color: ${theme.colors.text.link};
+      }
+
+      a:hover {
         text-decoration: underline;
       }
     `;
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index 1de1fd75353..474f9c119de 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -291,9 +291,9 @@ $tooltipLinkColor: $link-color;
 $tooltipExternalLinkColor: $external-link-color;
 $graph-tooltip-bg: $dark-1;
 
-$tooltipBackground: #35383e;
+$tooltipBackground: #22252b;
 $tooltipColor: rgb(204, 204, 220);
-$tooltipArrowColor: #35383e;
+$tooltipArrowColor: #22252b;
 $tooltipBackgroundError: #D10E5C;
 $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.75);
 
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index e12d2876870..e0bbb8a6371 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -282,9 +282,9 @@ $alert-warning-bg: #FAD34A;
 $alert-info-bg: #FAD34A;
 
 // Tooltips and popovers
-$tooltipBackground: #555;
-$tooltipColor: #FFF;
-$tooltipArrowColor: #555;
+$tooltipBackground: #F4F5F5;
+$tooltipColor: rgba(36, 41, 46, 1);
+$tooltipArrowColor: #F4F5F5;
 $tooltipBackgroundError: #E0226E;
 $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2);
 
diff --git a/public/sass/components/_panel_header.scss b/public/sass/components/_panel_header.scss
index c6f616d5b18..9c5499c0e5f 100644
--- a/public/sass/components/_panel_header.scss
+++ b/public/sass/components/_panel_header.scss
@@ -161,14 +161,6 @@ $panel-header-no-title-zindex: 1;
 }
 
 .panel-info-content {
-  a {
-    color: $gray-6;
-
-    &:hover {
-      color: darken($white, 10%);
-    }
-  }
-
   code {
     white-space: normal;
     word-wrap: break-word;