fix(ScrollbarStyles): introduce centralized scrollbar styling (#12207)

TeodorTaushanov · web-flow · commit 5481bb3f1e3f · 2025-09-02T09:57:16.000+03:00
* chore(getEffectiveScrollbarStyle): align with design spec
diff --git a/packages/base/src/Boot.ts b/packages/base/src/Boot.ts
@@ -2,6 +2,7 @@ import whenDOMReady from "./util/whenDOMReady.js";
 import EventProvider from "./EventProvider.js";
 import insertFontFace from "./FontFace.js";
 import insertSystemCSSVars from "./SystemCSSVars.js";
+import insertScrollbarStyles from "./ScrollbarStyles.js";
 import { getTheme } from "./config/Theme.js";
 import applyTheme from "./theming/applyTheme.js";
 import { registerCurrentRuntime } from "./Runtimes.js";
@@ -67,6 +68,7 @@ const boot = async (): Promise<void> => {
 		openUI5Support && openUI5Support.attachListeners();
 		insertFontFace();
 		insertSystemCSSVars();
+		insertScrollbarStyles();
 		fixSafariActiveState();
 
 		resolve();
diff --git a/packages/base/src/ScrollbarStyles.ts b/packages/base/src/ScrollbarStyles.ts
@@ -0,0 +1,10 @@
+import { hasStyle, createStyle } from "./ManagedStyles.js";
+import scrollbarStyles from "./generated/css/ScrollbarStyles.css.js";
+
+const insertScrollbarStyles = () => {
+	if (!hasStyle("data-ui5-scrollbar-styles")) {
+		createStyle(scrollbarStyles, "data-ui5-scrollbar-styles");
+	}
+};
+
+export default insertScrollbarStyles;
diff --git a/packages/base/src/css/ScrollbarStyles.css b/packages/base/src/css/ScrollbarStyles.css
@@ -0,0 +1,3 @@
+html:not(:has(.ui5-content-native-scrollbars)) {
+	scrollbar-color: var(--sapScrollBar_FaceColor) var(--sapScrollBar_TrackColor);
+}
diff --git a/packages/base/src/util/SelectionAssistant.ts b/packages/base/src/util/SelectionAssistant.ts
@@ -1,5 +1,3 @@
-import getEffectiveScrollbarStyle from "../util/getEffectiveScrollbarStyle.js";
-
 const copyAndApplyStyles = (element: HTMLElement, copiedElement: HTMLElement) => {
 	const computedStyles = getComputedStyle(element);
 
@@ -33,23 +31,12 @@ const setInputSpecificStyles = (element: HTMLElement) => {
 	element.style.overflowY = "hidden";
 };
 
-const applyScrollStylings = () => {
-	const sheet = new CSSStyleSheet();
-	const styles = getEffectiveScrollbarStyle();
-
-	sheet.replaceSync(styles);
-
-	document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
-};
-
 const createCopy = () => {
 	const copiedElement = document.createElement("div");
 
 	copiedElement.id = "ui5-selection-mirror";
 	copiedElement.contentEditable = "true";
 
-	applyScrollStylings();
-
 	document.body.appendChild(copiedElement);
 };
 
diff --git a/packages/base/src/util/getEffectiveScrollbarStyle.ts b/packages/base/src/util/getEffectiveScrollbarStyle.ts
diff --git a/packages/fiori/src/DynamicSideContent.ts b/packages/fiori/src/DynamicSideContent.ts
@@ -5,7 +5,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import SideContentPosition from "./types/SideContentPosition.js";
@@ -119,7 +118,7 @@ type DynamicSideContentAccessibilityAttributes = {
 @customElement({
 	tag: "ui5-dynamic-side-content",
 	renderer: jsxRenderer,
-	styles: [DynamicSideContentCss, getEffectiveScrollbarStyle()],
+	styles: [DynamicSideContentCss],
 	template: DynamicSideContentTemplate,
 })
 /**
diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
@@ -3,7 +3,6 @@ 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 getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import {
 	isPhone,
 	isTablet,
@@ -50,7 +49,6 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
 	languageAware: true,
 	renderer: jsxRenderer,
 	styles: [
-		getEffectiveScrollbarStyle(),
 		NavigationLayoutCss,
 	],
 	template: NavigationLayoutTemplate,
diff --git a/packages/fiori/src/Page.ts b/packages/fiori/src/Page.ts
@@ -1,5 +1,4 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
@@ -50,7 +49,6 @@ import PageCss from "./generated/themes/Page.css.js";
 	renderer: jsxRenderer,
 	styles: [
 		PageCss,
-		getEffectiveScrollbarStyle(),
 	],
 	template: PageTemplate,
 })
diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts
@@ -1,7 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 import type NavigationMenu from "./NavigationMenu.js";
@@ -109,7 +108,7 @@ type PopupSideNavigationItem = SideNavigationItem & { associatedItem: SideNaviga
 	fastNavigation: true,
 	renderer: jsxRender,
 	template: SideNavigationTemplate,
-	styles: [SideNavigationCss, SideNavigationPopoverCss, getEffectiveScrollbarStyle()],
+	styles: [SideNavigationCss, SideNavigationPopoverCss],
 })
 /**
  * Fired when the selection has changed via user interaction
diff --git a/packages/fiori/src/UserSettingsItem.ts b/packages/fiori/src/UserSettingsItem.ts
@@ -5,7 +5,6 @@ import {
 } from "@ui5/webcomponents-base/dist/decorators.js";
 import type { TabContainerTabSelectEventDetail } from "@ui5/webcomponents/dist/TabContainer.js";
 import type Tab from "@ui5/webcomponents/dist/Tab.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import UserSettingsItemTemplate from "./UserSettingsItemTemplate.js";
 import type UserSettingsView from "./UserSettingsView.js";
 import UserSettingsItemCss from "./generated/themes/UserSettingsItem.css.js";
@@ -42,7 +41,7 @@ type UserSettingsItemBackClickEventDetail = {
 	tag: "ui5-user-settings-item",
 	renderer: jsxRenderer,
 	template: UserSettingsItemTemplate,
-	styles: [getEffectiveScrollbarStyle(), UserSettingsItemCss],
+	styles: [UserSettingsItemCss],
 })
 
 /**
diff --git a/packages/fiori/src/Wizard.ts b/packages/fiori/src/Wizard.ts
@@ -5,7 +5,6 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
@@ -181,7 +180,6 @@ type StepInfo = {
 	styles: [
 		WizardCss,
 		WizardPopoverCss,
-		getEffectiveScrollbarStyle(),
 	],
 	template: WizardTemplate,
 })
diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts
@@ -2,7 +2,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import {
 	isUp, isDown, isLeft, isRight,
 	isUpShift, isDownShift, isLeftShift, isRightShift,
@@ -109,7 +108,6 @@ const ICON_PER_STATE: Record<ValueStateWithIcon, string> = {
 		Popup.styles,
 		PopupsCommonCss,
 		dialogCSS,
-		getEffectiveScrollbarStyle(),
 	],
 })
 class Dialog extends Popup {
diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts
@@ -35,7 +35,6 @@ import {
 	getAllAccessibleNameRefTexts,
 } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import getNormalizedTarget from "@ui5/webcomponents-base/dist/util/getNormalizedTarget.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
@@ -180,7 +179,6 @@ type ListAccessibilityAttributes = {
 	template: ListTemplate,
 	styles: [
 		listCss,
-		getEffectiveScrollbarStyle(),
 	],
 })
 /**
diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
@@ -6,7 +6,6 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import DOMReferenceConverter from "@ui5/webcomponents-base/dist/converters/DOMReference.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import Popup from "./Popup.js";
@@ -81,7 +80,6 @@ type CalculatedPlacement = {
 		Popup.styles,
 		PopupsCommonCss,
 		PopoverCss,
-		getEffectiveScrollbarStyle(),
 	],
 	template: PopoverTemplate,
 })
diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts
@@ -8,7 +8,6 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -77,7 +76,6 @@ type TextAreaInputEventDetail = {
 	styles: [
 		textareaStyles,
 		valueStateMessageStyles,
-		getEffectiveScrollbarStyle(),
 	],
 	renderer: jsxRenderer,
 	template: TextAreaTemplate,
@@ -549,7 +547,6 @@ class TextArea extends UI5Element implements IFormInputElement {
 		return {
 			root: {
 				"ui5-textarea-root": true,
-				"ui5-content-custom-scrollbars": !!getEffectiveScrollbarStyle(),
 			},
 			valueStateMsg: {
 				"ui5-valuestatemessage-header": true,
diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts
@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -147,7 +146,6 @@ enum ClipboardDataOperation {
 		ResponsivePopoverCommonCss,
 		SuggestionsCss,
 		TokenizerPopoverCss,
-		getEffectiveScrollbarStyle(),
 	],
 })
 
diff --git a/packages/main/src/themes/TextArea.css b/packages/main/src/themes/TextArea.css
@@ -416,12 +416,3 @@
 :host([readonly]) .ui5-textarea-exceeded-text, :host([disabled]) .ui5-textarea-exceeded-text {
 	display: none;
 }
-
-:host .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	border-top-right-radius: var(--sapField_BorderCornerRadius);
-	border-bottom-right-radius: var(--sapField_BorderCornerRadius);
-}
-
-:host([focused]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-image: none;
-}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+html:not(:has(.ui5-content-native-scrollbars)) {`
	`2`	`+ scrollbar-color: var(--sapScrollBar_FaceColor) var(--sapScrollBar_TrackColor);`
	`3`	`+}`