#2280 Add table colors

src/definitions/collections/table.less

@@ -568,73 +568,111 @@
        Colors
 --------------------*/
 
-.ui.black.table {
-  border-top: @coloredBorderSize solid @black;
-}
-.ui.blue.table {
-  border-top: @coloredBorderSize solid @blue;
+/* Red */
+.ui.red.table {
+  border-top: @coloredBorderSize solid @red;
 }
-.ui.green.table {
-  border-top: @coloredBorderSize solid @green;
+.ui.inverted.red.table {
+  background-color: @red !important;
+  color: @white !important;
 }
+
+/* Orange */
 .ui.orange.table {
   border-top: @coloredBorderSize solid @orange;
 }
-.ui.pink.table {
-  border-top: @coloredBorderSize solid @pink;
+.ui.inverted.orange.table {
+  background-color: @orange !important;
+  color: @white !important;
 }
-.ui.purple.table {
-  border-top: @coloredBorderSize solid @purple;
+
+/* Yellow */
+.ui.yellow.table {
+  border-top: @coloredBorderSize solid @yellow;
 }
-.ui.red.table {
-  border-top: @coloredBorderSize solid @red;
+.ui.inverted.yellow.table {
+  background-color: @yellow !important;
+  color: @white !important;
+}
+
+/* Green */
+.ui.green.table {
+  border-top: @coloredBorderSize solid @green;
 }
+.ui.inverted.green.table {
+  background-color: @green !important;
+  color: @white !important;
+}
+
+/* Teal */
 .ui.teal.table {
   border-top: @coloredBorderSize solid @teal;
 }
-.ui.yellow.table {
-  border-top: @coloredBorderSize solid @yellow;
+.ui.inverted.teal.table {
+  background-color: @teal !important;
+  color: @white !important;
 }
 
-/*-------------------
-   Inverted Colors
---------------------*/
-
-.ui.inverted.table,
-.ui.inverted.black.table {
-  background-color: @black !important;
-  color: @white !important;
+/* Blue */
+.ui.blue.table {
+  border-top: @coloredBorderSize solid @blue;
 }
 .ui.inverted.blue.table {
   background-color: @blue !important;
   color: @white !important;
 }
-.ui.inverted.green.table {
-  background-color: @green !important;
+
+/* Violet */
+.ui.violet.table {
+  border-top: @coloredBorderSize solid @violet;
+}
+.ui.inverted.violet.table {
+  background-color: @violet !important;
   color: @white !important;
 }
-.ui.inverted.orange.table {
-  background-color: @orange !important;
+
+/* Purple */
+.ui.purple.table {
+  border-top: @coloredBorderSize solid @purple;
+}
+.ui.inverted.purple.table {
+  background-color: @purple !important;
   color: @white !important;
 }
+
+/* Pink */
+.ui.pink.table {
+  border-top: @coloredBorderSize solid @pink;
+}
 .ui.inverted.pink.table {
   background-color: @pink !important;
   color: @white !important;
 }
-.ui.inverted.purple.table {
-  background-color: @purple !important;
-  color: @white !important;
+
+/* Brown */
+.ui.brown.table {
+  border-top: @coloredBorderSize solid @brown;
 }
-.ui.inverted.red.table {
-  background-color: @red !important;
+.ui.inverted.brown.table {
+  background-color: @brown !important;
   color: @white !important;
 }
-.ui.inverted.teal.table {
-  background-color: @teal !important;
+
+/* Grey */
+.ui.grey.table {
+  border-top: @coloredBorderSize solid @grey;
+}
+.ui.inverted.grey.table {
+  background-color: @grey !important;
   color: @white !important;
 }
-.ui.inverted.yellow.table {
-  background-color: @yellow !important;
+
+/* Black */
+.ui.black.table {
+  border-top: @coloredBorderSize solid @black;
+}
+.ui.inverted.black.table {
+  background-color: @black !important;
   color: @white !important;
 }