Theme:s Tooltip fixes (#23174)

* LightTheme: Fixed tooltips background & text

* LightTheme: Fixed tooltips background & text

packages/grafana-ui/src/components/Tooltip/_Tooltip.scss

@@ -13,6 +13,11 @@ $popper-margin-from-ref: 5px;
     background: darken($backgroundColor, 15%);
     color: lighten($textColor, 20%);
   }
+
+  strong,
+  em {
+    color: lighten($textColor, 20%);
+  }
 }
 
 .popper {
@@ -25,7 +30,7 @@ $popper-margin-from-ref: 5px;
 .popper__background {
   background: $tooltipBackground;
   border-radius: $border-radius-sm;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  box-shadow: $tooltipShadow;
   padding: $space-sm;
   color: $tooltipColor;
   font-weight: $font-weight-semi-bold;

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -282,30 +282,29 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
 $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
 $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
 
-// popover
-$popover-bg: $dark-2;
-$popover-color: $text-color;
-$popover-border-color: $dark-9;
-$popover-header-bg: $dark-9;
-$popover-shadow: 0 0 20px black;
-
-$popover-help-bg: $btn-secondary-bg;
-$popover-help-color: $gray-6;
-
-$popover-error-bg: $btn-danger-bg;
-
 // Tooltips and popovers
 // -------------------------
-$tooltipColor: $popover-help-color;
+$tooltipColor: $text-color;
 $tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
+$tooltipShadow: 0 0 10px black;
 $graph-tooltip-bg: $dark-1;
 
-$tooltipBackground: $black;
-$tooltipColor: $gray-4;
+$tooltipBackground: $gray15;
+$tooltipColor: $text-color;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipBackgroundError: $brand-danger;
 
+$popover-bg: $dark-2;
+$popover-color: $text-color;
+$popover-border-color: $dark-9;
+$popover-header-bg: $dark-9;
+$popover-shadow: 0 0 20px black;
+
+$popover-help-bg: $tooltipBackground;
+$popover-help-color: $text-color;
+$popover-error-bg: $btn-danger-bg;
+
 // images
 $checkboxImageUrl: '../img/checkbox.png';
 

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -274,29 +274,26 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
 $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
 $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
 
-// popover
+// Tooltips and popovers
+$tooltipBackground: $gray-1;
+$tooltipColor: $gray-7;
+$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
+$tooltipBackgroundError: $brand-danger;
+$tooltipShadow: 0 0 5px $gray60;
+$graph-tooltip-bg: $gray-5;
+
+$tooltipArrowWidth: 5px;
+$tooltipLinkColor: lighten($tooltipColor, 5%);
+
 $popover-bg: $page-bg;
 $popover-color: $text-color;
 $popover-border-color: $gray-5;
 $popover-header-bg: $gray-5;
 $popover-shadow: 0 0 20px $white;
 
-$popover-help-bg: $btn-secondary-bg;
-$popover-help-color: $gray-6;
-
 $popover-error-bg: $btn-danger-bg;
-
-// Tooltips and popovers
-// -------------------------
-$tooltipColor: $popover-help-color;
-$tooltipArrowWidth: 5px;
-$tooltipLinkColor: lighten($popover-help-color, 5%);
-$graph-tooltip-bg: $gray-5;
-
-$tooltipBackground: $gray-1;
-$tooltipColor: $gray-7;
-$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
-$tooltipBackgroundError: $brand-danger;
+$popover-help-bg: $tooltipBackground;
+$popover-help-color: $tooltipColor;
 
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';

public/sass/_variables.dark.generated.scss

@@ -285,30 +285,29 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
 $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
 $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
 
-// popover
-$popover-bg: $dark-2;
-$popover-color: $text-color;
-$popover-border-color: $dark-9;
-$popover-header-bg: $dark-9;
-$popover-shadow: 0 0 20px black;
-
-$popover-help-bg: $btn-secondary-bg;
-$popover-help-color: $gray-6;
-
-$popover-error-bg: $btn-danger-bg;
-
 // Tooltips and popovers
 // -------------------------
-$tooltipColor: $popover-help-color;
+$tooltipColor: $text-color;
 $tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
+$tooltipShadow: 0 0 10px black;
 $graph-tooltip-bg: $dark-1;
 
-$tooltipBackground: $black;
-$tooltipColor: $gray-4;
+$tooltipBackground: $gray15;
+$tooltipColor: $text-color;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipBackgroundError: $brand-danger;
 
+$popover-bg: $dark-2;
+$popover-color: $text-color;
+$popover-border-color: $dark-9;
+$popover-header-bg: $dark-9;
+$popover-shadow: 0 0 20px black;
+
+$popover-help-bg: $tooltipBackground;
+$popover-help-color: $text-color;
+$popover-error-bg: $btn-danger-bg;
+
 // images
 $checkboxImageUrl: '../img/checkbox.png';
 

public/sass/_variables.light.generated.scss

@@ -277,29 +277,26 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
 $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
 $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
 
-// popover
+// Tooltips and popovers
+$tooltipBackground: $gray-1;
+$tooltipColor: $gray-7;
+$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
+$tooltipBackgroundError: $brand-danger;
+$tooltipShadow: 0 0 5px $gray60;
+$graph-tooltip-bg: $gray-5;
+
+$tooltipArrowWidth: 5px;
+$tooltipLinkColor: lighten($tooltipColor, 5%);
+
 $popover-bg: $page-bg;
 $popover-color: $text-color;
 $popover-border-color: $gray-5;
 $popover-header-bg: $gray-5;
 $popover-shadow: 0 0 20px $white;
 
-$popover-help-bg: $btn-secondary-bg;
-$popover-help-color: $gray-6;
-
 $popover-error-bg: $btn-danger-bg;
-
-// Tooltips and popovers
-// -------------------------
-$tooltipColor: $popover-help-color;
-$tooltipArrowWidth: 5px;
-$tooltipLinkColor: lighten($popover-help-color, 5%);
-$graph-tooltip-bg: $gray-5;
-
-$tooltipBackground: $gray-1;
-$tooltipColor: $gray-7;
-$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
-$tooltipBackgroundError: $brand-danger;
+$popover-help-bg: $tooltipBackground;
+$popover-help-color: $tooltipColor;
 
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';