Merge branch 'main' into list-item-custom-announcements

Author: IlianaB

docs/2-advanced/01-configuration.md

@@ -15,6 +15,7 @@ There are several configuration settings that affect all UI5 Web Components glob
 | [secondaryCalendarType](#calendarType)        | `Gregorian`, `Islamic`, `Buddhist`, `Japanese`, `Persian`                                                                                                                                                                                                                                      | `undefined`           | Default secondary calendar type to be used for date-related components | Date/time components (`ui5-date-picker`, etc.)                 |
 | [noConflict](#noConflict)                     | `true`, `false`                                                                                                                                                                                                                                                                                | `false`               | When set to true, all events will be fired with a `ui5-` prefix only   | Components that fire events (most do)                          |
 | [formatSettings](#formatSettings)             | See the [Format settings](#formatSettings) section below                                                                                                                                                                                                                                       | `{}`                  | Allows to override locale-specific configuration                       | Date/time components (`ui5-date-picker`, etc.)                 |
+| [loadBaseThemingCSSVariables](#loadBaseThemingCSSVariables) | `true`, `false` | `true` | Whether to load CSS variables from `@sap-theming/theming-base-content` package | Framework |
 | [fetchDefaultLanguage](#fetchDefaultLanguage) | `true`, `false`                                                                                                                                                                                                                                                                                | `false`               | Whether to fetch assets even for the default language                  | Framework                                                      |
 | [defaultFontLoading](#defaultFontLoading) | `true`, `false`                                                                                                                                                                                                                                                                                | `true`               | Whether to fetch default font faces                  | Framework                                                      |
 | [enableDefaultTooltips](#enableDefaultTooltips) | `true`, `false`                                                                                                                                                                                                                                                                                | `true`               | Whether to display default tooltips                     | Components (Icon, Button, RatingIndicator, etc.)                                                      |
@@ -219,6 +220,23 @@ Example:
 }
 </script>
 ```
+
+### loadBaseThemingCSSVariables
+<a name="loadBaseThemingCSSVariables"></a>
+
+This configuration option controls whether the framework should load the CSS variables from `@sap-theming/theming-base-content` package.
+
+Typically, you would not need to modify this setting. However, if your application provides its **own** instance or version of `@sap-theming/theming-base-content` and you prefer the framework **not** to load the built-in base theming CSS variables, you can set `loadBaseThemingCSSVariables` to `false`.
+
+Example:
+```html
+<script data-ui5-config type="application/json">
+{
+    "loadBaseThemingCSSVariables": false
+}
+</script>
+```
+
 ### defaultFontLoading
 <a name="defaultFontLoading"></a>
 

packages/base/src/InitialConfiguration.ts

@@ -24,6 +24,7 @@ type InitialConfig = {
 	formatSettings: FormatSettings,
 	fetchDefaultLanguage: boolean,
 	defaultFontLoading: boolean,
+	loadBaseThemingCSSVariables: boolean,
 	enableDefaultTooltips: boolean,
 };
 
@@ -40,6 +41,7 @@ let initialConfig: InitialConfig = {
 	formatSettings: {},
 	fetchDefaultLanguage: false,
 	defaultFontLoading: true,
+	loadBaseThemingCSSVariables: true,
 	enableDefaultTooltips: true,
 };
 
@@ -94,6 +96,11 @@ const getDefaultFontLoading = () => {
 	return initialConfig.defaultFontLoading;
 };
 
+const getLoadBaseThemingCSSVariables = () => {
+	initConfiguration();
+	return initialConfig.loadBaseThemingCSSVariables;
+};
+
 const getEnableDefaultTooltips = () => {
 	initConfiguration();
 	return initialConfig.enableDefaultTooltips;
@@ -255,6 +262,7 @@ export {
 	getTimezone,
 	getFormatSettings,
 	getDefaultFontLoading,
+	getLoadBaseThemingCSSVariables,
 	resetConfiguration,
 	getEnableDefaultTooltips,
 };

packages/base/src/config/Theme.ts

@@ -1,4 +1,4 @@
-import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
+import { getTheme as getConfiguredTheme, getLoadBaseThemingCSSVariables as getConfiguredLoadBaseThemingCSSVariables } from "../InitialConfiguration.js";
 import { reRenderAllUI5Elements } from "../Render.js";
 import applyTheme from "../theming/applyTheme.js";
 import getThemeDesignerTheme from "../theming/getThemeDesignerTheme.js";
@@ -7,6 +7,7 @@ import { boot, isBooted } from "../Boot.js";
 import { attachConfigurationReset } from "./ConfigurationReset.js";
 
 let curTheme: string | undefined;
+let loadBaseThemingCSSVariables: boolean | undefined;
 
 attachConfigurationReset(() => {
 	curTheme = undefined;
@@ -57,6 +58,36 @@ const getDefaultTheme = (): string => {
 	return DEFAULT_THEME;
 };
 
+/**
+ * Returns the current configuration for loading base theming CSS variables.
+ *
+ * @public
+ * @since 2.17.0
+ * @returns {boolean}
+ */
+const getLoadBaseThemingCSSVariables = () => {
+	if (loadBaseThemingCSSVariables === undefined) {
+		loadBaseThemingCSSVariables = getConfiguredLoadBaseThemingCSSVariables();
+	}
+
+	return loadBaseThemingCSSVariables;
+};
+
+/**
+ * Configures whether to load base theming CSS variables.
+ *
+ * - When set to `true` (default), base theming CSS variables are loaded.
+ * - When set to `false`, base theming CSS variables are not loaded.
+ *
+ * **Note:** This method should be called before the boot process.
+ *
+ * @public
+ * @since 2.17.0
+ */
+const setLoadBaseThemingCSSVariables = (value: boolean) => {
+	loadBaseThemingCSSVariables = value;
+};
+
 /**
  * Returns if the given theme name is the one currently applied.
  * @private
@@ -98,4 +129,6 @@ export {
 	isLegacyThemeFamily,
 	isLegacyThemeFamilyAsync,
 	getDefaultTheme,
+	getLoadBaseThemingCSSVariables,
+	setLoadBaseThemingCSSVariables,
 };

packages/base/src/theming/applyTheme.ts

@@ -5,6 +5,7 @@ import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoot.js";
 import { DEFAULT_THEME } from "../generated/AssetParameters.js";
 import { getCurrentRuntimeIndex } from "../Runtimes.js";
+import { getLoadBaseThemingCSSVariables } from "../config/Theme.js";
 
 // eslint-disable-next-line
 export let _lib = "ui5";
@@ -33,6 +34,10 @@ const loadComponentPackages = async (theme: string, externalThemeName?: string)
 	const registeredPackages = getRegisteredPackages();
 
 	const packagesStylesPromises = [...registeredPackages].map(async packageName => {
+		if (getLoadBaseThemingCSSVariables() !== true && packageName === `${BASE_THEME_PACKAGE}-raw`) {
+			return;
+		}
+
 		if (packageName === BASE_THEME_PACKAGE) {
 			return;
 		}

packages/compat/cypress/specs/Table.cy.tsx

@@ -509,7 +509,6 @@ describe("Table general interaction", () => {
 		cy.get("@popinChange")
 			.should(stub => {
 				expect(stub).to.have.been.calledTwice;
-				debugger
 				// @ts-ignore
 				expect(stub.args.slice(-1)[0][0].detail.poppedColumns.length).to.equal(2);
 			})