#2280 Add icon color variations, fix bordered icon line height

src/definitions/elements/icon.less

@@ -126,12 +126,11 @@ i.link.icon:hover {
 
 i.circular.icon {
   border-radius: 500em !important;
+  line-height: 1 !important;
 
   padding: @circularPadding !important;
-
   box-shadow: @circularShadow;
 
-  line-height: 1 !important;
   width: @circularSize !important;
   height: @circularSize !important;
 }
@@ -172,13 +171,13 @@ i.counterclockwise.rotated.icon {
 --------------------*/
 
 i.bordered.icon {
+  line-height: 1;
+  vertical-align: baseline;
+
   width: @borderedSize;
   height: @borderedSize;
-
   padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
   box-shadow: @borderedShadow;
-
-  vertical-align: baseline;
 }
 i.bordered.inverted.icon {
   border: none;
@@ -186,128 +185,167 @@ i.bordered.inverted.icon {
 }
 
 /*-------------------
-       Colors
+      Inverted
 --------------------*/
 
-i.white.icon {
+/* Inverted Shapes */
+i.inverted.bordered.icon,
+i.inverted.circular.icon {
+  background-color: @black !important;
   color: @white !important;
 }
-i.black.icon {
-  color: @black !important;
+
+i.inverted.icon {
+  color: @white;
 }
-i.blue.icon {
-  color: @blue !important;
+
+
+/*-------------------
+       Colors
+--------------------*/
+
+/* Red */
+i.red.icon {
+  color: @red !important;
 }
-i.green.icon {
-  color: @green !important;
+i.inverted.red.icon {
+  color: @lightRed !important;
 }
+i.inverted.bordered.red.icon,
+i.inverted.circular.red.icon {
+  background-color: @red !important;
+  color: @white !important;
+}
+
+/* Orange */
 i.orange.icon {
   color: @orange !important;
 }
-i.pink.icon {
-  color: @pink !important;
-}
-i.purple.icon {
-  color: @purple !important;
-}
-i.red.icon {
-  color: @red !important;
+i.inverted.orange.icon {
+  color: @lightOrange !important;
 }
-i.teal.icon {
-  color: @teal !important;
+i.inverted.bordered.orange.icon,
+i.inverted.circular.orange.icon {
+  background-color: @orange !important;
+  color: @white !important;
 }
+
+/* Yellow */
 i.yellow.icon {
   color: @yellow !important;
 }
-
-
-/*-------------------
-      Inverted
---------------------*/
-
-i.inverted.icon {
-  color: @white;
+i.inverted.yellow.icon {
+  color: @lightYellow !important;
 }
-i.inverted.black.icon {
-  color: @lightBlack !important;
+i.inverted.bordered.yellow.icon,
+i.inverted.circular.yellow.icon {
+  background-color: @yellow !important;
+  color: @white !important;
 }
-i.inverted.blue.icon {
-  color: @lightBlue !important;
+
+/* Green */
+i.green.icon {
+  color: @green !important;
 }
 i.inverted.green.icon {
   color: @lightGreen !important;
 }
-i.inverted.orange.icon {
-  color: @lightOrange !important;
-}
-i.inverted.pink.icon {
-  color: @lightPink !important;
-}
-i.inverted.purple.icon {
-  color: @lightPurple !important;
+i.inverted.bordered.green.icon,
+i.inverted.circular.green.icon {
+  background-color: @green !important;
+  color: @white !important;
 }
-i.inverted.red.icon {
-  color: @lightRed !important;
+
+/* Teal */
+i.teal.icon {
+  color: @teal !important;
 }
 i.inverted.teal.icon {
   color: @lightTeal !important;
 }
-i.inverted.yellow.icon {
-  color: @lightYellow !important;
+i.inverted.bordered.teal.icon,
+i.inverted.circular.teal.icon {
+  background-color: @teal !important;
+  color: @white !important;
 }
 
-/* Inverted Shapes */
-i.inverted.bordered.icon,
-i.inverted.circular.icon {
-  background-color: #222222 !important;
-  color: #FFFFFF !important;
+/* Blue */
+i.blue.icon {
+  color: @blue !important;
 }
-i.inverted.bordered.black.icon,
-i.inverted.circular.black.icon {
-  background-color: @black !important;
-  color: #FFFFFF !important;
+i.inverted.blue.icon {
+  color: @lightBlue !important;
 }
 i.inverted.bordered.blue.icon,
 i.inverted.circular.blue.icon {
   background-color: @blue !important;
-  color: #FFFFFF !important;
+  color: @white !important;
 }
-i.inverted.bordered.green.icon,
-i.inverted.circular.green.icon {
-  background-color: @green !important;
-  color: #FFFFFF !important;
+
+/* Violet */
+i.violet.icon {
+  color: @violet !important;
 }
-i.inverted.bordered.orange.icon,
-i.inverted.circular.orange.icon {
-  background-color: @orange !important;
-  color: #FFFFFF !important;
+i.inverted.violet.icon {
+  color: @lightViolet !important;
 }
-i.inverted.bordered.pink.icon,
-i.inverted.circular.pink.icon {
-  background-color: @pink !important;
-  color: #FFFFFF !important;
+i.inverted.bordered.violet.icon,
+i.inverted.circular.violet.icon {
+  background-color: @violet !important;
+  color: @white !important;
+}
+
+/* Purple */
+i.purple.icon {
+  color: @purple !important;
+}
+i.inverted.purple.icon {
+  color: @lightPurple !important;
 }
 i.inverted.bordered.purple.icon,
 i.inverted.circular.purple.icon {
   background-color: @purple !important;
-  color: #FFFFFF !important;
+  color: @white !important;
 }
-i.inverted.bordered.red.icon,
-i.inverted.circular.red.icon {
-  background-color: @red !important;
-  color: #FFFFFF !important;
+
+/* Pink */
+i.pink.icon {
+  color: @pink !important;
 }
-i.inverted.bordered.teal.icon,
-i.inverted.circular.teal.icon {
-  background-color: @teal !important;
-  color: #FFFFFF !important;
+i.inverted.pink.icon {
+  color: @lightPink !important;
 }
-i.inverted.bordered.yellow.icon,
-i.inverted.circular.yellow.icon {
-  background-color: @yellow !important;
-  color: #FFFFFF !important;
+i.inverted.bordered.pink.icon,
+i.inverted.circular.pink.icon {
+  background-color: @pink !important;
+  color: @white !important;
 }
 
+/* Brown */
+i.brown.icon {
+  color: @brown !important;
+}
+i.inverted.brown.icon {
+  color: @lightBrown !important;
+}
+i.inverted.bordered.brown.icon,
+i.inverted.circular.brown.icon {
+  background-color: @brown !important;
+  color: @white !important;
+}
+
+/* Grey */
+i.grey.icon {
+  color: @grey !important;
+}
+i.inverted.grey.icon {
+  color: @lightGrey !important;
+}
+i.inverted.bordered.grey.icon,
+i.inverted.circular.grey.icon {
+  background-color: @grey !important;
+  color: @white !important;
+}
 
 /*-------------------
         Sizes