From 6d55420c6e1bb65c402965be9592f492bee018e7 Mon Sep 17 00:00:00 2001
From: Ivan Shmidt <bahoc47@gmail.com>
Date: Tue, 28 Apr 2020 13:53:40 +0200
Subject: [PATCH] darkMode: fix HorizontalScrollGrid (#666) (#668)

---
 .../HorizontalScrollGrid.tsx                  | 51 +++++++++++--------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx b/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
index a4f485d45c..c636a74308 100644
--- a/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
+++ b/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
@@ -20,25 +20,30 @@ import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import { Grid, IconButton, makeStyles, Theme } from '@material-ui/core';
 
-// Generated with https://larsenwork.com/easing-gradients/
-const fadeGradient = `
-  hsl(0, 0%, 98%) 0%,
-  hsla(0, 0%, 98%, 0.987) 8.1%,
-  hsla(0, 0%, 98%, 0.951) 15.5%,
-  hsla(0, 0%, 98%, 0.896) 22.5%,
-  hsla(0, 0%, 98%, 0.825) 29%,
-  hsla(0, 0%, 98%, 0.741) 35.3%,
-  hsla(0, 0%, 98%, 0.648) 41.2%,
-  hsla(0, 0%, 98%, 0.55) 47.1%,
-  hsla(0, 0%, 98%, 0.45) 52.9%,
-  hsla(0, 0%, 98%, 0.352) 58.8%,
-  hsla(0, 0%, 98%, 0.259) 64.7%,
-  hsla(0, 0%, 98%, 0.175) 71%,
-  hsla(0, 0%, 98%, 0.104) 77.5%,
-  hsla(0, 0%, 98%, 0.049) 84.5%,
-  hsla(0, 0%, 98%, 0.013) 91.9%,
-  hsla(0, 0%, 98%, 0) 100%
-`;
+const generateGradientStops = (themeType: 'dark' | 'light') => {
+  // 97% corresponds to the theme.palette.background.default for the light theme
+  // 16% for the dark theme
+  const luminance = themeType === 'dark' ? '16%' : '97%';
+  // Generated with https://larsenwork.com/easing-gradients/
+  return `
+    hsl(0, 0%, ${luminance}) 0%,
+    hsla(0, 0%, ${luminance}, 0.987) 8.1%,
+    hsla(0, 0%, ${luminance}, 0.951) 15.5%,
+    hsla(0, 0%, ${luminance}, 0.896) 22.5%,
+    hsla(0, 0%, ${luminance}, 0.825) 29%,
+    hsla(0, 0%, ${luminance}, 0.741) 35.3%,
+    hsla(0, 0%, ${luminance}, 0.648) 41.2%,
+    hsla(0, 0%, ${luminance}, 0.55) 47.1%,
+    hsla(0, 0%, ${luminance}, 0.45) 52.9%,
+    hsla(0, 0%, ${luminance}, 0.352) 58.8%,
+    hsla(0, 0%, ${luminance}, 0.259) 64.7%,
+    hsla(0, 0%, ${luminance}, 0.175) 71%,
+    hsla(0, 0%, ${luminance}, 0.104) 77.5%,
+    hsla(0, 0%, ${luminance}, 0.049) 84.5%,
+    hsla(0, 0%, ${luminance}, 0.013) 91.9%,
+    hsla(0, 0%, ${luminance}, 0) 100%
+  `;
+};
 
 const fadeSize = 100;
 const fadePadding = 10;
@@ -72,11 +77,15 @@ const useStyles = makeStyles<Theme>(theme => ({
   },
   fadeLeft: {
     left: -fadePadding,
-    background: `linear-gradient(90deg, ${fadeGradient})`,
+    background: `linear-gradient(90deg, ${generateGradientStops(
+      theme.palette.type,
+    )})`,
   },
   fadeRight: {
     right: -fadePadding,
-    background: `linear-gradient(270deg, ${fadeGradient})`,
+    background: `linear-gradient(270deg, ${generateGradientStops(
+      theme.palette.type,
+    )})`,
   },
   fadeHidden: {
     opacity: 0,