Update scrollbars to match theme (#1128)

* Use new scrollbar styles based on latest standards.

* Properly apply styles to body and html, so scrollbars know how to get their colors.

* Fix search container so scrollbar knows where to get its color

* Fix scrollbar bg color in Kapa modal.

components/utilities/kapaModal.css

@@ -2,6 +2,10 @@
   background-color: rgba(166, 168, 184, 0.6) !important;
 }
 
+.mantine-Paper-root {
+  @apply bg-white dark:bg-gray-90;
+}
+
 .mantine-Modal-header,
 .mantine-Modal-header h3 {
   @apply bg-white dark:bg-gray-90 text-gray-90 dark:text-gray-40 border-b-0 font-normal tracking-wide;

components/utilities/search.module.css

@@ -9,6 +9,11 @@
 
 .ContentContainer {
   @apply p-0 rounded-md w-96 overflow-x-hidden overflow-y-auto w-full h-full;
+  @apply bg-gray-10;
+}
+
+:global(.dark) .ContentContainer {
+  @apply bg-gray-90;
 }
 
 /* Search Bar */

styles/globals.css

@@ -3,13 +3,18 @@
 @tailwind utilities;
 
 html {
-  @apply overflow-x-hidden scroll-pt-12;
+  @apply overflow-x-hidden overflow-y-auto scroll-pt-12;
 }
 
 body {
+  @apply bg-white;
   @apply scroll-m-12;
 }
 
+.dark body {
+  @apply bg-gray-100;
+}
+
 /* Utility to hide text that only is needed in screen readers */
 .sr-only {
   @apply absolute top-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-none;

styles/scrollbars.scss

@@ -1,25 +1,39 @@
-/* Improve scrollbars on Chrome + Windows/Linux. */
-body:not(.mac) {
+@supports (scrollbar-color: #000 #111) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+
+  :hover {
+    scrollbar-color: theme("colors.gray.40") transparent;
+  }
+
+  .dark:hover,
+  .dark :hover {
+    scrollbar-color: theme("colors.gray.70") transparent;
+  }
+}
+
+@supports not (scrollbar-color: #000 #111) {
   ::-webkit-scrollbar {
-    height: 6px;
-    width: 6px;
-    background: transparent;
+    @apply h-2 w-2 bg-transparent;
   }
 
-  ::-webkit-scrollbar-thumb:horizontal {
-    margin-top: -6px;
+  ::-webkit-scrollbar-thumb {
+    @apply rounded-full;
   }
 
-  ::-webkit-scrollbar-thumb:active {
-    opacity: 1;
-    background-color: rgba(128, 132, 149, 0.75);
+  :hover::-webkit-scrollbar-thumb {
+    @apply bg-gray-50 bg-opacity-70;
   }
 
   ::-webkit-scrollbar-thumb:hover,
-  :hover::-webkit-scrollbar-thumb:horizontal,
-  :hover::-webkit-scrollbar-thumb:vertical {
-    border-radius: 9999px;
-    opacity: 1;
-    background-color: rgba(191, 197, 211, 0.75);
+  :hover::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-50 bg-opacity-100;
+  }
+
+  ::-webkit-scrollbar-thumb:active,
+  :hover::-webkit-scrollbar-thumb:active {
+    @apply bg-gray-70 bg-opacity-100;
   }
 }