Fix issues with inverted secondary/tertiary segment, adjust lightness of inverted #2306

src/definitions/elements/segment.less

@@ -504,8 +504,6 @@
 
 .ui.inverted.segment {
   border: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
   box-shadow: none;
 }
 .ui.inverted.segment .segment {
@@ -536,7 +534,7 @@
 
 .ui.tertiary.segment {
   background: @tertiaryBackground;
-  color: @textColor;
+  color: @tertiaryColor;
 }
 
 .ui.secondary.inverted.segment {

src/themes/default/elements/segment.variables

@@ -89,14 +89,28 @@
 @coloredBorderSize: 2px;
 
 /* Ordinality */
-@secondaryBackground: #FAF9FA;
-@secondaryColor: @textColor;
-
-@tertiaryBackground:  #EBEBEB;
-@tertiaryColor: @lightTextColor;
-
-@secondaryInvertedBackground: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
-@secondaryInvertedColor: @offWhite;
-
-@tertiaryInvertedBackground: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
-@tertiaryInvertedColor: @darkWhite;
+@secondaryBackground: @darkWhite;
+@secondaryColor: @mutedTextColor;
+
+@tertiaryBackground:  @midWhite;
+@tertiaryColor: @mutedTextColor;
+
+@secondaryInvertedLightness: 0.2;
+@secondaryInvertedBackground:
+  lighten(@black, (@secondaryInvertedLightness * 100))
+  linear-gradient(
+    rgba(255, 255, 255, @secondaryInvertedLightness) 0%,
+    rgba(255, 255, 255, @secondaryInvertedLightness) 100%
+  )
+;
+@secondaryInvertedColor: @invertedMutedTextColor;
+
+@tertiaryInvertedLightness: 0.35;
+@tertiaryInvertedBackground:
+  lighten(@black, (@tertiaryInvertedLightness * 100))
+  linear-gradient(
+    rgba(255, 255, 255, @tertiaryInvertedLightness) 0%,
+    rgba(255, 255, 255, @tertiaryInvertedLightness) 100%
+  )
+;
+@tertiaryInvertedColor: @invertedMutedTextColor;

src/themes/default/globals/site.variables

@@ -186,8 +186,9 @@
 
 /*---   Neutrals  ---*/
 @fullBlack        : #000000;
-@offWhite         : #FAFAFA;
-@darkWhite        : #F4F4F4;
+@offWhite         : #F9FAFB;
+@darkWhite        : #F3F4F5;
+@midWhite         : #DCDDDE;
 @white            : #FFFFFF;
 
 /*--- Colored Backgrounds ---*/