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

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