@openui5/sap.ui.documentation 1.102.2 → 1.104.0

package/src/sap/ui/documentation/sdk/controller/Code.controller.js

@@ -219,7 +219,7 @@ sap.ui.define([
 					sEditorTheme = "github";
 				} else if (sTheme === "sap_fiori_3") {
 					sEditorTheme = "crimson_editor";
-				} else if (sTheme === "sap_fiori_3_dark") {
+				} else if (sTheme === "sap_fiori_3_dark" || sTheme === "sap_horizon_dark") {
 					sEditorTheme = "clouds_midnight";
 				}
 				this._getCodeEditor().setColorTheme(sEditorTheme);

package/src/sap/ui/documentation/sdk/controller/ControlsMaster.controller.js

@@ -51,12 +51,12 @@ sap.ui.define([
 			_sStorageKey: "UI5_EXPLORED_LIST_SETTINGS_FROM_1_48",
 			_oViewSettings: {
 				densityMode: COMPACT,
-				themeActive: "sap_fiori_3",
+				themeActive: "sap_horizon",
 				rtl: false
 			},
 			_oDefaultSettings: {
 				densityMode: COMPACT,
-				themeActive: "sap_fiori_3",
+				themeActive: "sap_horizon",
 				rtl: false
 			},
 			_oListSettings: {

package/src/sap/ui/documentation/sdk/controller/Sample.controller.js

@@ -18,7 +18,6 @@ sap.ui.define([
 	"sap/ui/core/HTML",
 	"sap/m/library",
 	"sap/base/Log",
-	"sap/base/util/UriParameters",
 	"sap/ui/core/Fragment",
 	"sap/ui/documentation/sdk/util/Resources",
 	"./config/sampleForwardingConfig",
@@ -36,7 +35,6 @@ sap.ui.define([
 	HTML,
 	mobileLibrary,
 	Log,
-	UriParameters,
 	Fragment,
 	ResourcesUtil,
 	sampleForwardingConfig,
@@ -58,6 +56,7 @@ sap.ui.define([
 			/* =========================================================== */
 
 			onInit: function () {
+				var oConfiguration = sap.ui.getCore().getConfiguration();
 				SampleBaseController.prototype.onInit.call(this);
 
 				this.getRouter().getRoute("sample").attachPatternMatched(this._onSampleMatched, this);
@@ -65,7 +64,10 @@ sap.ui.define([
 				this.oModel = new JSONModel({
 					showNavButton : true,
 					showNewTab: false,
-					rtaLoaded: false
+					rtaLoaded: false,
+					density: this.getOwnerComponent().getContentDensityClass(),
+					rtl: oConfiguration.getRTL(),
+					theme: oConfiguration.getTheme()
 				});
 
 				this._sId = null; // Used to hold sample ID
@@ -91,11 +93,18 @@ sap.ui.define([
 			 * @private
 			 */
 			_onSampleMatched: function (event) {
+				var bShouldRedirect = new URLSearchParams(window.location.search).has("dk-sample-standalone");
+
 				this._sId = event.getParameter("arguments").sampleId;
 				this._sEntityId = event.getParameter("arguments").entityId;
 
 				this.byId("page").setBusy(true);
 
+				// check whether to open sample standalone
+				if (bShouldRedirect) {
+					this._handleRedirect();
+				}
+
 				if (sampleForwardingConfig[this._sId]) {
 					return this.router.navTo("sample", {
 						entityId: sampleForwardingConfig[this._sId].entityId,
@@ -203,6 +212,42 @@ sap.ui.define([
 					});
 			},
 
+			/**
+			 * Handles redirection from DemoKit to the sample page, rather than loading it as an iFrame.
+			 * The 'dk-sample-standalone' query parameter must be in the URI to take effect.
+			 * @private
+			 */
+			_handleRedirect : function () {
+				this._initIframeURL();
+				this._applySearchParamValueToIframeURL('sap-ui-theme', this._sDefaultSampleTheme);
+				this.sIFrameUrl += "&dk-sample-standalone";
+				URLHelper.redirect(this.sIFrameUrl, false);
+			},
+
+			/**
+			 * Initializes the URL of the sample itself, loaded either in an iFrame or standalone.
+			 * @private
+			 */
+			_initIframeURL : function () {
+				var sSampleOrigin = (window['sap-ui-documentation-config'] && window['sap-ui-documentation-config'].demoKitResourceOrigin) || "",
+					sSampleVersion = ResourcesUtil.getResourcesVersion(),
+					sSampleSearchParams = "";
+
+				// Assigning allowed query parameters from Demo Kit URL
+				ALLOWLIST_SAMPLES_SEARCH_PARAMS.forEach(function (oParam, index) {
+					if (new URL(document.location.href).searchParams.get(oParam)) {
+						sSampleSearchParams += (sSampleSearchParams === "" ? "?" : "&") + oParam + "=" + new URL(document.location.href).searchParams.get(oParam);
+					}
+				});
+
+				sSampleSearchParams = (sSampleSearchParams === "" ? "?" : sSampleSearchParams + "&") +
+					"sap-ui-xx-sample-id=" + this._sId
+					+ "&sap-ui-xx-sample-origin=" + sSampleOrigin + sSampleVersion
+					+ "&sap-ui-xx-dk-origin=" + window.location.origin;
+
+				this.sIFrameUrl = ResourcesUtil.getResourceOrigin() + "/resources/sap/ui/documentation/sdk/index.html" + sSampleSearchParams;
+			},
+
 			/**
 			 * Opens the View settings dialog
 			 * @public
@@ -218,19 +263,33 @@ sap.ui.define([
 				if (!this._oSettingsDialog) {
 					this._oSettingsDialog = sap.ui.xmlfragment("sample", "sap.ui.documentation.sdk.view.appSettingsDialog", this);
 
-					// oView = sap.ui.getCore().byId("__xmlview0") || sap.ui.getCore().byId("__container0");
 					this._oSettingsDialog.setModel(this._oMessageBundle, "i18n");
-					// oView.addDependent(this._oSettingsDialog);
 				}
 
-				this.loadSampleSettings().then(function() {
+				this.loadSampleSettings(this.applySampleSettings.bind(this)).then(function() {
 					this._oSettingsDialog.open();
 				}.bind(this)).catch(function(err) {
 					Log.error(err);
 				});
 			},
 
-			loadSampleSettings: function() {
+			applySampleSettings: function(eMessage) {
+				if (eMessage.data.type === "SETTINGS") {
+					var oThemeSelect = sap.ui.getCore().byId("sample--ThemeSelect");
+
+					// Theme select
+					oThemeSelect.setSelectedKey(eMessage.data.data.theme);
+
+					// RTL
+					sap.ui.getCore().byId("sample--RTLSwitch").setState(eMessage.data.data.RTL);
+
+					// Density mode select
+					sap.ui.getCore().byId("sample--DensityModeSwitch").setSelectedKey(this._presetDensity(eMessage.data.data.density, true));
+
+				}
+			},
+
+			loadSampleSettings: function(fnCallback) {
 				return new Promise(function (resolve, reject) {
 					var oIframe = this._oHtmlControl.getDomRef();
 					oIframe.contentWindow.postMessage({
@@ -241,21 +300,9 @@ sap.ui.define([
 					window.addEventListener("message", loadSettings);
 
 					function loadSettings(eMessage) {
-						if (eMessage.data.type === "SETTINGS") {
-							var oThemeSelect = sap.ui.getCore().byId("sample--ThemeSelect");
-
-						// Theme select
-						oThemeSelect.setSelectedKey(eMessage.data.data.theme);
-
-						// RTL
-						sap.ui.getCore().byId("sample--RTLSwitch").setState(eMessage.data.data.RTL);
-
-						// Density mode select
-						sap.ui.getCore().byId("sample--DensityModeSwitch").setSelectedKey(eMessage.data.data.density.slice(9).toLowerCase());
-
+						fnCallback(eMessage);
 						window.removeEventListener("message", loadSettings);
 						resolve();
-						}
 					}
 					setTimeout(function() {
 						reject("The sample iframe is not loading settings");
@@ -289,6 +336,21 @@ sap.ui.define([
 
 				// handle settings change
 				this._applyAppConfiguration(sTheme, sDensityMode, bRTL);
+				this._saveLocalSettings(sTheme, sDensityMode, bRTL);
+			},
+
+			_saveLocalSettings: function(sTheme, sDensityMode, bRTL) {
+				var sDensityMode = this._presetDensity(sDensityMode);
+				this.getView().getModel().setData({
+					theme: sTheme,
+					rtl: bRTL,
+					density: sDensityMode
+				}, true);
+
+			},
+
+			_presetDensity: function(sDensity, bToValue) {
+				return bToValue ? sDensity.slice(9).toLowerCase() : "sapUiSize" + capitalize(sDensity);
 			},
 
 			/**
@@ -299,12 +361,13 @@ sap.ui.define([
 			 * @private
 			 */
 			_applyAppConfiguration: function(sThemeActive, sDensityMode, bRTL){
-				var oIframe = this._oHtmlControl.getDomRef();
+				var oIframe = this._oHtmlControl.getDomRef(),
+					sDensityMode = this._presetDensity(sDensityMode);
 				oIframe.contentWindow.postMessage({
 					type: "SETTINGS",
 					reason: "set",
 					data: {
-						"density": "sapUiSize" + capitalize(sDensityMode),
+						"density": sDensityMode,
 						"RTL": bRTL,
 						"theme": sThemeActive
 					}
@@ -339,9 +402,21 @@ sap.ui.define([
 				this.getRouter().navTo("apiId", {id: this.entityId});
 			},
 
-			onNewTab : function () {
-				this._applySearchParamValueToIframeURL('sap-ui-theme', this._sDefaultSampleTheme);
-				URLHelper.redirect(this.sIFrameUrl, true);
+			onNewTab: function () {
+				if (this.oModel.getProperty("/iframe")) {
+					URLHelper.redirect(this.sIFrameUrl, true);
+					return;
+				}
+				// this._applySearchParamValueToIframeURL('sap-ui-theme', this._sDefaultSampleTheme);
+				this.loadSampleSettings(function(eMessage){
+					this._applySearchParamValueToIframeURL('sap-ui-theme', eMessage.data.data.theme);
+					this._applySearchParamValueToIframeURL('sap-ui-rtl', eMessage.data.data.RTL);
+					this._applySearchParamValueToIframeURL('sap-ui-density', eMessage.data.data.density);
+				}.bind(this)).then(function(){
+					URLHelper.redirect(this.sIFrameUrl, true);
+				}.bind(this)).catch(function(err){
+					Log.error(err);
+				});
 			},
 
 			onPreviousSample: function (oEvent) {
@@ -401,7 +476,7 @@ sap.ui.define([
 
 			_createIframe : function () {
 				return new Promise(function (resolve, reject) {
-					var sSampleId = this._sId,
+					var sSampleId,
 					sIframePath = "",
 					rExtractFilename = /\/([^\/]*)$/,// extracts everything after the last slash (e.g. some/path/index.html -> index.html)
 					rStripUI5Ending = /\..+$/,// removes everything after the first dot in the filename (e.g. someFile.qunit.html -> .qunit.html)
@@ -412,31 +487,16 @@ sap.ui.define([
 
 					this.fResolve = resolve;
 					this.fReject = reject;
-					var sSampleOrigin = (window['sap-ui-documentation-config'] && window['sap-ui-documentation-config'].demoKitResourceOrigin) || "",
-						sSampleVersion = ResourcesUtil.getResourcesVersion(),
-						sSampleSearchParams = "";
-
-					// Assigning allowed query parameters from Demo Kit URL
-					ALLOWLIST_SAMPLES_SEARCH_PARAMS.forEach(function(oParam, index){
-						if (new URL(document.location.href).searchParams.get(oParam)){
-							sSampleSearchParams += (sSampleSearchParams === "" ? "?" : "&") + oParam + "=" + new URL(document.location.href).searchParams.get(oParam);
-						}
-					});
-
-					sSampleSearchParams = (sSampleSearchParams === "" ? "?" : sSampleSearchParams + "&") +
-					"sap-ui-xx-sample-id=" + sSampleId
-					+ "&sap-ui-xx-sample-origin=" + sSampleOrigin + sSampleVersion
-					+ "&sap-ui-xx-dk-origin=" + window.location.origin;
 
-					this.sIFrameUrl = ResourcesUtil.getResourceOrigin() + "/resources/sap/ui/documentation/sdk/index.html" + sSampleSearchParams;
+					this._initIframeURL();
 
 					if (this._oHtmlControl) {
 						this._oHtmlControl.destroy();
 					}
 
 					var fnMessage =  function (eMessage) {
+						var oSettingsData = this.getView().getModel().getData();
 						if (eMessage.data.type === "INIT") {
-							var oConfiguration = sap.ui.getCore().getConfiguration();
 							if (eMessage.data.config && eMessage.data.config.sample && eMessage.data.config.sample.iframe) {
 								sSampleId = this._sId;
 								vIframe = eMessage.data.config.sample.iframe;
@@ -458,9 +518,9 @@ sap.ui.define([
 								type: "SETTINGS",
 								reason: "set",
 								data: {
-									"density": this.getOwnerComponent().getContentDensityClass(),
-									"RTL": oConfiguration.getRTL(),
-									"theme": oConfiguration.getTheme()
+									"density": oSettingsData.density,
+									"RTL": oSettingsData.rtl,
+									"theme": oSettingsData.theme
 								}
 							}, this.getOwnerComponent()._sSampleIframeOrigin);
 							this.fResolve(eMessage.data.config.sample);

package/src/sap/ui/documentation/sdk/controller/TopicDetail.controller.js

@@ -342,7 +342,7 @@ sap.ui.define([
 				});
 
 				if (window.hljs) {
-					document.querySelectorAll('pre').forEach(function(block) {
+					document.querySelectorAll('pre:not([class*="lines"])').forEach(function(block) {
 						window.hljs.highlightBlock(block);
 					});
 				}

package/src/sap/ui/documentation/sdk/controller/VersionNotFound.controller.js

@@ -7,12 +7,12 @@
 sap.ui.define([
 	"./BaseController",
 	"sap/ui/thirdparty/jquery",
-	"sap/ui/thirdparty/URI",
+	"sap/ui/documentation/sdk/controller/util/URLUtil",
 	"sap/m/library"
 ], function (
 	BaseController,
 	jQuery,
-	URI,
+	DemokitURLUtil,
 	mLib
 ) {
 	"use strict";
@@ -44,22 +44,29 @@ sap.ui.define([
 		_onVersionInfo: function (oVersionInfo) {
 			var oMessagePage = this.getView().byId("page"),
 				oReadMoreBtn = this.getView().byId("readMoreButton"),
-				reVersion = new RegExp("^([0-9]+)(?:\\.([0-9]+)(?:\\.([0-9]+))?)?(.+)?"),
-				oURI = new URI(document.location.href),
-				aSegments = oURI.segment(),
-				sVersion,
+				sUrl = document.location.href,
+				sRedirectUrl,
+				sVersion = DemokitURLUtil.parseVersion(sUrl),
 				isRemoved = false;
 
 			oMessagePage.setBusy(false);
 
-			for (var i = 0, l = aSegments.length; i < l; i++) {
-				if (reVersion.test(aSegments[i])) {
-					sVersion = aSegments[i];
-					break;
-				}
+			isRemoved = this._isVersionRemoved(oVersionInfo, sVersion);
+
+			if (isRemoved && DemokitURLUtil.requestsDemokitView(sUrl)) {
+				// redirect to the latest (version-less) URL
+				sRedirectUrl = DemokitURLUtil.removeVersion(sUrl);
+				mLib.URLHelper.redirect(sRedirectUrl);
+				return;
 			}
 
-			isRemoved = this._isVersionRemoved(oVersionInfo, sVersion);
+			if (DemokitURLUtil.hasSEOOptimizedFormat(sUrl)) {
+				// 404 may be due to server not supporting SEO-optimized urls =>
+				// redirect to the corresponding non-optimized URL
+				sRedirectUrl = DemokitURLUtil.convertToNonSEOFormat(sUrl);
+				mLib.URLHelper.redirect(sRedirectUrl);
+				return;
+			}
 
 			if (isRemoved) {
 				// show removed message

package/src/sap/ui/documentation/sdk/controller/util/ToolsInfo.js

@@ -58,7 +58,8 @@ sap.ui.define([],
 			{
 				"id": "liveEditor",
 				"text": "Live Editor",
-				"href": "liveEditor"
+				"href": "liveEditor",
+				"hideOnPhone": true
 			},
 			{
 				"id": "fioriTools",
@@ -68,12 +69,15 @@ sap.ui.define([],
 			{
 				"id": "flexibleProgrammingModelExplorer",
 				"text": "Flexible Programming Model Explorer",
-				"href": "https://sapui5.hana.ondemand.com/test-resources/sap/fe/core/fpmExplorer/index.html#/overview/introduction"
+				"href": "test-resources/sap/fe/core/fpmExplorer/index.html#/overview/introduction",
+				"isDistributionScope": true,
+				"hideOnPhone": true
 			},
 			{
 				"id": "accessibilityGuide",
 				"text": "Accessibility Guide",
-				"href": "test-resources/sap/m/demokit/accessibilityGuide/webapp/index.html"
+				"href": "test-resources/sap/m/demokit/accessibilityGuide/webapp/index.html",
+				"hideOnPhone": true
 			}
 		];
 

package/src/sap/ui/documentation/sdk/controller/util/URLUtil.js

@@ -0,0 +1,117 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides reuse functionality for parsing and manipulating demokit urls
+sap.ui.define(["sap/ui/thirdparty/URI"], function(URI) {
+
+	"use strict";
+
+	var reVersion = new RegExp("^([0-9]+)(?:\\.([0-9]+)(?:\\.([0-9]+))?)?(.+)?"),
+		// compiling a single RegExp seems a less readable option
+		// so bellow are the patterns for individual Demokit sections
+		aDemokitPaths = [
+			/^\/controls/,
+			/^\/group/,
+			/^\/entity/,
+			/^\/sample/,
+			/^\/downloads/,
+			/^\/api/,
+			/^\/topic/,
+			/^\/liveEditor/,
+			/^\/sitemap\//,
+			/\/sitemap$/,
+			/^\/demoapps/,
+			/^\/tools/,
+			/^\/news\//,
+			/\/news$/,
+			/^\/search\//,
+			/^\/license[.]txt/,
+			/^\/docs\/guide/,
+			/^\/docs\/api\/symbols/
+		];
+
+	function pathMatchesDemokitRoute (path) {
+		return aDemokitPaths.some(function(regexp) {
+			return regexp.test(path);
+		});
+	}
+
+	return {
+		parseVersion: function(sUrl) {
+			var oURI = new URI(sUrl),
+				aSegments = oURI.segment(),
+				sVersion;
+
+			for (var i = 0, l = aSegments.length; i < l; i++) {
+				if (reVersion.test(aSegments[i])) {
+					sVersion = aSegments[i];
+					break;
+				}
+				if (pathMatchesDemokitRoute("/" + aSegments[i] + "/")) {
+					break; // version not found
+				}
+			}
+			return sVersion;
+		},
+
+		removeVersion: function(sUrl) {
+			var oURI = new URI(sUrl),
+				sPath = oURI.path(),
+				sVersion = this.parseVersion(sUrl);
+
+			// remove the version string from <code>sPath</code>
+			if (sVersion) {
+				sPath = sPath.substring(sPath.indexOf(sVersion) + sVersion.length);
+				oURI.path(sPath);
+				return oURI.href();
+			}
+			return sUrl;
+		},
+
+		requestsDemokitView: function(sUrl) {
+			if (this.hasSEOOptimizedFormat(sUrl)) {
+				return true;
+			}
+
+			return pathMatchesDemokitRoute(new URI(sUrl).fragment());
+		},
+
+		hasSEOOptimizedFormat: function(sUrl) {
+			var sPath = new URI(sUrl).path();
+
+			if (pathMatchesDemokitRoute(sPath)) {
+				return true;
+			}
+
+			sUrl = this.removeVersion(sUrl);
+			sPath = new URI(sUrl).path();
+			return pathMatchesDemokitRoute(sPath);
+		},
+
+		convertToNonSEOFormat: function(sUrl) {
+			var oURI = new URI(sUrl),
+				sViewPath = new URI(this.removeVersion(sUrl)).path(),
+				sFragment = oURI.fragment(),
+				sNewPath,
+				sNewFragment;
+
+			// move the <code>sViewPath</code> from the URL path into the URL fragment:
+			sNewPath = oURI.path().replace(sViewPath, "/");
+			sNewFragment = sViewPath;
+
+			if (sFragment) {
+				// preserve any existing fragment part by appending at the end
+				sNewFragment += encodeURIComponent("#") + sFragment;
+			}
+
+			oURI.path(sNewPath);
+			oURI.fragment(sNewFragment);
+
+			return oURI.href();
+		}
+	};
+
+});

package/src/sap/ui/documentation/sdk/css/style.css

@@ -219,8 +219,10 @@ html:not(.sapUiMedia-StdExt-Phone) .sapUiDocumentationFooter {
 	height: 3rem;
 }
 
-.sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect,
-.sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect .sapMSltArrow {
+.sapUiTheme-sap_fiori_3 .sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect,
+.sapUiTheme-sap_fiori_3_dark .sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect,
+.sapUiTheme-sap_fiori_3 .sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect .sapMSltArrow,
+.sapUiTheme-sap_fiori_3_dark .sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect .sapMSltArrow {
 	border:none;
 	background: #2f3c48;
 }
@@ -246,8 +248,10 @@ html:not(.sapUiMedia-StdExt-Phone) .sapUiDocumentationFooter {
 }
 
 /* Menu Select`s hover bakground */
-.sapContrast.sapUiDocumentationSelect.sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover,
-.sapContrast .sapUiDocumentationSelect.sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover {
+.sapUiTheme-sap_fiori_3 .sapContrast.sapUiDocumentationSelect.sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover,
+.sapUiTheme-sap_fiori_3_dark .sapContrast.sapUiDocumentationSelect.sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover,
+.sapUiTheme-sap_fiori_3 .sapContrast .sapUiDocumentationSelect.sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover,
+.sapUiTheme-sap_fiori_3_dark .sapContrast .sapUiDocumentationSelect.sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover {
 	background: #2f3c48;
 }
 
@@ -275,7 +279,8 @@ html.sap-desktop .sapContrast.sapMSlt.sapUiDocumentationSelect:not(.sapMSltExpan
 }
 
 /* Menu Select`s label */
-.sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect .sapMSltLabel {
+.sapUiTheme-sap_fiori_3 .sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect .sapMSltLabel,
+.sapUiTheme-sap_fiori_3_dark .sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect .sapMSltLabel {
 	color: #91c8f6;
 	font-size: 1rem;
 	border-bottom: 0.1625rem solid;
@@ -290,7 +295,8 @@ html.sap-desktop .sapContrast.sapMSlt.sapUiDocumentationSelect:not(.sapMSltExpan
 }
 
 /* Menu Select`s arrow color on press */
-.sapTntToolHeader .sapMSlt.sapMSltPressed > .sapMSltArrow::before {
+:not(.sapUiTheme-sap_fiori_3) .sapTntToolHeader .sapMSlt.sapMSltPressed > .sapMSltArrow::before,
+:not(.sapUiTheme-sap_fiori_3_dark) .sapTntToolHeader .sapMSlt.sapMSltPressed > .sapMSltArrow::before {
 	color: #cae4fb;
 }
 
@@ -981,11 +987,13 @@ html.sapUiTheme-sap_belize_hcw .sapUiJSD a {
 	color: #000000;
 }
 
-html:not(.sapUiTheme-sap_belize_hcb):not(.sapUiTheme-sap_belize_hcw):not(.sapUiTheme-sap_fiori_3_hcb):not(.sapUiTheme-sap_fiori_3_hcw) .sapUiJSD a {
+html:not(.sapUiTheme-sap_belize_hcb):not(.sapUiTheme-sap_belize_hcw):not(.sapUiTheme-sap_fiori_3_hcb):not(.sapUiTheme-sap_fiori_3_hcw)
+.sapUiJSD a {
 	color: #0070b1;
 }
 
-html:not(.sapUiTheme-sap_belize_hcb):not(.sapUiTheme-sap_belize_hcw):not(.sapUiTheme-sap_fiori_3_hcb):not(.sapUiTheme-sap_fiori_3_hcw) .sapUiJSD a,
+html:not(.sapUiTheme-sap_belize_hcb):not(.sapUiTheme-sap_belize_hcw):not(.sapUiTheme-sap_fiori_3_hcb):not(.sapUiTheme-sap_fiori_3_hcw):not(.sapUiTheme-sap_horizon):not(.sapUiTheme-sap_horizon_dark)
+.sapUiJSD a,
 html.sapUiTheme-sap_fiori_3_hcb .sapUiJSD a:hover,
 html.sapUiTheme-sap_fiori_3_hcw .sapUiJSD a:hover,
 html.sapUiTheme-sap_belize_hcb .sapUiJSD a:hover,
@@ -1800,11 +1808,6 @@ html[dir="rtl"] .sapUiDemoKitTreeItemIcon {
 	background: #ffffff;
 }
 
-.sapUiTheme-sap_fiori_3 .sapUiDemokit .sapUiHomePage .sapMTitleStyleH1,
-.sapUiTheme-sap_fiori_3 .sapUiDemokit .sapUiDemoApps .sapMTitleStyleH1 {
-	font-size: 1.625rem;
-}
-
 .sapUiTheme-sap_fiori_3 .sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect,
 .sapUiTheme-sap_fiori_3 .sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect:hover,
 .sapUiTheme-sap_fiori_3 .sapTntToolHeader .sapMSlt.menuSelect.sapUiDocumentationSelect .sapMSltArrow,
@@ -1839,4 +1842,10 @@ html[dir="rtl"] .sapUiDemoKitTreeItemIcon {
 .sapUiForcedHidden .editorSrcWindow {
 	width: 0;
 	height: 0;
+}
+
+/* override default 3rem on desktop */
+.sapUiDemokit .sapUiHomePage .sapMTitleStyleH1,
+.sapUiDemokit .sapUiDemoApps .sapMTitleStyleH1 {
+	font-size: 1.625rem;
 }