feat: Add brand as tooltip theme and use it on panel edit tabs #14271

packages/grafana-ui/src/components/Tooltip/Popper.tsx

@@ -7,6 +7,7 @@ import Transition from 'react-transition-group/Transition';
 export enum Themes {
   Default = 'popper__background--default',
   Error = 'popper__background--error',
+  Brand = 'popper__background--brand',
 }
 
 const defaultTransitionStyles = {

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

@@ -1,5 +1,13 @@
 $popper-margin-from-ref: 5px;
 
+
+@mixin popper-theme($backgroundColor, $arrowColor) {
+  background: $backgroundColor;
+  .popper__arrow {
+    border-color: $arrowColor;
+  }
+}
+
 .popper {
   position: absolute;
   z-index: $zindex-tooltip;
@@ -16,10 +24,12 @@ $popper-margin-from-ref: 5px;
 
   // Themes
   &.popper__background--error {
-    background: $tooltipBackgroundError;
-    .popper__arrow {
-      border-color: $tooltipBackgroundError;
-    }
+    @include popper-theme($tooltipBackgroundError, $tooltipBackgroundError);
+  }
+
+  &.popper__background--brand {
+    @include popper-theme($tooltipBackgroundBrand, $tooltipBackgroundBrand);
+    @include gradient-vertical($red, $orange);
   }
 }
 

public/app/features/dashboard/dashgrid/PanelEditor.tsx

@@ -16,6 +16,7 @@ import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types/plugins';
 
 import { Tooltip } from '@grafana/ui';
+import { Themes } from '@grafana/ui/src/components/Tooltip/Popper';
 
 interface PanelEditorProps {
   panel: PanelModel;
@@ -138,7 +139,7 @@ function TabItem({ tab, activeTab, onClick }: TabItemParams) {
   return (
     <div className="panel-editor-tabs__item" onClick={() => onClick(tab)}>
       <a className={tabClasses}>
-        <Tooltip content={`${tab.text}`} placement="auto">
+        <Tooltip content={`${tab.text}`} placement="auto" theme={Themes.Brand}>
           <i className={`gicon gicon-${tab.id}${activeTab === tab.id ? '-active' : ''}`} />
         </Tooltip>
       </a>

public/sass/_variables.dark.scss

@@ -310,6 +310,7 @@ $graph-tooltip-bg: $dark-1;
 $tooltipBackground: $popover-help-bg;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipBackgroundError: $brand-danger;
+$tooltipBackgroundBrand: $brand-primary;
 
 // images
 $checkboxImageUrl: '../img/checkbox.png';

public/sass/_variables.light.scss

@@ -314,6 +314,7 @@ $graph-tooltip-bg: $gray-5;
 $tooltipBackground: $popover-help-bg;
 $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
 $tooltipBackgroundError: $brand-danger;
+$tooltipBackgroundBrand: $brand-primary;
 
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';