feat: Scrollbar color contrast improvement (#32341)

RocketChat · May 2, 2024 · 92cf2b6 · 92cf2b6
1 parent 70ab2a7
commit 92cf2b6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/.changeset/warm-squids-deliver.md 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
@@ -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}