#2280 Fix segment colors

src/definitions/elements/segment.less

@@ -352,110 +352,111 @@
        Colors
 --------------------*/
 
-.ui.black.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @black;
-}
-.ui.blue.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @blue;
+/* Red */
+.ui.red.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @red;
 }
-.ui.green.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @green;
+.ui.inverted.red.segment {
+  background-color: @red !important;
+  color: @white !important;
 }
+
+/* Orange */
 .ui.orange.segment:not(.inverted) {
   border-top: @coloredBorderSize solid @orange;
 }
-.ui.pink.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @pink;
-}
-.ui.purple.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @purple;
-}
-.ui.red.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @red;
-}
-.ui.teal.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @teal;
+.ui.inverted.orange.segment {
+  background-color: @orange !important;
+  color: @white !important;
 }
+
+/* Yellow */
 .ui.yellow.segment:not(.inverted) {
   border-top: @coloredBorderSize solid @yellow;
 }
-
-.ui.black.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
-}
-.ui.blue.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
-}
-.ui.green.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
-}
-.ui.orange.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
-}
-.ui.pink.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
+.ui.inverted.yellow.segment {
+  background-color: @yellow !important;
+  color: @white !important;
 }
-.ui.purple.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
+
+/* Green */
+.ui.green.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @green;
 }
-.ui.red.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
+.ui.inverted.green.segment {
+  background-color: @green !important;
+  color: @white !important;
 }
-.ui.teal.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
+
+/* Teal */
+.ui.teal.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @teal;
 }
-.ui.yellow.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
+.ui.inverted.teal.segment {
+  background-color: @teal !important;
+  color: @white !important;
 }
 
-/*-------------------
-   Inverted Colors
---------------------*/
-
-.ui.inverted.segment,
-.ui.inverted.black.segment {
-  background-color: @black !important;
-  color: @white !important;
+/* Blue */
+.ui.blue.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @blue;
 }
 .ui.inverted.blue.segment {
   background-color: @blue !important;
   color: @white !important;
 }
-.ui.inverted.green.segment {
-  background-color: @green !important;
+
+/* Violet */
+.ui.violet.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @violet;
+}
+.ui.inverted.violet.segment {
+  background-color: @violet !important;
   color: @white !important;
 }
-.ui.inverted.orange.segment {
-  background-color: @orange !important;
+
+/* Purple */
+.ui.purple.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @purple;
+}
+.ui.inverted.purple.segment {
+  background-color: @purple !important;
   color: @white !important;
 }
+
+/* Pink */
+.ui.pink.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @pink;
+}
 .ui.inverted.pink.segment {
   background-color: @pink !important;
   color: @white !important;
 }
-.ui.inverted.purple.segment {
-  background-color: @purple !important;
-  color: @white !important;
+
+/* Brown */
+.ui.brown.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @brown;
 }
-.ui.inverted.red.segment {
-  background-color: @red !important;
+.ui.inverted.brown.segment {
+  background-color: @brown !important;
   color: @white !important;
 }
-.ui.inverted.teal.segment {
-  background-color: @teal !important;
+
+/* Grey */
+.ui.grey.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @grey;
+}
+.ui.inverted.grey.segment {
+  background-color: @grey !important;
   color: @white !important;
 }
-.ui.inverted.yellow.segment {
-  background-color: @yellow !important;
+
+/* Black */
+.ui.black.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @black;
+}
+.ui.inverted.black.segment {
+  background-color: @black !important;
   color: @white !important;
 }
 

src/themes/default/elements/segment.variables

@@ -87,7 +87,6 @@
 
 /* Colors */
 @coloredBorderSize: 2px;
-@coloredBorderRadius: @borderRadius;
 
 /* Ordinality */
 @secondaryBackground: #FAF9FA;