chore: align scrollbar styles to latest VD (#11512)

Fixes: #11507

Author: nnaydenow

packages/base/src/util/getEffectiveScrollbarStyle.ts

@@ -6,7 +6,8 @@ const getEffectiveScrollbarStyle = () => {
 		return "";
 	}
 
-	return `::-webkit-scrollbar:horizontal {
+	return `
+::-webkit-scrollbar:horizontal {
 	height: var(--sapScrollBar_Dimension);
 }
 
@@ -22,6 +23,7 @@ const getEffectiveScrollbarStyle = () => {
 ::-webkit-scrollbar-thumb {
 	border-radius: var(--sapElement_BorderCornerRadius);
 	background-color: var(--sapScrollBar_FaceColor);
+	border: 0.125rem solid var(--sapScrollBar_TrackColor);
 }
 
 ::-webkit-scrollbar-thumb:hover {

packages/fiori/src/NavigationLayout.ts

@@ -3,7 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import browserScrollbarCSS from "@ui5/webcomponents/dist/generated/themes/BrowserScrollbar.css.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import {
 	isPhone,
 	isTablet,
@@ -50,7 +50,7 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
 	languageAware: true,
 	renderer: jsxRenderer,
 	styles: [
-		browserScrollbarCSS,
+		getEffectiveScrollbarStyle(),
 		NavigationLayoutCss,
 	],
 	template: NavigationLayoutTemplate,

packages/main/src/themes/BrowserScrollbar.css

@@ -422,22 +422,6 @@
 	border-bottom-right-radius: var(--sapField_BorderCornerRadius);
 }
 
-:host([value-state="Negative"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-color: var(--sapScrollBar_TrackColor);
-}
-
-:host([value-state="Critical"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-color: var(--sapScrollBar_TrackColor);
-}
-
-:host([value-state="Information"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-color: var(--sapScrollBar_TrackColor);
-}
-
-:host([value-state="Positive"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-color: var(--sapScrollBar_TrackColor);
-}
-
 :host([focused]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
 	background-image: none;
 }