removed dashboard variables, removed headings-font-family variable, created theme variables for links and z-index, removed unused class in _panel_editor and _dashboard

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

@@ -110,7 +110,6 @@ $font-size-h4: ${theme.typography.heading.h4} !default;
 $font-size-h5: ${theme.typography.heading.h5} !default;
 $font-size-h6: ${theme.typography.heading.h6} !default;
 
-$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $headings-line-height: ${theme.typography.lineHeight.sm} !default;
 
 // Components
@@ -130,8 +129,8 @@ $page-sidebar-margin: 56px;
 
 // Links
 // -------------------------
-$link-decoration: none !default;
+$link-decoration: ${theme.typography.link.decoration} !default;
-$link-hover-decoration: none !default;
+$link-hover-decoration: ${theme.typography.link.hoverDecoration} !default;
 
 // Tables
 //
@@ -166,13 +165,13 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
 // -------------------------
 // Used for a bird's eye view of components dependent on the z-axis
 // Try to avoid customizing these :)
-$zindex-dropdown: 1000;
+$zindex-dropdown: ${theme.zIndex.dropdown};
-$zindex-navbar-fixed: 1020;
+$zindex-navbar-fixed: ${theme.zIndex.navbarFixed};
-$zindex-sidemenu: 1025;
+$zindex-sidemenu: ${theme.zIndex.sidemenu};
-$zindex-tooltip: 1030;
+$zindex-tooltip: ${theme.zIndex.tooltip};
-$zindex-modal-backdrop: 1040;
+$zindex-modal-backdrop: ${theme.zIndex.modalBackdrop};
-$zindex-modal: 1050;
+$zindex-modal: ${theme.zIndex.modal};
-$zindex-typeahead: 1060;
+$zindex-typeahead: ${theme.zIndex.typeahead};
 
 // Buttons
 //
@@ -196,12 +195,6 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
 // sidemenu
 $side-menu-width: 60px;
 
-// dashboard
-$dashboard-padding: 10px * 2;
-$panel-horizontal-padding: 10;
-$panel-vertical-padding: 5;
-$panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px;
-
 // tabs
 $tabs-padding: 10px 15px 9px;
 

packages/grafana-ui/src/themes/default.ts

@@ -4,7 +4,7 @@ const theme: GrafanaThemeCommons = {
   name: 'Grafana Default',
   typography: {
     fontFamily: {
-      sansSerif: "'Roboto', Helvetica, Arial, sans-serif",
+      sansSerif: "'Roboto', 'Helvetica Neue', Arial, sans-serif",
       monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace",
     },
     size: {
@@ -34,6 +34,10 @@ const theme: GrafanaThemeCommons = {
       md: 4 / 3,
       lg: 1.5,
     },
+    link: {
+      decoration: 'none',
+      hoverDecoration: 'none',
+    },
   },
   breakpoints: {
     xs: '0',
@@ -66,6 +70,15 @@ const theme: GrafanaThemeCommons = {
     horizontal: 10,
     vertical: 5,
   },
+  zIndex: {
+    dropdown: '1000',
+    navbarFixed: '1020',
+    sidemenu: '1025',
+    tooltip: '1030',
+    modalBackdrop: '1040',
+    modal: '1050',
+    typeahead: '1060',
+  },
 };
 
 export default theme;

packages/grafana-ui/src/types/theme.ts

@@ -46,6 +46,10 @@ export interface GrafanaThemeCommons {
       h5: string;
       h6: string;
     };
+    link: {
+      decoration: string;
+      hoverDecoration: string;
+    };
   };
   spacing: {
     d: string;
@@ -71,6 +75,15 @@ export interface GrafanaThemeCommons {
     horizontal: number;
     vertical: number;
   };
+  zIndex: {
+    dropdown: string;
+    navbarFixed: string;
+    sidemenu: string;
+    tooltip: string;
+    modalBackdrop: string;
+    modal: string;
+    typeahead: string;
+  };
 }
 
 export interface GrafanaTheme extends GrafanaThemeCommons {

public/sass/_variables.generated.scss

@@ -90,7 +90,7 @@ $grid-gutter-width: 30px !default;
 // Typography
 // -------------------------
 
-$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif;
+$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
 
 $font-size-root: 14px !default;
@@ -113,7 +113,6 @@ $font-size-h4: 18px !default;
 $font-size-h5: 16px !default;
 $font-size-h6: 14px !default;
 
-$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $headings-line-height: 1.1 !default;
 
 // Components
@@ -199,12 +198,6 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
 // sidemenu
 $side-menu-width: 60px;
 
-// dashboard
-$dashboard-padding: 10px * 2;
-$panel-horizontal-padding: 10;
-$panel-vertical-padding: 5;
-$panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px;
-
 // tabs
 $tabs-padding: 10px 15px 9px;
 

public/sass/base/_type.scss

@@ -110,7 +110,6 @@ h6,
 .h5,
 .h6 {
   margin-bottom: $space-sm;
-  font-family: $headings-font-family;
   font-weight: $font-weight-regular;
   line-height: $headings-line-height;
   color: $headings-color;

public/sass/components/_panel_editor.scss

@@ -9,14 +9,14 @@
 
   &--edit {
     height: 40%;
-    margin: 0 $dashboard-padding;
+    margin: 0 $space-md;
   }
 
   &--view {
     flex: 1 1 0;
     height: 90%;
-    margin: 0 $dashboard-padding;
+    margin: 0 $space-md;
-    padding-top: $dashboard-padding;
+    padding-top: $space-md;
   }
 }
 
@@ -80,11 +80,7 @@
   }
 
   .submenu-controls {
-    padding: 0 $dashboard-padding $space-sm $dashboard-padding;
+    padding: 0 $space-md $space-sm $space-md;
-  }
-
-  .panel-editor-container__panel {
-    margin: 0 $dashboard-padding;
   }
 
   .search-container {

public/sass/components/_panel_logs.scss

@@ -3,8 +3,7 @@ $column-horizontal-spacing: 10px;
 .logs-panel-options {
   display: flex;
   background-color: $page-bg;
-  padding: $panel-padding;
+  padding: $space-sm $space-md $space-sm $space-md;
-  padding-top: 10px;
   border-radius: $border-radius;
   margin: $space-md 0 $space-sm;
   border: $panel-border;

public/sass/components/_tabbed_view.scss

@@ -13,7 +13,7 @@
 .tabbed-view-header {
   box-shadow: $page-header-shadow;
   border-bottom: 1px solid $page-header-border-color;
-  padding: 0 $dashboard-padding;
+  padding: 0 $space-md;
   @include clearfix();
 }
 

public/sass/pages/_dashboard.scss

@@ -1,5 +1,5 @@
 .dashboard-container {
-  padding: $dashboard-padding $dashboard-padding 0 $dashboard-padding;
+  padding: $space-md $space-md 0 $space-md;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -78,7 +78,7 @@ div.flot-text {
 }
 
 .panel-content {
-  padding: $panel-padding;
+  padding: 0 $space-md $space-sm $space-md;
   height: calc(100% - 27px);
   position: relative;
 
@@ -260,7 +260,6 @@ div.flot-text {
 }
 
 .dashboard-header {
-  font-family: $headings-font-family;
   font-size: $font-size-h3;
   text-align: center;
   overflow: hidden;
@@ -273,10 +272,6 @@ div.flot-text {
   }
 }
 
-.panel-full-edit {
-  padding-top: $dashboard-padding;
-}
-
 .dashboard-loading {
   height: 60vh;
   display: flex;

public/sass/pages/_explore.scss

@@ -31,7 +31,7 @@
   flex-flow: row wrap;
   justify-content: flex-start;
   height: auto;
-  padding: 0 $dashboard-padding;
+  padding: 0 $space-md;
   border-bottom: 1px solid #0000;
   transition-duration: 0.35s;
   transition-timing-function: ease-in-out;
@@ -91,7 +91,7 @@
 }
 
 .explore-toolbar-content-item:first-child {
-  padding-left: $dashboard-padding;
+  padding-left: $space-md;
   margin-right: auto;
 }
 
@@ -142,7 +142,7 @@
 @media only screen and (max-width: 544px) {
   .explore-toolbar-header-title {
     .navbar-page-btn {
-      margin-left: $dashboard-padding;
+      margin-left: $space-md;
     }
   }
 }
@@ -156,7 +156,7 @@
 }
 
 .explore-container {
-  padding: $dashboard-padding;
+  padding: $space-md;
 }
 
 .explore-wrapper {
@@ -172,16 +172,14 @@
 }
 
 .explore-panel__body {
-  padding: $panel-padding;
+  padding: 0 $space-md $space-sm $space-md;
 }
 
 .explore-panel__header {
-  padding: $panel-padding;
+  padding: $space-sm $space-md 0 $space-md;
-  padding-top: 5px;
-  padding-bottom: 0;
   display: flex;
   cursor: pointer;
-  margin-bottom: 5px;
+  margin-bottom: $space-sm;
   transition: all 0.1s linear;
 }