fix(ScrollbarStyles): introduce centralized scrollbar styling

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();

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;

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);
+}

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);
 };
 

packages/fiori/src/DynamicSideContent.ts

@@ -4,7 +4,6 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.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 ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -119,7 +118,7 @@ type DynamicSideContentAccessibilityAttributes = {
 @customElement({
 	tag: "ui5-dynamic-side-content",
 	renderer: jsxRenderer,
-	styles: [DynamicSideContentCss, getEffectiveScrollbarStyle()],
+	styles: [DynamicSideContentCss],
 	template: DynamicSideContentTemplate,
 })
 /**

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,

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,
 })

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

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],
 })
 
 /**

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,
 })

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 {

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(),
 	],
 })
 /**

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,
 })

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,

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(),
 	],
 })
 

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;
-}