From 7568d487bfd4b1ca83fa8f4eb14a2fc8c82db165 Mon Sep 17 00:00:00 2001
From: Jaladh Singhal <jaladhsinghal@gmail.com>
Date: Fri, 21 Jun 2024 14:51:59 -0700
Subject: [PATCH] FIREFLY-1485: Homogenise different scrollbars colors

---
 src/firefly/html/css/global.css         | 18 ++++++++++++------
 src/firefly/js/tables/ui/TablePanel.css |  8 ++++----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/firefly/html/css/global.css b/src/firefly/html/css/global.css
index 229873115..29cbdff3a 100644
--- a/src/firefly/html/css/global.css
+++ b/src/firefly/html/css/global.css
@@ -494,19 +494,25 @@ div.rootStyle img {
 
 /*------------------- generic-browser scrollbars ---------------------*/
 /* from https://developer.chrome.com/docs/css-ui/scrollbar-styling */
+:root {
+    --scrollbar-color-thumb: var(--joy-palette-neutral-softActiveBg);
+    --scrollbar-color-track: var(--joy-palette-background-surface);
+    --scrollbar-color-thumb-active: var(--joy-palette-neutral-softDisabledColor); /* one shade darker than softActiveBg */
+}
+
 /* Modern browsers with `scrollbar-*` support */
 @supports (scrollbar-width: auto) {
-    #app {
-        scrollbar-color: var(--joy-palette-neutral-solidBg) var(--joy-palette-background-level1); /*thumb-color track-color*/
+    body {
+        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
     }
 }
 
 /* Legacy browsers with `::-webkit-scrollbar-*` support */
 @supports selector(::-webkit-scrollbar) {
-    #app::-webkit-scrollbar-thumb {
-        background: var(--joy-palette-neutral-solidBg);
+    body::-webkit-scrollbar-thumb {
+        background: var(--scrollbar-color-thumb);
     }
-    #app::-webkit-scrollbar-track {
-        background: var(--joy-palette-background-level1);
+    body::-webkit-scrollbar-track {
+        background: var(--scrollbar-color-track);
     }
 }
diff --git a/src/firefly/js/tables/ui/TablePanel.css b/src/firefly/js/tables/ui/TablePanel.css
index 9f0763de6..e19831bd1 100644
--- a/src/firefly/js/tables/ui/TablePanel.css
+++ b/src/firefly/js/tables/ui/TablePanel.css
@@ -165,24 +165,24 @@ Overriding default fixed-table css
 
 .public_Scrollbar_main.public_Scrollbar_mainActive,
 .public_Scrollbar_main {
-    background-color: var(--joy-palette-background-surface);
+    background-color: var(--scrollbar-color-track);
     border-color: var(--joy-palette-neutral-outlinedBorder);
 }
 
 .public_Scrollbar_mainOpaque,
 .public_Scrollbar_mainOpaque.public_Scrollbar_mainActive,
 .public_Scrollbar_mainOpaque:hover {
-    background-color: var(--joy-palette-background-surface);
+    background-color: var(--scrollbar-color-track);
 }
 
 .public_Scrollbar_face:after {
-    background-color: var(--joy-palette-neutral-softActiveBg);
+    background-color: var(--scrollbar-color-thumb);
 }
 
 .public_Scrollbar_main:hover .public_Scrollbar_face:after,
 .public_Scrollbar_mainActive .public_Scrollbar_face:after,
 .public_Scrollbar_faceActive:after {
-    background-color: var(--joy-palette-neutral-solidBg);
+    background-color: var(--scrollbar-color-thumb-active);
 }
 
 .public_fixedDataTableRow_columnsShadow {