Merge pull request #16099 from grafana/dashboard-variables-and-some-more

Removed dashboard variables + minor things

packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap

@@ -195,7 +195,7 @@ exports[`Render should render with base threshold 1`] = `
                             "typography": Object {
                               "fontFamily": Object {
                                 "monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace",
-                                "sansSerif": "'Roboto', Helvetica, Arial, sans-serif",
+                                "sansSerif": "'Roboto', 'Helvetica Neue', Arial, sans-serif",
                               },
                               "heading": Object {
                                 "h1": "28px",
@@ -211,6 +211,10 @@ exports[`Render should render with base threshold 1`] = `
                                 "sm": 1.1,
                                 "xs": 1,
                               },
+                              "link": Object {
+                                "decoration": "none",
+                                "hoverDecoration": "none",
+                              },
                               "size": Object {
                                 "base": "13px",
                                 "lg": "18px",
@@ -225,6 +229,15 @@ exports[`Render should render with base threshold 1`] = `
                                 "semibold": 500,
                               },
                             },
+                            "zIndex": Object {
+                              "dropdown": "1000",
+                              "modal": "1050",
+                              "modalBackdrop": "1040",
+                              "navbarFixed": "1020",
+                              "sidemenu": "1025",
+                              "tooltip": "1030",
+                              "typeahead": "1060",
+                            },
                           }
                         }
                       >
@@ -339,7 +352,7 @@ exports[`Render should render with base threshold 1`] = `
                                   "typography": Object {
                                     "fontFamily": Object {
                                       "monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace",
-                                      "sansSerif": "'Roboto', Helvetica, Arial, sans-serif",
+                                      "sansSerif": "'Roboto', 'Helvetica Neue', Arial, sans-serif",
                                     },
                                     "heading": Object {
                                       "h1": "28px",
@@ -355,6 +368,10 @@ exports[`Render should render with base threshold 1`] = `
                                       "sm": 1.1,
                                       "xs": 1,
                                     },
+                                    "link": Object {
+                                      "decoration": "none",
+                                      "hoverDecoration": "none",
+                                    },
                                     "size": Object {
                                       "base": "13px",
                                       "lg": "18px",
@@ -369,6 +386,15 @@ exports[`Render should render with base threshold 1`] = `
                                       "semibold": 500,
                                     },
                                   },
+                                  "zIndex": Object {
+                                    "dropdown": "1000",
+                                    "modal": "1050",
+                                    "modalBackdrop": "1040",
+                                    "navbarFixed": "1020",
+                                    "sidemenu": "1025",
+                                    "tooltip": "1030",
+                                    "typeahead": "1060",
+                                  },
                                 }
                               }
                             />

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-hover-decoration: none !default;
+$link-decoration: ${theme.typography.link.decoration} !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-navbar-fixed: 1020;
-$zindex-sidemenu: 1025;
-$zindex-tooltip: 1030;
-$zindex-modal-backdrop: 1040;
-$zindex-modal: 1050;
-$zindex-typeahead: 1060;
+$zindex-dropdown: ${theme.zIndex.dropdown};
+$zindex-navbar-fixed: ${theme.zIndex.navbarFixed};
+$zindex-sidemenu: ${theme.zIndex.sidemenu};
+$zindex-tooltip: ${theme.zIndex.tooltip};
+$zindex-modal-backdrop: ${theme.zIndex.modalBackdrop};
+$zindex-modal: ${theme.zIndex.modal};
+$zindex-typeahead: ${theme.zIndex.typeahead};
 
 // Buttons
 //
@@ -197,10 +196,8 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
 $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;
+$dashboard-padding: $space-md;
+$panel-padding: 0 $space-md $space-sm $space-md;
 
 // 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
@@ -200,10 +199,8 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
 $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;
+$dashboard-padding: $space-md;
+$panel-padding: 0 $space-md $space-sm $space-md;
 
 // 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

@@ -83,10 +83,6 @@
     padding: 0 $dashboard-padding $space-sm $dashboard-padding;
   }
 
-  .panel-editor-container__panel {
-    margin: 0 $dashboard-padding;
-  }
-
   .search-container {
     left: 0 !important;
   }

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-top: 10px;
+  padding: $space-sm $space-md $space-sm $space-md;
   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

@@ -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

@@ -176,12 +176,10 @@
 }
 
 .explore-panel__header {
-  padding: $panel-padding;
-  padding-top: 5px;
-  padding-bottom: 0;
+  padding: $space-sm $space-md 0 $space-md;
   display: flex;
   cursor: pointer;
-  margin-bottom: 5px;
+  margin-bottom: $space-sm;
   transition: all 0.1s linear;
 }