Move css styles to public/sass/components/_panel_heatmap.scss

public/app/plugins/panel/heatmap/css/heatmap.dark.css

-.axis text {
-}
-
-.axis {
-	font-family: "Open Sans", Helvetica, Arial, sans-serif;
-	font-size: smaller;
-	fill: #D8D9DA;
-}
-
-.axis path,
-.axis line {
-  fill: none;
-  stroke: #7B7B7B;
-  /*shape-rendering: crispEdges;*/
-}
-
-.axis .domain {
-	/*opacity: 0;*/
-}
-
-.tick line {
-	opacity: 0.4;
-	stroke: #7B7B7B;
-}
-
-.tick text {
-	fill: #D8D9DA;
-}
-
-.heatmap-panel {
-  cursor: crosshair;
-  padding: 0;
-}
-
-div.heatmap-tooltip {
-  position: absolute;
-  text-align: left;
-  min-width: 160px;
-  padding: 12px;
-  font-family: "Open Sans", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  background: #141414;
-  border: 0px;
-  border-radius: 8px;
-  pointer-events: none;
-}
-
-.card-highlighted:hover {
-	stroke: #D8D9DA;
-}
-
-rect.heatmap-card {
-  pointer-events: all;
-}
-
-.heatmap-histogram rect {
-  fill: #828282;
-}
-
-.heatmap-crosshair line {
-  stroke: #9a1010;
-  stroke-width: 1;
-}
-
-.heatmap-selection {
-  stroke-width: 1;
-  opacity: 0.3;
-  fill: #828282;
-  stroke: #D8D9DA;
-}

public/app/plugins/panel/heatmap/css/heatmap.light.css

-.axis {
-	font-family: "Open Sans", Helvetica, Arial, sans-serif;
-	font-size: smaller;
-	fill: #555555;
-}
-
-.axis path,
-.axis line {
-  fill: none;
-  stroke: #D8D9DA;
-  /*shape-rendering: crispEdges;*/
-}
-
-.tick line {
-	opacity: 0.4;
-	stroke: #D8D9DA;
-}
-
-.tick text {
-  fill: #555555;
-}
-
-.heatmap-panel {
-  cursor: crosshair;
-}
-
-div.heatmap-tooltip {
-  position: absolute;
-  text-align: left;
-  min-width: 160px;
-  padding: 12px;
-  font-family: "Open Sans", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  background: #ECECEC;
-  border: 0px;
-  border-radius: 8px;
-  pointer-events: none;
-}
-
-.card-highlighted:hover {
-	stroke: #D8D9DA;
-}
-
-.heatmap-histogram rect {
-  fill: #555555;
-}
-
-.heatmap-crosshair line {
-  stroke: #a25959;
-  stroke-width: 1;
-}
-
-.heatmap-selection {
-  stroke-width: 1;
-  opacity: 0.3;
-  fill: #555555;
-  stroke: #000;
-}

public/app/plugins/panel/heatmap/heatmap_tooltip.ts

@@ -52,7 +52,7 @@ export class HeatmapTooltip {
   add() {
     this.tooltip = d3.select("body")
       .append("div")
-      .attr("class", "heatmap-tooltip");
+      .attr("class", "heatmap-tooltip graph-tooltip grafana-tooltip");
   }
 
   destroy() {
@@ -82,7 +82,7 @@ export class HeatmapTooltip {
     let decimals = this.panel.tooltipDecimals || 5;
     let valueFormatter = this.valueFormatter(decimals);
 
-    let tooltipHtml = `<div><b>${time}</b></div>
+    let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>
       <div class="heatmap-histogram"></div>`;
 
     if (yData) {

public/app/plugins/panel/heatmap/module.ts

@@ -3,11 +3,6 @@
 import {loadPluginCss} from 'app/plugins/sdk';
 import {HeatmapCtrl} from './heatmap_ctrl';
 
-// loadPluginCss({
-//   dark: 'public/app/plugins/panel/heatmap/css/heatmap.dark.css',
-//   light: 'public/app/plugins/panel/heatmap/css/heatmap.light.css'
-// });
-
 export {
   HeatmapCtrl as PanelCtrl
 };

public/sass/_grafana.scss

@@ -48,6 +48,7 @@
 @import "components/panel_singlestat";
 @import "components/panel_table";
 @import "components/panel_text";
+@import "components/panel_heatmap";
 @import "components/tagsinput";
 @import "components/tables_lists";
 @import "components/search";

public/sass/components/_panel_heatmap.scss

+.heatmap-canvas-wrapper {
+  position: relative;
+  cursor: crosshair;
+}
+
+.heatmap-panel {
+  .axis .tick {
+    text {
+      fill: $text-color;
+      color: $text-color;
+      font-size: $font-size-sm;
+    }
+
+    line {
+      opacity: 0.4;
+      stroke: $text-color-weak;
+    }
+  }
+}
+
+.heatmap-tooltip {
+  white-space: nowrap;
+  font-size: $font-size-sm;
+  background-color: $graph-tooltip-bg;
+  color: $text-color;
+}
+
+.heatmap-histogram rect {
+  fill: $text-color-weak;
+}
+
+.heatmap-crosshair {
+  line {
+    stroke: darken($red,15%);
+    stroke-width: 1;
+  }
+}