Add colored row/column variations

src/definitions/collections/grid.less

@@ -91,8 +91,8 @@
 --------------------*/
 
 .ui.grid > .row {
-  display: inline-block;
-  width: 100% !important;
+  display: block;
+  width: auto !important;
   padding: 0rem;
   font-size: 0rem;
   padding-top: (@rowSpacing / 2);
@@ -105,8 +105,8 @@
 
 /* Vertical padding when no rows */
 .ui.grid > .column:not(.row) {
-  margin-top: (@rowSpacing / 2);
-  margin-bottom: (@rowSpacing / 2);
+  padding-top: (@rowSpacing / 2);
+  padding-bottom: (@rowSpacing / 2);
 }
 .ui.grid > .row > .column {
   margin-top: 0em;
@@ -636,6 +636,133 @@
   hyphens: auto;
 }
 
+/*----------------------
+         Colored
+-----------------------*/
+
+.ui.grid > .white.row,
+.ui.grid .white.column {
+  background-color: @white !important;
+  color: @textColor;
+}
+.ui.grid > .row > .white.column {
+  margin-top: -(@rowSpacing / 2);
+  margin-bottom: -(@rowSpacing / 2);
+  padding-top: (@rowSpacing / 2);
+  padding-bottom: (@rowSpacing / 2);
+}
+
+.ui.grid > .black.row,
+.ui.grid .black.column {
+  background-color: @black !important;
+  color: @white;
+}
+.ui.grid > .row > .black.column {
+  margin-top: -(@rowSpacing / 2);
+  margin-bottom: -(@rowSpacing / 2);
+  padding-top: (@rowSpacing / 2);
+  padding-bottom: (@rowSpacing / 2);
+}
+
+.ui.grid > .blue.row,
+.ui.grid .blue.column {
+  background-color: @blue !important;
+  color: @white;
+}
+.ui.grid > .row > .blue.column {
+  margin-top: -(@rowSpacing / 2);
+  margin-bottom: -(@rowSpacing / 2);
+  padding-top: (@rowSpacing / 2);
+  padding-bottom: (@rowSpacing / 2);
+}
+
+.ui.grid > .green.row,
+.ui.grid .green.column {
+  background-color: @green !important;
+  color: @white;
+}
+.ui.grid > .row > .green.column {
+  margin-top: -(@rowSpacing / 2);
+  margin-bottom: -(@rowSpacing / 2);
+  padding-top: (@rowSpacing / 2);
+  padding-bottom: (@rowSpacing / 2);
+}
+
+.ui.grid > .orange.row,
+.ui.grid .orange.column {
+  background-color: @orange !important;
+  color: @white;
+}
+.ui.grid > .row > .orange.column {
+  margin-top: -(@rowSpacing / 2);
+  margin-bottom: -(@rowSpacing / 2);
+  padding-top: (@rowSpacing / 2);
+  padding-bottom: (@rowSpacing / 2);
+}
+
+.ui.grid > .pink.row,
+.ui.grid .pink.column {
+  background-color: @pink !important;
+  color: @white;
+}
+.ui.grid > .row > .pink.column {
+  margin-top: -(@rowSpacing / 2);
+  margin-bottom: -(@rowSpacing / 2);
+  padding-top: (@rowSpacing / 2);
+  padding-bottom: (@rowSpacing / 2);
+}
+
+.ui.grid > .purple.row,
+.ui.grid .purple.column {
+  background-color: @purple !important;
+  color: @white;
+}
+.ui.grid > .row > .purple.column {
+  margin-top: -(@rowSpacing / 2);
+  margin-bottom: -(@rowSpacing / 2);
+  padding-top: (@rowSpacing / 2);
+  padding-bottom: (@rowSpacing / 2);
+}
+
+.ui.grid > .red.row,
+.ui.grid .red.column {
+  background-color: @red !important;
+  color: @white;
+}
+.ui.grid > .row > .red.column {
+  margin-top: -(@rowSpacing / 2);
+  margin-bottom: -(@rowSpacing / 2);
+  padding-top: (@rowSpacing / 2);
+  padding-bottom: (@rowSpacing / 2);
+}
+
+.ui.grid > .teal.row,
+.ui.grid .teal.column {
+  background-color: @teal !important;
+  color: @white;
+}
+.ui.grid > .row > .teal.column {
+  margin-top: -(@rowSpacing / 2);
+  margin-bottom: -(@rowSpacing / 2);
+  padding-top: (@rowSpacing / 2);
+  padding-bottom: (@rowSpacing / 2);
+}
+
+.ui.grid > .yellow.row,
+.ui.grid .yellow.column {
+  background-color: @yellow !important;
+  color: @white;
+}
+.ui.grid > .row > .yellow.column {
+  margin-top: -(@rowSpacing / 2);
+  margin-bottom: -(@rowSpacing / 2);
+  padding-top: (@rowSpacing / 2);
+  padding-bottom: (@rowSpacing / 2);
+}
+
+
+
+
 /*----------------------
   Vertically Centered
 -----------------------*/

src/definitions/elements/header.less

@@ -248,7 +248,7 @@ a.ui.teal.header:hover {
 }
 
 .ui.yellow.header {
-  color: @yellow !important;
+  color: @yellowHeaderColor !important;
 }
 a.ui.yellow.header:hover {
   color: @yellowHover !important;