Tooltip: Make tooltip use secondary background color for legible links (#48748) (#48764)

(cherry picked from commit af57804513)

Co-authored-by: Josh Hunt <joshhunt@users.noreply.github.com>

packages/grafana-data/src/themes/createComponents.ts

@@ -69,8 +69,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,

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;
       }
     `;

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

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

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;