fix: fix scrollbar styles for Belize theme (#4958)

Fixes #4924

Author: Lukas742

packages/main/src/components/ThemeProvider/GlobalStyleClasses.jss.ts

@@ -1,6 +1,7 @@
 import { CompactSizes, CozySizes, ThemingParameters } from '@ui5/webcomponents-react-base';
 import { GlobalStyleClasses } from '../../enums/index.js';
 import { baseParameters } from '../../themes/base.js';
+import { CustomThemingParameters } from '../../themes/CustomVariables.js';
 import { sapBelizeParameters } from '../../themes/sap_belize.js';
 import { sapBelizeHcbParameters } from '../../themes/sap_belize_hcb.js';
 import { sapBelizeHcwParameters } from '../../themes/sap_belize_hcw.js';
@@ -18,6 +19,7 @@ export const GlobalStyleClassesStyles = {
     [`.${GlobalStyleClasses.inheritingSapScrollBar} *:not([data-native-scrollbar])`]: {
       '&::-webkit-scrollbar': {
         backgroundColor: ThemingParameters.sapScrollBar_TrackColor,
+        borderInlineStart: CustomThemingParameters.ScrollbarBorder,
         '&:horizontal': {
           height: ThemingParameters.sapScrollBar_Dimension
         },
@@ -27,7 +29,7 @@ export const GlobalStyleClassesStyles = {
       },
       '&::-webkit-scrollbar-thumb': {
         backgroundColor: ThemingParameters.sapScrollBar_FaceColor,
-        borderRadius: '0.25rem',
+        borderRadius: CustomThemingParameters.ScrollbarBorderRadius,
         '&:hover': {
           backgroundColor: ThemingParameters.sapScrollBar_Hover_FaceColor
         },
@@ -45,6 +47,7 @@ export const GlobalStyleClassesStyles = {
     [`.${GlobalStyleClasses.sapScrollBar}:not([data-native-scrollbar])`]: {
       '&::-webkit-scrollbar': {
         backgroundColor: ThemingParameters.sapScrollBar_TrackColor,
+        borderInlineStart: CustomThemingParameters.ScrollbarBorder,
         '&:horizontal': {
           height: ThemingParameters.sapScrollBar_Dimension
         },
@@ -54,7 +57,7 @@ export const GlobalStyleClassesStyles = {
       },
       '&::-webkit-scrollbar-thumb': {
         backgroundColor: ThemingParameters.sapScrollBar_FaceColor,
-        borderRadius: '0.25rem',
+        borderRadius: CustomThemingParameters.ScrollbarBorderRadius,
         '&:hover': {
           backgroundColor: ThemingParameters.sapScrollBar_Hover_FaceColor
         },

packages/main/src/themes/CustomVariables.ts

@@ -26,7 +26,9 @@ export enum CustomVariables {
   SplitterContentBorderColor = '--_ui5wcr_Splitter_ContentBorderColor',
   SplitterIconColor = '--_ui5wcr_Splitter_IconColor',
   ToolbarFocusOutline = '--_ui5wcr_Toolbar_FocusOutline',
-  ToolbarFocusShadow = '--_ui5wcr_Toolbar_FocusShadow'
+  ToolbarFocusShadow = '--_ui5wcr_Toolbar_FocusShadow',
+  ScrollbarBorder = '--_ui5wcr_Scrollbar_Border',
+  ScrollbarBorderRadius = '--_ui5wcr_Scrollbar_BorderRadius'
 }
 
 export const CustomThemingParameters = new Proxy(CustomVariables, {

packages/main/src/themes/base.ts

@@ -27,5 +27,7 @@ export const baseParameters: Partial<Record<CustomVariables, string>> = {
   [CustomVariables.SplitterContentBorderColor]: ThemingParameters.sapHighlightColor,
   [CustomVariables.SplitterIconColor]: ThemingParameters.sapButton_Lite_TextColor,
   [CustomVariables.ToolbarFocusOutline]: `${ThemingParameters.sapContent_FocusWidth} ${ThemingParameters.sapContent_FocusStyle} ${ThemingParameters.sapContent_FocusColor}`,
-  [CustomVariables.ToolbarFocusShadow]: 'none'
+  [CustomVariables.ToolbarFocusShadow]: 'none',
+  [CustomVariables.ScrollbarBorder]: 'none',
+  [CustomVariables.ScrollbarBorderRadius]: ThemingParameters.sapElement_BorderCornerRadius
 };

packages/main/src/themes/sap_belize.ts

@@ -1,9 +1,10 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { CustomVariables } from './CustomVariables.js';
 
-export const sapBelizeParameters: Partial<Record<CustomVariables, string>> = {
+export const sapBelizeParameters: Partial<Record<CustomVariables, string | number>> = {
   [CustomVariables.ActionSheetTopBorderRadius]: ThemingParameters.sapElement_BorderCornerRadius,
   [CustomVariables.ActionSheetBoxShadow]: ThemingParameters.sapContent_HeaderShadow,
   [CustomVariables.SplitterBarBorderFocus]: `.0625rem dotted ${ThemingParameters.sapContent_FocusColor}`,
-  [CustomVariables.SplitterBarBorderFix]: `.0625rem dotted ${ThemingParameters.sapContent_FocusColor}`
+  [CustomVariables.SplitterBarBorderFix]: `.0625rem dotted ${ThemingParameters.sapContent_FocusColor}`,
+  [CustomVariables.ScrollbarBorderRadius]: 0
 };

packages/main/src/themes/sap_belize_hcb.ts

@@ -1,7 +1,9 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { CustomVariables } from './CustomVariables.js';
 
-export const sapBelizeHcbParameters: Partial<Record<CustomVariables, string>> = {
+export const sapBelizeHcbParameters: Partial<Record<CustomVariables, string | number>> = {
   [CustomVariables.ActionSheetTopBorderRadius]: ThemingParameters.sapElement_BorderCornerRadius,
-  [CustomVariables.ActionSheetBoxShadow]: ThemingParameters.sapContent_HeaderShadow
+  [CustomVariables.ActionSheetBoxShadow]: ThemingParameters.sapContent_HeaderShadow,
+  [CustomVariables.ScrollbarBorder]: '0.0625rem solid #999',
+  [CustomVariables.ScrollbarBorderRadius]: 0
 };

packages/main/src/themes/sap_belize_hcw.ts

@@ -1,7 +1,9 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { CustomVariables } from './CustomVariables.js';
 
-export const sapBelizeHcwParameters: Partial<Record<CustomVariables, string>> = {
+export const sapBelizeHcwParameters: Partial<Record<CustomVariables, string | number>> = {
   [CustomVariables.ActionSheetTopBorderRadius]: ThemingParameters.sapElement_BorderCornerRadius,
-  [CustomVariables.ActionSheetBoxShadow]: ThemingParameters.sapContent_HeaderShadow
+  [CustomVariables.ActionSheetBoxShadow]: ThemingParameters.sapContent_HeaderShadow,
+  [CustomVariables.ScrollbarBorder]: '0.0625rem solid #585858',
+  [CustomVariables.ScrollbarBorderRadius]: 0
 };