From 92cf2b6fb2a411c576c8cec499b89bebe03233f0 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Thu, 2 May 2024 16:41:53 -0300
Subject: [PATCH] feat: Scrollbar color contrast improvement (#32341)

---
 .changeset/warm-squids-deliver.md                            | 5 +++++
 .../client/components/CustomScrollbars/CustomScrollbars.tsx  | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/warm-squids-deliver.md

diff --git a/.changeset/warm-squids-deliver.md b/.changeset/warm-squids-deliver.md
new file mode 100644
index 000000000000..0ec0a9407993
--- /dev/null
+++ b/.changeset/warm-squids-deliver.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+Changes the scrollbar color in order to improve the contrast and accessibility compliance
diff --git a/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx b/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx
index c98dcb0d7e65..18bdbdead14e 100644
--- a/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx
+++ b/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx
@@ -1,3 +1,4 @@
+import { Palette } from '@rocket.chat/fuselage';
 import type { ScrollValues } from 'rc-scrollbars';
 import { Scrollbars } from 'rc-scrollbars';
 import type { MutableRefObject, CSSProperties, ReactNode, ReactElement } from 'react';
@@ -43,7 +44,7 @@ const CustomScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function
 				overflowX ? undefined : (props): ReactElement => <div {...props} className='track-horizontal' style={{ display: 'none' }} />
 			}
 			renderThumbVertical={({ style, ...props }): JSX.Element => (
-				<div {...props} style={{ ...style, backgroundColor: 'rgba(0, 0, 0, 0.5)', borderRadius: '7px' }} />
+				<div {...props} style={{ ...style, backgroundColor: Palette.stroke['stroke-dark'].toString(), borderRadius: '4px' }} />
 			)}
 			children={children}
 			ref={refSetter}