From 07d119b7c546be40a53f146727924ae8ae05422a Mon Sep 17 00:00:00 2001
From: Pierrick Prudhomme <pierrick.prudhomme@environnement-recycling.com>
Date: Fri, 24 Aug 2018 11:17:19 +0200
Subject: [PATCH 1/2] Remove weird colored css rules (seem to be useless)

---
 src/definitions/collections/grid.less | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less
index ba1b53572e..b3683b72e2 100755
--- a/src/definitions/collections/grid.less
+++ b/src/definitions/collections/grid.less
@@ -1278,25 +1278,6 @@
          Colored
 -----------------------*/
 
-.ui.grid > .row > .red.column,
-.ui.grid > .row > .orange.column,
-.ui.grid > .row > .yellow.column,
-.ui.grid > .row > .olive.column,
-.ui.grid > .row > .green.column,
-.ui.grid > .row > .teal.column,
-.ui.grid > .row > .blue.column,
-.ui.grid > .row > .violet.column,
-.ui.grid > .row > .purple.column,
-.ui.grid > .row > .pink.column,
-.ui.grid > .row > .brown.column,
-.ui.grid > .row > .grey.column,
-.ui.grid > .row > .black.column {
-  margin-top: -(@rowSpacing / 2);
-  margin-bottom: -(@rowSpacing / 2);
-  padding-top: (@rowSpacing / 2);
-  padding-bottom: (@rowSpacing / 2);
-}
-
 /* Red */
 .ui.grid > .red.row,
 .ui.grid > .red.column,

From 0ad68fd3f4225e92ae970bbb7b3d0c7644f7d109 Mon Sep 17 00:00:00 2001
From: Pierrick Prudhomme <pierrick.prudhomme@environnement-recycling.com>
Date: Fri, 24 Aug 2018 11:19:44 +0200
Subject: [PATCH 2/2] [Grid] Add `compact` and `very compact` variations

---
 src/definitions/collections/grid.less         | 74 +++++++++++++++++++
 src/themes/default/collections/grid.variables | 16 ++++
 2 files changed, 90 insertions(+)

diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less
index b3683b72e2..07cf3e130b 100755
--- a/src/definitions/collections/grid.less
+++ b/src/definitions/collections/grid.less
@@ -1897,5 +1897,79 @@
   }
 }
 
+/*-----------------
+      Compact
+-----------------*/
+
+.ui.compact.grid > .column:not(.row),
+.ui.compact.grid > .row > .column {
+  padding-left: (@compactGutterWidth / 2);
+  padding-right: (@compactGutterWidth / 2);
+}
+
+.ui.compact.grid > * {
+  padding-left: (@compactGutterWidth / 2);
+  padding-right: (@compactGutterWidth / 2);
+}
+
+/* Row */
+.ui.compact.grid > .row {
+  padding-top: (@compactRowSpacing / 2);
+  padding-bottom: (@compactRowSpacing / 2);
+}
+
+/* Columns */
+.ui.compact.grid > .column:not(.row) {
+  padding-top: (@compactRowSpacing / 2);
+  padding-bottom: (@compactRowSpacing / 2);
+}
+
+/* Relaxed + Celled */
+.ui.compact.relaxed.celled.grid > .column:not(.row),
+.ui.compact.relaxed.celled.grid > .row > .column {
+  padding: @compactCelledRelaxedPadding;
+}
+.ui.compact[class*="very relaxed"].celled.grid > .column:not(.row),
+.ui.compact[class*="very relaxed"].celled.grid > .row > .column {
+  padding: @compactCelledVeryRelaxedPadding;
+}
+
+/*-----------------
+    Very compact
+-----------------*/
+
+.ui[class*="very compact"].grid > .column:not(.row),
+.ui[class*="very compact"].grid > .row > .column {
+  padding-left: (@veryCompactGutterWidth / 2);
+  padding-right: (@compactGutterWidth / 2);
+}
+
+.ui[class*="very compact"].grid > * {
+  padding-left: (@veryCompactGutterWidth / 2);
+  padding-right: (@veryCompactGutterWidth / 2);
+}
+
+/* Row */
+.ui[class*="very compact"].grid > .row {
+  padding-top: (@veryCompactRowSpacing / 2);
+  padding-bottom: (@veryCompactRowSpacing / 2);
+}
+
+/* Columns */
+.ui[class*="very compact"].grid > .column:not(.row) {
+  padding-top: (@veryCompactRowSpacing / 2);
+  padding-bottom: (@veryCompactRowSpacing / 2);
+}
+
+/* Relaxed + Celled */
+.ui[class*="very compact"].relaxed.celled.grid > .column:not(.row),
+.ui[class*="very compact"].relaxed.celled.grid > .row > .column {
+  padding: @veryCompactCelledRelaxedPadding;
+}
+.ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row),
+.ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column {
+  padding: @veryCompactCelledVeryRelaxedPadding;
+}
+
 
 .loadUIOverrides();
diff --git a/src/themes/default/collections/grid.variables b/src/themes/default/collections/grid.variables
index cdf5956cc9..1a542b779d 100644
--- a/src/themes/default/collections/grid.variables
+++ b/src/themes/default/collections/grid.variables
@@ -71,6 +71,22 @@
 @stackableMobileBorder: 1px solid @borderColor;
 @stackableInvertedMobileBorder: 1px solid @whiteBorderColor;
 
+/*--------------
+    Compact
+---------------*/
+@compactGutterWidth: @gutterWidth / 2;
+@compactRowSpacing: @rowSpacing / 2;
+@compactCelledRelaxedPadding: @celledRelaxedPadding / 2;
+@compactCelledVeryRelaxedPadding: @celledVeryRelaxedPadding / 2;
+
+/*------------------
+    Very Compact
+------------------*/
+@veryCompactGutterWidth: @compactGutterWidth / 2;
+@veryCompactRowSpacing: @compactRowSpacing / 2;
+@veryCompactCelledRelaxedPadding: @compactCelledRelaxedPadding / 2;
+@veryCompactCelledVeryRelaxedPadding: @compactCelledVeryRelaxedPadding / 2;
+
 
 /*******************************
              Legacy