A few more dark mode fixes

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `9.1.0`.
+- Adjusted the dark theme palette a bit more and adjusted a few components ([#1700](https://github.com/elastic/eui/pull/1700))
+
 
 ## [`9.1.0`](https://github.com/elastic/eui/tree/v9.1.0)
 
@@ -18,7 +19,6 @@ No public interface changes since `9.1.0`.
 **Bug fixes**
 
 - Fixed IE11 rendering issue in `EuiLoadingKibana` ([#1683](https://github.com/elastic/eui/pull/1683))
-
 - Fixed floating point arithmetic bug in `EuiRangeTrack`'s value validation ([#1687](https://github.com/elastic/eui/pull/1687))
 - Fixed `EuiComboBox` `activeOptonIndex` error with empty search results ([#1695](https://github.com/elastic/eui/pull/1695))
 

src/components/badge/notification_badge/_notification_badge.scss

@@ -3,7 +3,7 @@
   display: inline-block;
   border-radius: $euiBorderRadius;
   background: $euiColorAccent;
-  color: lightOrDarkTheme($euiColorEmptyShade, $euiColorFullShade);
+  color: $euiColorEmptyShade;
   font-size: $euiFontSizeXS;
   font-weight: $euiFontWeightMedium;
   line-height: $euiSize;

src/components/bottom_bar/_bottom_bar.scss

@@ -1,4 +1,5 @@
 .euiBottomBar {
+  @include euiBottomShadowFlat($euiShadowColorLarge);
   background: tintOrShade($euiColorFullShade, 25%, 90%);
   color: $euiColorEmptyShade;
   position: fixed;

src/components/call_out/_mixins.scss

@@ -2,7 +2,7 @@
   @if (map-has-key($euiCallOutTypes, $type)) {
     $color: map-get($euiCallOutTypes, $type);
     $backgroundColor: tintOrShade($color, 90%, 70%);
-    $foregroundColor: makeHighContrastColor($color, $backgroundColor);
+    $foregroundColor: shadeOrTint(makeHighContrastColor($color, $backgroundColor), 0, 20%);
 
     @if ($returnBackgroundOrForeground == 'background') {
       @return $backgroundColor;

src/components/loading/_loading_chart.scss

@@ -41,15 +41,15 @@
     }
 
     &:nth-child(2) {
-      background-color: darken($euiColorLightShade, 4%);
+      background-color: shadeOrTint($euiColorLightShade, 4%, 4%);
     }
 
     &:nth-child(3) {
-      background-color: darken($euiColorLightShade, 8%);
+      background-color: shadeOrTint($euiColorLightShade, 8%, 8%);
     }
 
     &:nth-child(4) {
-      background-color: darken($euiColorLightShade, 12%);
+      background-color: shadeOrTint($euiColorLightShade, 12%, 12%);
     }
   }
 }

src/components/side_nav/_side_nav_item.scss

@@ -11,15 +11,14 @@
   color: $euiColorFullShade; /* 2 */
 
   &.euiSideNavItemButton--isClickable {
-    &:hover {
+    &:hover .euiSideNavItemButton__label {
       text-decoration: underline;
     }
 
     // Focus state background regardless of index/selected state.
     &:focus {
       // sass-lint:disable-block no-important
       background-color: $euiFocusBackgroundColor !important;
-      color: $euiColorPrimary !important;
     }
   }
 

src/components/tool_tip/_mixins.scss

@@ -1,7 +1,7 @@
 @mixin euiToolTipStyle($size: null) {
   @include euiBottomShadow($color: #000);
   border-radius: $euiBorderRadius;
-  background-color: tintOrShade($euiColorFullShade, 25%, 90%);
+  background-color: $euiTooltipBackgroundColor;
   color: $euiColorGhost;
   z-index: $euiZLevel9;
   max-width: 256px;

src/components/tool_tip/_tool_tip.scss

@@ -23,7 +23,7 @@
     position: absolute;
     transform-origin: center;
     border-radius: 2px;
-    background-color: tintOrShade($euiColorFullShade, 25%, 90%);
+    background-color: $euiTooltipBackgroundColor;
     width: $arrowSize;
     height: $arrowSize;
 

src/components/tool_tip/_variables.scss

@@ -1,3 +1,5 @@
+$euiTooltipBackgroundColor: tintOrShade($euiColorFullShade, 25%, 100%);
+
 $euiTooltipAnimations: (
   top: euiToolTipTop,
   left: euiToolTipBottom,

src/themes/eui/eui_colors_dark.scss

@@ -14,8 +14,8 @@ $euiColorEmptyShade: #1D1E24;
 $euiColorLightestShade: #25262E;
 $euiColorLightShade: #343741;
 $euiColorMediumShade: #535966;
-$euiColorDarkShade: #D4DAE5;
-$euiColorDarkestShade: #F5F7FA;
+$euiColorDarkShade: #98A2B3;
+$euiColorDarkestShade: #D4DAE5;
 $euiColorFullShade: #FFF;
 
 // Variations from core