refactor(theming): remove Belize theme (#8519)

SAP Belize theme was deprecated as of version 1.22.0. With this change, we are performing cleanup for the deprecated theme.

BREAKING CHANGE: Remove SAP Belize theme

Related to #8461

docs/2-advanced/01-configuration.md

@@ -63,9 +63,6 @@ setTheme(getDefaultTheme());
 
 The following themes are deprecated and no longer maintained - out of maintenance and left for compatibility only. The themes will be removed in the next major version.
 We recommend using `Horizon` (sap_horizon) and `Quartz` (sap_fiori_3) theme families.
-- The `sap_belize` is known as `Belize` [deprecated since 1.22].
-- The `sap_belize_hcb` is known as `High Contrast Black` [deprecated since 1.22].
-- The `sap_belize_hcw` is known as `High Contrast White` [deprecated since 1.22].
 
 ### language
 <a name="language"></a>
@@ -248,7 +245,7 @@ Example:
 ```html
 <script data-ui5-config type="application/json">
 {
-	"theme": "sap_belize_hcb",
+	"theme": "sap_horizon_hcb",
 	"language": "ja",
 	"animationMode": "none",
 	"calendarType": "Japanese",

packages/base/bundle.esm.js

@@ -13,7 +13,7 @@ import "./test/elements/Child.js";
 import "./test/elements/WithComplexTemplate.js";
 import "./test/elements/GenericExt.js";
 
-// Test themes - CSS Vars for the sap_fiori_3, sap_fiori_3_dark, sap_belize and sap_belize_hcb themes
+// Test themes - CSS Vars for the sap_fiori_3, sap_fiori_3_dark themes
 import "./test/assets/Themes.js";
 
 // used in test pages

packages/base/src/asset-registries/Icons.ts

@@ -6,7 +6,7 @@ import { getI18nBundle } from "../i18nBundle.js";
 import type { I18nText } from "../i18nBundle.js";
 import type { TemplateFunction } from "../renderer/executeTemplate.js";
 
-const DEFAULT_THEME_FAMILY = "legacy"; // includes sap_belize_* and sap_fiori_*
+const DEFAULT_THEME_FAMILY = "legacy"; // includes sap_fiori_*
 
 type IconLoader = (collectionName: string) => Promise<CollectionData | Array<CollectionData>>;
 

packages/base/src/asset-registries/util/getIconCollectionByTheme.ts

@@ -7,9 +7,9 @@ import { getIconCollectionForTheme } from "./IconCollectionsByTheme.js";
 /**
  * Returns the effective theme dependant icon collection:
  *
- * - "no collection" resolves to "SAP-icons-v4" in "Quartz" and "Belize", and to "SAP-icons-v5" in "Horizon"
- * - "tnt" (and its alias "SAP-icons-TNT") resolves to "tnt-v2" in "Quartz", "Belize", and resolves to "tnt-v3" in "Horizon"
- * - "business-suite" (and its alias "BusinessSuiteInAppSymbols") resolves to "business-suite-v1" in "Quartz", "Belize", and resolves to "business-suite-v2" in "Horizon"
+ * - "no collection" resolves to "SAP-icons-v4" in "Quartz" and to "SAP-icons-v5" in "Horizon"
+ * - "tnt" (and its alias "SAP-icons-TNT") resolves to "tnt-v2" in "Quartz" and resolves to "tnt-v3" in "Horizon"
+ * - "business-suite" (and its alias "BusinessSuiteInAppSymbols") resolves to "business-suite-v1" in "Quartz" and resolves to "business-suite-v2" in "Horizon"
  *
  * @param { IconCollection } collectionName
  * @returns { IconCollection } the effective collection name

packages/base/src/config/Theme.ts

@@ -64,7 +64,7 @@ const isTheme = (theme: string) => {
 };
 
 /**
- * Returns if the currently set theme is part of legacy theme families ("sap_belize" or "sap_fiori_3").
+ * Returns if the currently set theme is part of legacy theme families ("sap_fiori_3").
  * **Note**: in addition, the method checks the base theme of a custom theme, built via the ThemeDesigner.
  *
  * @private

packages/base/test/assets/Themes.js

@@ -6,7 +6,6 @@ const defaultTheme = {
 	fileName: "",
 };
 
-
 const fiori3 = {
 	content: `:root{ --var1: red; }`,
 	packageName: "",
@@ -19,24 +18,6 @@ const fiori3Dark = {
 	fileName: "",
 };
 
-const belize = {
-	content: `:root{ --var1: blue; }`,
-	packageName: "",
-	fileName: "",
-};
-
-const belizeHcb = {
-	content: `:root{ --var1: orange; }`,
-	packageName: "",
-	fileName: "",
-};
-
-const belizeHcw = {
-	content: `:root{ --var1: orange; }`,
-	packageName: "",
-	fileName: "",
-};
-
 const fiori3Hcb = {
 	content: `:root{ --var1: yellow; }`,
 	packageName: "",
@@ -52,8 +33,5 @@ const fiori3Hcw = {
 registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_horizon", () => defaultTheme);
 registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3", () => fiori3);
 registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3_dark", () => fiori3Dark);
-registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_belize", () => belize);
-registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_belize_hcb", () => belizeHcb);
-registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_belize_hcw", () => belizeHcw);
 registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3_hcb", () => fiori3Hcb);
 registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3_hcw", () => fiori3Hcw);

packages/base/test/pages/ConfigurationScript.html

@@ -31,7 +31,7 @@
                     }
                 ]
             },
-            "theme": "sap_belize_hcb",
+            "theme": "sap_horizon_hcb",
             "noConflict": {
                 "events": ["selection-change", "header-click"]
             }

packages/base/test/specs/ConfigurationScript.spec.js

@@ -34,7 +34,7 @@ describe("Configuration script has effect", () => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
 			done(config.getTheme());
 		});
-		assert.strictEqual(res, 'sap_belize_hcb', "Theme is HCB");
+		assert.strictEqual(res, 'sap_horizon_hcb', "Theme is HCB");
 	});
 
 	it("Tests that noConflict is applied", async () => {

packages/base/test/specs/ConfigurationURL.spec.js

@@ -2,7 +2,7 @@ import { assert } from "chai";
 
 describe("Some settings can be set via SAP UI URL params", () => {
 	beforeEach(async () => {
-		await browser.url("test/pages/Configuration.html?sap-ui-rtl=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_belize_hcb@https://example.com&sap-ui-animationMode=basic");
+		await browser.url("test/pages/Configuration.html?sap-ui-rtl=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_horizon_hcb@https://example.com&sap-ui-animationMode=basic");
 	});
 
 	it("Tests that language is applied", async () => {
@@ -26,7 +26,7 @@ describe("Some settings can be set via SAP UI URL params", () => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
 			done(config.getTheme());
 		});
-		assert.strictEqual(res, 'sap_belize_hcb', "Theme is HCB");
+		assert.strictEqual(res, 'sap_horizon_hcb', "Theme is HCB");
 	});
 
 	it("Tests that theme root is applied", async () => {
@@ -37,7 +37,7 @@ describe("Some settings can be set via SAP UI URL params", () => {
 		});
 		assert.strictEqual(res, 'https://example.com/UI5/', "Theme root is https://example.com/UI5");
 
-		await browser.url("test/pages/Configuration.html?sap-ui-theme=sap_belize_hcb@https://another-example.com");
+		await browser.url("test/pages/Configuration.html?sap-ui-theme=sap_horizon_hcb@https://another-example.com");
 
 		res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
@@ -49,7 +49,7 @@ describe("Some settings can be set via SAP UI URL params", () => {
 
 		assert.strictEqual(res, `${location.origin}/UI5/`, `Theme root is ${location.origin}/UI5/`);
 
-		await browser.url("test/pages/Configuration.html?sap-ui-theme=sap_belize_hcb@./test");
+		await browser.url("test/pages/Configuration.html?sap-ui-theme=sap_horizon_hcb@./test");
 
 		res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;

packages/base/test/specs/Theming.spec.js

@@ -18,7 +18,7 @@ describe("Theming works", () => {
 	});
 
 	it("Tests that theme parameters are changed on theme change", async () => {
-		const newTheme = 'sap_belize_hcb';
+		const newTheme = 'sap_fiori_3_hcb';
 
 		const res = await browser.executeAsync( async (newTheme, done) => {
 			const bundle = window['sap-ui-webcomponents-bundle'];
@@ -27,7 +27,7 @@ describe("Theming works", () => {
 			await config.setTheme(newTheme);
 
 			const style = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === `${dataPropAttr}|@ui5/webcomponents-base-test`).cssRules[0].cssText
-			const varsFound = style && style.includes("--var1: orange"); // see test/assets/Themes.js
+			const varsFound = style && style.includes("--var1: yellow"); // see test/assets/Themes.js
 			done(varsFound);
 		}, newTheme);
 

packages/fiori/test/pages/MediaGallery.html

@@ -21,9 +21,6 @@
 				<ui5-option value="sap_fiori_3_dark">Fiori 3 Dark</ui5-option>
 				<ui5-option value="sap_fiori_3_hcb">Fiori 3 HCB</ui5-option>
 				<ui5-option value="sap_fiori_3_hcw">Fiori 3 HCW</ui5-option>
-				<ui5-option value="sap_belize">Belize</ui5-option>
-				<ui5-option value="sap_belize_hcb">Belize HCB</ui5-option>
-				<ui5-option value="sap_belize_hcw">Belize HCW</ui5-option>
 				<ui5-option value="sap_horizon">Horizon</ui5-option>
 			</ui5-select>
 		</div>

packages/fiori/test/shared-config.js

@@ -1,2 +1,2 @@
 window['sap-ui-config'] = window['sap-ui-config'] || {};
-window['sap-ui-config'].theme = 'sap_belize';
+window['sap-ui-config'].theme = 'sap_horizon_hcb';

packages/main/src/Badge.ts

@@ -91,8 +91,6 @@ class Badge extends UI5Element {
 	 * Defines the color scheme of the component.
 	 * There are 10 predefined schemes.
 	 * To use one you can set a number from `"1"` to `"10"`. The `colorScheme` `"1"` will be set by default.
-	 *
-	 * **Note:** Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.
 	 * @default "1"
 	 * @public
 	 */