From 7dc4853e911397154748c7b18094e7af26d3c248 Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Mon, 11 Mar 2019 08:51:32 +0100
Subject: [PATCH 1/3] added new variables for spacing, set margins in _cards
 with new variables

---
 .../src/themes/_variables.scss.tmpl.ts        |  6 +++-
 packages/grafana-ui/src/themes/default.ts     | 10 +++---
 packages/grafana-ui/src/types/theme.ts        |  2 ++
 public/sass/_variables.generated.scss         |  4 +++
 public/sass/components/_cards.scss            | 35 ++++++++-----------
 5 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 0ce4fac8182..065ffb685d6 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -17,7 +17,11 @@ $enable-hover-media-query: false !default;
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
 
-$spacer: ${theme.spacing.m} !default;
+$space-xs: ${theme.spacing.xs} !default;
+$space-s: ${theme.spacing.s} !default;
+$space-m: ${theme.spacing.m} !default;
+$space-xl: ${theme.spacing.xl} !default;
+$spacer: ${theme.spacing.d} !default;
 $spacer-x: $spacer !default;
 $spacer-y: $spacer !default;
 $spacers: (
diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts
index 60ebcfa7aa0..6559f6a8fe8 100644
--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -43,10 +43,12 @@ const theme: GrafanaThemeCommons = {
     xl: '1200px',
   },
   spacing: {
-    xs: '0',
-    s: '3px',
-    m: '14px',
-    l: '21px',
+    d: '14px',
+    xs: '4px',
+    s: '8px',
+    m: '16px',
+    l: '24px',
+    xl: '32px',
     gutter: '30px',
   },
   border: {
diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts
index 1226b841836..469408942d7 100644
--- a/packages/grafana-ui/src/types/theme.ts
+++ b/packages/grafana-ui/src/types/theme.ts
@@ -48,10 +48,12 @@ export interface GrafanaThemeCommons {
     };
   };
   spacing: {
+    d: string;
     xs: string;
     s: string;
     m: string;
     l: string;
+    xl: string;
     gutter: string;
   };
   border: {
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index 9a29f9beba9..64b19871b0a 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -20,6 +20,10 @@ $enable-hover-media-query: false !default;
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
 
+$space-xs: 4px !default;
+$space-s: 8px !default;
+$space-m: 16px !default;
+$space-xl: 32px !default;
 $spacer: 14px !default;
 $spacer-x: $spacer !default;
 $spacer-y: $spacer !default;
diff --git a/public/sass/components/_cards.scss b/public/sass/components/_cards.scss
index 80a4cd7c32a..ff694d607c8 100644
--- a/public/sass/components/_cards.scss
+++ b/public/sass/components/_cards.scss
@@ -1,7 +1,7 @@
 .layout-selector {
   @include clearfix();
 
-  margin-left: $spacer;
+  margin-left: $space-m;
   text-align: right;
 
   button {
@@ -9,7 +9,7 @@
     color: $text-color-weak;
     box-shadow: $card-shadow;
     border: none;
-    padding: 0.5rem;
+    padding: $space-s;
     line-height: 1;
     font-size: 130%;
     float: right;
@@ -35,7 +35,7 @@
 }
 
 .card-section {
-  margin-bottom: $spacer * 2;
+  margin-bottom: $space-xl;
 }
 
 .card-list {
@@ -50,7 +50,7 @@
   height: 100%;
   background: $card-background;
   box-shadow: $card-shadow;
-  padding: 1rem;
+  padding: $space-m;
   border-radius: 4px;
 
   &:hover {
@@ -58,7 +58,7 @@
   }
 
   .label-tag {
-    margin-left: 6px;
+    margin-left: $space-s;
     font-size: 11px;
     padding: 2px 6px;
   }
@@ -80,15 +80,8 @@
   overflow: hidden;
 }
 
-.card-item-cog {
-  font-size: 130%;
-  position: relative;
-  top: 1rem;
-  color: $text-muted;
-}
-
 .card-item-header {
-  margin-bottom: $spacer;
+  margin-bottom: $space-m;
 }
 
 .card-item-type {
@@ -110,7 +103,7 @@
 }
 
 .card-item-label {
-  margin-left: 8px;
+  margin-left: $space-s;
 }
 
 .card-item-sub-name {
@@ -123,7 +116,7 @@
 .card-item-sub-name--header {
   color: $text-color-weak;
   text-transform: uppercase;
-  margin-bottom: $spacer;
+  margin-bottom: $space-m;
   font-size: $font-size-sm;
   font-weight: bold;
 }
@@ -136,7 +129,7 @@
   .card-item-notice {
     font-size: $font-size-sm;
     display: inline-block;
-    margin-left: $spacer;
+    margin-left: $space-m;
   }
 
   .card-item-header-action {
@@ -145,7 +138,7 @@
 
   .card-item-wrapper {
     width: 100%;
-    padding: 0 1rem 1rem 0rem;
+    padding: 0 $space-m $space-m 0;
   }
 
   .card-item-wrapper--clickable {
@@ -153,7 +146,7 @@
   }
 
   .card-item-figure {
-    margin: 0 $spacer $spacer 0;
+    margin: 0 $space-m $space-m 0;
     height: 6rem;
 
     img {
@@ -195,7 +188,7 @@
   .card-item-wrapper {
     padding: 0;
     width: 100%;
-    margin-bottom: 3px;
+    margin-bottom: $space-xs;
   }
 
   .card-item-wrapper--clickable {
@@ -212,9 +205,9 @@
   }
 
   .card-item-figure {
-    margin: 0 $spacer 0 0;
+    margin: 0 $space-m 0 0;
     img {
-      width: 3.5rem;
+      width: 48px;
     }
   }
 

From d55f18974982f820b1f5c3fcbdc73fe3d5990c09 Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Mon, 11 Mar 2019 11:33:15 +0100
Subject: [PATCH 2/3] added new space variables to margins in AddPanelWidget,
 add_data_source, dashboard_settings and sidemenu

---
 .../grafana-ui/src/themes/_variables.scss.tmpl.ts    |  1 +
 .../components/AddPanelWidget/_AddPanelWidget.scss   | 12 ++++++------
 public/sass/_variables.generated.scss                |  1 +
 public/sass/components/_add_data_source.scss         |  6 +++---
 public/sass/components/_dashboard_settings.scss      | 10 +++++-----
 public/sass/components/_sidemenu.scss                |  8 ++++----
 6 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 065ffb685d6..531f06e1153 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -20,6 +20,7 @@ $enable-hover-media-query: false !default;
 $space-xs: ${theme.spacing.xs} !default;
 $space-s: ${theme.spacing.s} !default;
 $space-m: ${theme.spacing.m} !default;
+$space-l: ${theme.spacing.l} !default;
 $space-xl: ${theme.spacing.xl} !default;
 $spacer: ${theme.spacing.d} !default;
 $spacer-x: $spacer !default;
diff --git a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
index 8daf935d918..6d6bba7e1eb 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
+++ b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
@@ -20,7 +20,7 @@
 
   .gicon {
     font-size: 30px;
-    margin-right: $spacer;
+    margin-right: $space-m;
   }
 
   &:hover {
@@ -32,16 +32,16 @@
 .add-panel-widget__title {
   font-size: $font-size-md;
   font-weight: $font-weight-semi-bold;
-  margin-right: $spacer * 2;
+  margin-right: $space-xl;
 }
 
 .add-panel-widget__link {
-  margin: 0 8px;
+  margin: 0 $space-s;
   width: 154px;
 }
 
 .add-panel-widget__icon {
-  margin-bottom: 8px;
+  margin-bottom: $space-s;
 
   .gicon {
     color: white;
@@ -62,7 +62,7 @@
 
 .add-panel-widget__create {
   display: inherit;
-  margin-bottom: 24px;
+  margin-bottom: $space-l;
   // this is to have the big button appear centered
   margin-top: 55px;
 }
@@ -72,7 +72,7 @@
 }
 
 .add-panel-widget__action {
-  margin: 0 4px;
+  margin: 0 $space-xs;
 }
 
 .add-panel-widget__btn-container {
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index 64b19871b0a..ca563e6dd97 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -23,6 +23,7 @@ $enable-hover-media-query: false !default;
 $space-xs: 4px !default;
 $space-s: 8px !default;
 $space-m: 16px !default;
+$space-l: 24px !default;
 $space-xl: 32px !default;
 $spacer: 14px !default;
 $spacer-x: $spacer !default;
diff --git a/public/sass/components/_add_data_source.scss b/public/sass/components/_add_data_source.scss
index 508f7f80d8e..2df78b0ed9e 100644
--- a/public/sass/components/_add_data_source.scss
+++ b/public/sass/components/_add_data_source.scss
@@ -1,5 +1,5 @@
 .add-data-source-header {
-  margin-bottom: $spacer * 2;
+  margin-bottom: $space-xl;
   padding-top: $spacer;
   text-align: center;
 }
@@ -7,7 +7,7 @@
 .add-data-source-search {
   display: flex;
   justify-content: center;
-  margin-bottom: $panel-margin * 2;
+  margin-bottom: $space-l;
 }
 
 .add-data-source-grid {
@@ -41,6 +41,6 @@
 }
 
 .add-data-source-grid-item-logo {
-  margin: 0 15px;
+  margin: 0 $space-m;
   width: 55px;
 }
diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss
index de16f0c60b5..19c2f49d814 100644
--- a/public/sass/components/_dashboard_settings.scss
+++ b/public/sass/components/_dashboard_settings.scss
@@ -41,7 +41,7 @@
   font-size: $font-size-h3;
   padding-right: 60px;
   white-space: nowrap;
-  margin-bottom: $spacer;
+  margin-bottom: $space-m;
 
   i {
     font-size: 25px;
@@ -53,7 +53,7 @@
 
 .dashboard-settings__header {
   font-size: $font-size-h3;
-  margin-bottom: $spacer * 2;
+  margin-bottom: $space-xl;
 }
 
 .dashboard-settings__subheader {
@@ -89,13 +89,13 @@
   flex-direction: column;
   height: 100%;
   flex-grow: 1;
-  margin: $spacer * 3 $spacer * 2 0 0;
+  margin: 40px $space-xl 0 0;
 
   button {
-    margin-bottom: 10px;
+    margin-bottom: $space-s;
   }
 }
 
 .dashboard-settings__json-save-button {
-  margin-top: $spacer;
+  margin-top: $space-m;
 }
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index f30bdb5c79e..c5bcf0ee8dd 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -167,7 +167,7 @@
   font-size: $font-size-sm;
   color: $text-color-weak;
   border-bottom: 1px solid $dropdownDividerBottom;
-  margin-bottom: 0.25rem;
+  margin-bottom: $space-xs;
   white-space: nowrap;
 }
 
@@ -192,7 +192,7 @@ li.sidemenu-org-switcher {
   display: flex;
   align-items: center;
   > i.fa.fa-random {
-    margin-right: 4px;
+    margin-right: $space-xs;
     top: 1px;
   }
 }
@@ -285,8 +285,8 @@ li.sidemenu-org-switcher {
       position: unset;
       width: 100%;
       float: none;
-      margin-top: 0.5rem;
-      margin-bottom: 0.5rem;
+      margin-top: $space-s;
+      margin-bottom: $space-s;
 
       > li > a {
         padding-left: 15px;

From a418697453ae33c655d684db4eab3df063d7c986 Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Tue, 12 Mar 2019 08:10:31 +0100
Subject: [PATCH 3/3] s -> sm, m -> md, l -> lg

---
 .../src/themes/_variables.scss.tmpl.ts        |  6 ++---
 .../AddPanelWidget/_AddPanelWidget.scss       |  8 +++----
 public/sass/_variables.generated.scss         |  6 ++---
 public/sass/components/_add_data_source.scss  |  4 ++--
 public/sass/components/_cards.scss            | 22 +++++++++----------
 .../sass/components/_dashboard_settings.scss  |  6 ++---
 public/sass/components/_sidemenu.scss         |  4 ++--
 7 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 531f06e1153..bf6a5fb9c79 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -18,9 +18,9 @@ $enable-hover-media-query: false !default;
 // variables. Mostly focused on spacing.
 
 $space-xs: ${theme.spacing.xs} !default;
-$space-s: ${theme.spacing.s} !default;
-$space-m: ${theme.spacing.m} !default;
-$space-l: ${theme.spacing.l} !default;
+$space-sm: ${theme.spacing.s} !default;
+$space-md: ${theme.spacing.m} !default;
+$space-lg: ${theme.spacing.l} !default;
 $space-xl: ${theme.spacing.xl} !default;
 $spacer: ${theme.spacing.d} !default;
 $spacer-x: $spacer !default;
diff --git a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
index 6d6bba7e1eb..941e36c5e33 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
+++ b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
@@ -20,7 +20,7 @@
 
   .gicon {
     font-size: 30px;
-    margin-right: $space-m;
+    margin-right: $space-md;
   }
 
   &:hover {
@@ -36,12 +36,12 @@
 }
 
 .add-panel-widget__link {
-  margin: 0 $space-s;
+  margin: 0 $space-sm;
   width: 154px;
 }
 
 .add-panel-widget__icon {
-  margin-bottom: $space-s;
+  margin-bottom: $space-sm;
 
   .gicon {
     color: white;
@@ -62,7 +62,7 @@
 
 .add-panel-widget__create {
   display: inherit;
-  margin-bottom: $space-l;
+  margin-bottom: $space-lg;
   // this is to have the big button appear centered
   margin-top: 55px;
 }
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index ca563e6dd97..b43345127e6 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -21,9 +21,9 @@ $enable-hover-media-query: false !default;
 // variables. Mostly focused on spacing.
 
 $space-xs: 4px !default;
-$space-s: 8px !default;
-$space-m: 16px !default;
-$space-l: 24px !default;
+$space-sm: 8px !default;
+$space-md: 16px !default;
+$space-lg: 24px !default;
 $space-xl: 32px !default;
 $spacer: 14px !default;
 $spacer-x: $spacer !default;
diff --git a/public/sass/components/_add_data_source.scss b/public/sass/components/_add_data_source.scss
index 2df78b0ed9e..4046be2a723 100644
--- a/public/sass/components/_add_data_source.scss
+++ b/public/sass/components/_add_data_source.scss
@@ -7,7 +7,7 @@
 .add-data-source-search {
   display: flex;
   justify-content: center;
-  margin-bottom: $space-l;
+  margin-bottom: $space-lg;
 }
 
 .add-data-source-grid {
@@ -41,6 +41,6 @@
 }
 
 .add-data-source-grid-item-logo {
-  margin: 0 $space-m;
+  margin: 0 $space-md;
   width: 55px;
 }
diff --git a/public/sass/components/_cards.scss b/public/sass/components/_cards.scss
index ff694d607c8..58d4b1ab5d2 100644
--- a/public/sass/components/_cards.scss
+++ b/public/sass/components/_cards.scss
@@ -1,7 +1,7 @@
 .layout-selector {
   @include clearfix();
 
-  margin-left: $space-m;
+  margin-left: $space-md;
   text-align: right;
 
   button {
@@ -9,7 +9,7 @@
     color: $text-color-weak;
     box-shadow: $card-shadow;
     border: none;
-    padding: $space-s;
+    padding: $space-sm;
     line-height: 1;
     font-size: 130%;
     float: right;
@@ -50,7 +50,7 @@
   height: 100%;
   background: $card-background;
   box-shadow: $card-shadow;
-  padding: $space-m;
+  padding: $space-md;
   border-radius: 4px;
 
   &:hover {
@@ -58,7 +58,7 @@
   }
 
   .label-tag {
-    margin-left: $space-s;
+    margin-left: $space-sm;
     font-size: 11px;
     padding: 2px 6px;
   }
@@ -81,7 +81,7 @@
 }
 
 .card-item-header {
-  margin-bottom: $space-m;
+  margin-bottom: $space-md;
 }
 
 .card-item-type {
@@ -103,7 +103,7 @@
 }
 
 .card-item-label {
-  margin-left: $space-s;
+  margin-left: $space-sm;
 }
 
 .card-item-sub-name {
@@ -116,7 +116,7 @@
 .card-item-sub-name--header {
   color: $text-color-weak;
   text-transform: uppercase;
-  margin-bottom: $space-m;
+  margin-bottom: $space-md;
   font-size: $font-size-sm;
   font-weight: bold;
 }
@@ -129,7 +129,7 @@
   .card-item-notice {
     font-size: $font-size-sm;
     display: inline-block;
-    margin-left: $space-m;
+    margin-left: $space-md;
   }
 
   .card-item-header-action {
@@ -138,7 +138,7 @@
 
   .card-item-wrapper {
     width: 100%;
-    padding: 0 $space-m $space-m 0;
+    padding: 0 $space-md $space-md 0;
   }
 
   .card-item-wrapper--clickable {
@@ -146,7 +146,7 @@
   }
 
   .card-item-figure {
-    margin: 0 $space-m $space-m 0;
+    margin: 0 $space-md $space-md 0;
     height: 6rem;
 
     img {
@@ -205,7 +205,7 @@
   }
 
   .card-item-figure {
-    margin: 0 $space-m 0 0;
+    margin: 0 $space-md 0 0;
     img {
       width: 48px;
     }
diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss
index 19c2f49d814..173ab1a3935 100644
--- a/public/sass/components/_dashboard_settings.scss
+++ b/public/sass/components/_dashboard_settings.scss
@@ -41,7 +41,7 @@
   font-size: $font-size-h3;
   padding-right: 60px;
   white-space: nowrap;
-  margin-bottom: $space-m;
+  margin-bottom: $space-md;
 
   i {
     font-size: 25px;
@@ -92,10 +92,10 @@
   margin: 40px $space-xl 0 0;
 
   button {
-    margin-bottom: $space-s;
+    margin-bottom: $space-sm;
   }
 }
 
 .dashboard-settings__json-save-button {
-  margin-top: $space-m;
+  margin-top: $space-md;
 }
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index c5bcf0ee8dd..c48a34651c0 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -285,8 +285,8 @@ li.sidemenu-org-switcher {
       position: unset;
       width: 100%;
       float: none;
-      margin-top: $space-s;
-      margin-bottom: $space-s;
+      margin-top: $space-sm;
+      margin-bottom: $space-sm;
 
       > li > a {
         padding-left: 15px;