#2280 Order message colors and add missing colors

src/definitions/collections/message.less

@@ -349,13 +349,30 @@
   color: @invertedTextColor;
 }
 
-.ui.blue.message {
-  background-color: @blueBackground;
-  color: @blueTextColor;
+.ui.red.message {
+  background-color: @redBackground;
+  color: @redTextColor;
 }
-.ui.blue.message .header {
-  color: @blueHeaderColor;
+.ui.red.message .header {
+  color: @redHeaderColor;
 }
+
+.ui.orange.message {
+  background-color: @orangeBackground;
+  color: @orangeTextColor;
+}
+.ui.orange.message .header {
+  color: @orangeHeaderColor;
+}
+
+.ui.yellow.message {
+  background-color: @yellowBackground;
+  color: @yellowTextColor;
+}
+.ui.yellow.message .header {
+  color: @yellowHeaderColor;
+}
+
 .ui.green.message {
   background-color: @greenBackground;
   color: @greenTextColor;
@@ -363,20 +380,31 @@
 .ui.green.message .header {
   color: @greenHeaderColor;
 }
-.ui.orange.message {
-  background-color: @orangeBackground;
-  color: @orangeTextColor;
+
+.ui.teal.message {
+  background-color: @tealBackground;
+  color: @tealTextColor;
 }
-.ui.orange.message .header {
-  color: @orangeHeaderColor;
+.ui.teal.message .header {
+  color: @tealHeaderColor;
 }
-.ui.pink.message {
-  background-color: @pinkBackground;
-  color: @pinkTextColor;
+
+.ui.blue.message {
+  background-color: @blueBackground;
+  color: @blueTextColor;
 }
-.ui.pink.message .header {
-  color: @pinkHeaderColor;
+.ui.blue.message .header {
+  color: @blueHeaderColor;
 }
+
+.ui.violet.message {
+  background-color: @violetBackground;
+  color: @violetTextColor;
+}
+.ui.violet.message .header {
+  color: @violetHeaderColor;
+}
+
 .ui.purple.message {
   background-color: @purpleBackground;
   color: @purpleTextColor;
@@ -384,29 +412,23 @@
 .ui.purple.message .header {
   color: @purpleHeaderColor;
 }
-.ui.red.message {
-  background-color: @redBackground;
-  color: @redTextColor;
-}
-.ui.red.message .header {
-  color: @redHeaderColor;
-}
-.ui.teal.message {
-  background-color: @tealBackground;
-  color: @tealTextColor;
+
+.ui.pink.message {
+  background-color: @pinkBackground;
+  color: @pinkTextColor;
 }
-.ui.teal.message .header {
-  color: @tealHeaderColor;
+.ui.pink.message .header {
+  color: @pinkHeaderColor;
 }
-.ui.yellow.message {
-  background-color: @yellowBackground;
-  color: @yellowTextColor;
+
+.ui.brown.message {
+  background-color: @brownBackground;
+  color: @brownTextColor;
 }
-.ui.yellow.message .header {
-  color: @yellowHeaderColor;
+.ui.brown.message .header {
+  color: @brownHeaderColor;
 }
 
-
 /*--------------
      Sizes
 ---------------*/