Fixed scrollbar colors for dark mode (#4969)

* Fixed scrollbar colors for dark mode

Uses the `euiScrollBar()` mixin at the `html` level and adding a 3rd parameter for `$size` with the default being `thin` (as it were) and allowing `thick` to maintain the larger size for the overall page.

Caveat: This could mean Firefox instances of scrolling containers are no longer “thin” if they don’t use the mixin.

Author: cchaos

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `36.0.0`.
+- Fixed color of `html` scrollbar in dark mode ([#4969](https://github.com/elastic/eui/pull/4969))
 
 ## [`36.0.0`](https://github.com/elastic/eui/tree/v36.0.0)
 

src/global_styling/mixins/_helpers.scss

@@ -24,11 +24,15 @@
 }
 
 // Set scroll bar appearance on Chrome (and firefox).
-@mixin euiScrollBar($thumbColor: $euiColorDarkShade, $trackBackgroundColor: transparent) {
+@mixin euiScrollBar($thumbColor: $euiColorDarkShade, $trackBackgroundColor: transparent, $size: 'thin') {
   // Firefox's scrollbar coloring cascades, but the sizing does not,
   // so it's being added to this mixin for allowing support wherever custom scrollbars are
   // sass-lint:disable-block no-misspelled-properties
-  scrollbar-width: thin;
+  scrollbar-color: transparentize($thumbColor, .5) $trackBackgroundColor; // Firefox support
+
+  @if ($size == 'thin') {
+    scrollbar-width: thin;
+  }
 
   // sass-lint:disable-block no-vendor-prefixes
   &::-webkit-scrollbar {
@@ -38,8 +42,14 @@
 
   &::-webkit-scrollbar-thumb {
     background-color: transparentize($thumbColor, .5);
-    border: $euiScrollBarCorner solid $trackBackgroundColor;
     background-clip: content-box;
+    border-radius: $euiScrollBar;
+
+    @if ($size == 'thin') {
+      border: $euiScrollBarCornerThin solid $trackBackgroundColor;
+    } @else {
+      border: $euiScrollBarCorner solid $trackBackgroundColor;
+    }
   }
 
   &::-webkit-scrollbar-corner,

src/global_styling/mixins/_shadow.scss

@@ -87,7 +87,7 @@
 }
 
 @mixin euiOverflowShadow($direction: 'y', $side: 'both') {
-  $hideHeight: $euiScrollBarCorner * 1.25;
+  $hideHeight: $euiScrollBarCornerThin * 1.25;
   $gradient: null;
   $gradientStart:
   transparentize(red, .9) 0%,

src/global_styling/reset/_scrollbar.scss

@@ -1,8 +1,6 @@
-// Firefox's scrollbar coloring cascades throughout which is why it's set at the html level
-// However, the width sizing is not, but this has been added to the euiScrollBar mixin as well
+// Declaring the top level scrollbar colors to match the theme also requires setting the sizes on Chrome
+// so that it knows to use custom styles. Therefore, we just reuse the same scrollbar mixin with `thick` size.
 
 html {
-  // sass-lint:disable-block no-misspelled-properties
-  scrollbar-width: thin;
-  scrollbar-color: transparentize($euiColorDarkShade, .5) transparent; // Firefox support
+  @include euiScrollBar($euiColorDarkShade, shadeOrTint($euiPageBackgroundColor, 3%, 7%), 'thick');
 }

src/global_styling/variables/_size.scss

@@ -10,4 +10,6 @@ $euiSizeXXL:  $euiSize * 2.5 !default;
 $euiButtonMinWidth: $euiSize * 7 !default;
 
 $euiScrollBar: $euiSize !default;
-$euiScrollBarCorner: $euiSizeS * .75 !default;
+// Corner sizes are used as an inset border and therefore a smaller corner size means a larger thumb
+$euiScrollBarCorner: $euiSizeXS !default;
+$euiScrollBarCornerThin: $euiSizeS * .75 !default;