@openui5/sap.ui.rta 1.126.1 → 1.128.0

package/src/sap/ui/rta/plugin/additionalElements/CommandBuilder.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * Helper object to build the RTA commands resulting from the AdditionalElements Plugin
 	 *
 	 * @author SAP SE
-	 * @version 1.126.1
+	 * @version 1.128.0
 	 * @private
 	 * @since 1.94
 	 */

package/src/sap/ui/rta/plugin/iframe/AddIFrame.js

@@ -119,7 +119,7 @@ sap.ui.define([
 	 * @class The AddIFrame allows trigger AddIFrame operations on the overlay.
 	 * @extends sap.ui.rta.plugin.BaseCreate
 	 * @author SAP SE
-	 * @version 1.126.1
+	 * @version 1.128.0
 	 * @constructor
 	 * @private
 	 * @since 1.75
@@ -177,7 +177,7 @@ sap.ui.define([
 		});
 		await IconPool.fontLoaded("tnt");
 
-		var iBaseRank = 140;
+		var iBaseRank = this.getRank("CTX_CREATE_SIBLING_IFRAME");
 		var aMenuItems = [];
 
 		var bIsSibling = true;
@@ -191,18 +191,17 @@ sap.ui.define([
 				}, getCommonProperties.call(this));
 
 				aMenuItems.push(this.enhanceItemWithResponsibleElement(oSiblingMenuItem, aElementOverlays));
-				iBaseRank += 10;
 			}
 		}
 
 		bIsSibling = false;
 		if (this.isAvailable(aElementOverlays, bIsSibling)) {
 			aMenuItems = aMenuItems.concat(this.getCreateActions(bIsSibling, aElementOverlays[0])
-			.map(function(oAction, iIndex) {
+			.map(function(oAction) {
 				var oParentMenuItem = Object.assign({
 					action: oAction,
 					id: `CTX_CREATE_CHILD_IFRAME_${oAction.aggregation.toUpperCase()}`,
-					rank: iBaseRank + 10 * iIndex
+					rank: ++iBaseRank
 				}, getCommonProperties.call(this, oAction.aggregation));
 
 				return this.enhanceItemWithResponsibleElement(oParentMenuItem, aElementOverlays);

package/src/sap/ui/rta/plugin/iframe/AddIFrameDialog.fragment.xml

@@ -63,9 +63,13 @@
 									<Label id="sapUiRtaAddIFrameDialog_WidthLabel" class="sapUiRtaAddIFrameDialogWidthLabel" labelFor="sapUiRtaAddIFrameDialog_WidthInput"
 										text="{dialogInfo>/text/widthLabel}">
 									</Label>
-									<Input id="sapUiRtaAddIFrameDialog_WidthInput" class="sapUiRtaAddIFrameDialogWidthInput"
+									<Input
+										id="sapUiRtaAddIFrameDialog_WidthInput"
+										class="sapUiRtaAddIFrameDialogWidthInput"
 										value="{path: 'dialogInfo>/frameWidth/value', type: 'FloatType', constraints: {minimum: 1}}"
-										valueState="{dialogInfo>/frameWidth/valueState}"/>
+										valueState="{dialogInfo>/frameWidth/valueState}"
+										valueStateText="{dialogInfo>/text/dimensionsErrorText}"
+									/>
 									<Select
 										id="sapUiRtaAddIFrameDialog_WidthUnit"
 										class="sapUiRtaAddIFrameDialogWidthUnit"
@@ -89,9 +93,13 @@
 								<form:content>
 									<Label id="sapUiRtaAddIFrameDialog_HeightLabel" class="sapUiRtaAddIFrameDialogHeightLabel" labelFor="sapUiRtaAddIFrameDialog_HeightInput"
 										text="{dialogInfo>/text/heightLabel}"/>
-									<Input id="sapUiRtaAddIFrameDialog_HeightInput" class="sapUiRtaAddIFrameDialogHeightInput"
+									<Input
+										id="sapUiRtaAddIFrameDialog_HeightInput"
+										class="sapUiRtaAddIFrameDialogHeightInput"
 										value="{path: 'dialogInfo>/frameHeight/value', type: 'FloatType', constraints: {minimum: 1}}"
-										valueState="{dialogInfo>/frameHeight/valueState}"/>
+										valueState="{dialogInfo>/frameHeight/valueState}"
+										valueStateText="{dialogInfo>/text/dimensionsErrorText}"
+									/>
 									<Select
 										id="sapUiRtaAddIFrameDialog_HeightUnit"
 										class="sapUiRtaAddIFrameDialogHeightUnit"
@@ -152,8 +160,15 @@
 									<items>
 										<ColumnListItem type="Active" press="onParameterPress">
 											<cells>
-												<Text text="{dialogInfo>label}"/>
-												<Text text="{dialogInfo>value}" wrapping="false"/>
+												<Text
+													text="{dialogInfo>label}"
+													tooltip="{dialogInfo>label}"
+												/>
+												<Text
+													text="{dialogInfo>value}"
+													tooltip="{=${dialogInfo>value}.toString()}"
+													wrapping="false"
+												/>
 											</cells>
 										</ColumnListItem>
 									</items>

package/src/sap/ui/rta/plugin/iframe/AddIFrameDialog.js

@@ -42,6 +42,7 @@ sap.ui.define([
 		widthUnitLabel: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_WIDTH_UNITLABEL"),
 		heightLabel: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_HEIGHT_LABEL"),
 		heightUnitLabel: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_HEIGHT_UNITLABEL"),
+		dimensionsErrorText: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_DIMENSIONS_ERROR"),
 		saveText: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_BUTTON_SAVE"),
 		cancelText: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_BUTTON_CANCEL"),
 		previewUrlLabel: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_PREVIEW_URL_LABEL"),
@@ -158,7 +159,7 @@ sap.ui.define([
 	 * @class Context - Dialog for IFrame settings in Runtime Authoring
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.126.1
+	 * @version 1.128.0
 	 * @constructor
 	 * @private
 	 * @since 1.78
@@ -261,37 +262,48 @@ sap.ui.define([
 	 * @param {sap.ui.base.ManagedObject} oObject - Managed object to extract the context from
 	 * @return {Promise<object[]>} Resolving to parameters array for URL builder exposed by the Add IFrame dialog
 	 */
-	AddIFrameDialog.buildUrlBuilderParametersFor = function(oObject) {
-		return getContainerUserInfo()
-		.then(function(oUserInfo) {
-			var oUserParameters = Object.keys(oUserInfo)
-			.map(function(sUserSetting) {
-				return {
-					label: sUserSetting,
-					key: `{$user>/${sUserSetting}}`,
-					value: oUserInfo[sUserSetting]
+	AddIFrameDialog.buildUrlBuilderParametersFor = async function(oObject) {
+		const oUserInfo = await getContainerUserInfo();
+		const oUserParameters = Object.keys(oUserInfo)
+		.map(function(sUserSetting) {
+			return {
+				label: sUserSetting,
+				key: `{$user>/${sUserSetting}}`,
+				value: oUserInfo[sUserSetting]
+			};
+		});
+		const oBindingContext = oObject.getBindingContext();
+		let aDefaultBoundObjectParameters;
+		if (oBindingContext) {
+			const oDefaultBoundObject = oBindingContext.getObject();
+			aDefaultBoundObjectParameters = Object.keys(oDefaultBoundObject)
+			.filter(function(sProperty) {
+				return typeof oDefaultBoundObject[sProperty] !== "object";
+			})
+			.map(async function(sProperty) {
+				const oModel = oBindingContext.getModel();
+				const oReturn = {
+					label: sProperty,
+					key: `{${sProperty}}`,
+					value: oDefaultBoundObject[sProperty]
 				};
+				// V4 Models automatically adjust values for certain data types based on localization settings,
+				// which can make them different from what we display on the table of parameters. We get the data
+				// type here to add the parameter to the URL later with the same value that was displayed on the table.
+				if (oModel.isA("sap.ui.model.odata.v4.ODataModel")) {
+					const oMetaModel = oModel.getMetaModel();
+					const sMetaPath = oMetaModel.getMetaPath(oBindingContext.getPath());
+					const sType = await oMetaModel.requestObject(`${sMetaPath}/${sProperty}/$Type`);
+					if (sType) {
+						oReturn.type = sType;
+					}
+				}
+				return oReturn;
 			});
-			var oBindingContext = oObject.getBindingContext();
-			var oDefaultBoundObjectParameters;
-			if (oBindingContext) {
-				var oDefaultBoundObject = oBindingContext.getObject();
-				oDefaultBoundObjectParameters = Object.keys(oDefaultBoundObject)
-				.filter(function(sProperty) {
-					return typeof oDefaultBoundObject[sProperty] !== "object";
-				})
-				.map(function(sProperty) {
-					return {
-						label: sProperty,
-						key: `{${sProperty}}`,
-						value: oDefaultBoundObject[sProperty]
-					};
-				});
-			} else {
-				oDefaultBoundObjectParameters = [];
-			}
-			return oUserParameters.concat(oDefaultBoundObjectParameters);
-		});
+		} else {
+			aDefaultBoundObjectParameters = [];
+		}
+		return oUserParameters.concat(await Promise.all(aDefaultBoundObjectParameters));
 	};
 
 	return AddIFrameDialog;

package/src/sap/ui/rta/plugin/iframe/AddIFrameDialogController.js

@@ -136,6 +136,7 @@ sap.ui.define([
 		onShowPreview() {
 			const sReturnedURL = this._buildReturnedURL();
 			const sURL = this._buildPreviewURL();
+
 			if (!isValidUrl(sURL).result) {
 				return;
 			}
@@ -150,11 +151,12 @@ sap.ui.define([
 				oPanelButton.setEnabled(false);
 			}
 			try {
-				this._oJSONModel.setProperty("/previewUrl/value", sURL);
 				this._oJSONModel.setProperty("/previousFrameUrl/value", sReturnedURL);
 				this._oJSONModel.setProperty("/settingsUpdate/value", false);
 
 				oIFrame.applySettings({ url: sURL, advancedSettings: {...this._oJSONModel.getProperty("/advancedSettings/value")} });
+				// Use the URL from the IFrame to ensure that the complete path is shown
+				this._oJSONModel.setProperty("/previewUrl/value", oIFrame.getUrl());
 			} catch (oError) {
 				Log.error("Error previewing the URL: ", oError);
 			}
@@ -165,8 +167,8 @@ sap.ui.define([
 		 * @param {sap.ui.base.Event} oEvent - Event
 		 */
 		onParameterPress(oEvent) {
-			const sKey = oEvent.getSource().getBindingContext("dialogInfo").getObject().key;
-			this._oJSONModel.setProperty("/frameUrl/value", this._addURLParameter(sKey));
+			const oObject = oEvent.getSource().getBindingContext("dialogInfo").getObject();
+			this._oJSONModel.setProperty("/frameUrl/value", this._addURLParameter(oObject));
 			this.onValidateUrl();
 		},
 
@@ -201,16 +203,28 @@ sap.ui.define([
 		/**
 		 * Add URL parameter
 		 *
-		 * @param {string} sParameter - URL parameter
+		 * @param {object} oObject - Parameter object
 		 * @returns {string} URL with the added parameter
 		 * @private
 		 */
-		_addURLParameter(sParameter) {
+		_addURLParameter(oObject) {
+			const sParameterKey = oObject.key;
+			let sParameterString;
+			// If the type is available, this is an OData V4 Model and the target type must be set to 'any' when adding the parameter
+			// to the URL to prevent it from being resolved to a localized value.
+			// E.g. boolean is resolved to "yes/no" in a system with English locale - but we need to add "true/false" to the URL
+			// The only type that does not require this special handling is Edm.String
+			if (oObject.type && oObject.type !== "Edm.String") {
+				const [, sParameter] = sParameterKey.match(/\{(.+?)\}/);
+				sParameterString = `{path:'${sParameter}',targetType:'any'}`;
+			} else {
+				sParameterString = sParameterKey;
+			}
 			const oTextField = Element.getElementById("sapUiRtaAddIFrameDialog_EditUrlTA");
 			const iCurrentSelectionStart = oTextField.getFocusDomRef().selectionStart;
 			const iCurrentSelectionEnd = oTextField.getFocusDomRef().selectionEnd;
 			const sCurrentUrl = this._buildReturnedURL();
-			return `${sCurrentUrl.substring(0, iCurrentSelectionStart)}${sParameter}${sCurrentUrl.substring(iCurrentSelectionEnd)}`;
+			return `${sCurrentUrl.substring(0, iCurrentSelectionStart)}${sParameterString}${sCurrentUrl.substring(iCurrentSelectionEnd)}`;
 		},
 
 		/**

package/src/sap/ui/rta/service/Action.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @name sap.ui.rta.service.Action
 	 * @author SAP SE
 	 * @since 1.58
-	 * @version 1.126.1
+	 * @version 1.128.0
 	 * @private
 	 * @ui5-restricted
 	 *

package/src/sap/ui/rta/service/ControllerExtension.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * @name sap.ui.rta.service.ControllerExtension
 	 * @author SAP SE
 	 * @since 1.58
-	 * @version 1.126.1
+	 * @version 1.128.0
 	 * @private
 	 * @ui5-restricted
 	*/

package/src/sap/ui/rta/service/Outline.js

@@ -43,7 +43,7 @@ sap.ui.define([
 	 * @name sap.ui.rta.service.Outline
 	 * @author SAP SE
 	 * @since 1.56
-	 * @version 1.126.1
+	 * @version 1.128.0
 	 * @private
 	 * @ui5-restricted
 	 */

package/src/sap/ui/rta/service/Property.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @name sap.ui.rta.service.Property
 	 * @author SAP SE
 	 * @since 1.58
-	 * @version 1.126.1
+	 * @version 1.128.0
 	 * @private
 	 * @ui5-restricted
 	*/

package/src/sap/ui/rta/service/Selection.js

@@ -14,7 +14,7 @@ sap.ui.define(function() {
 	 * @name sap.ui.rta.service.Selection
 	 * @author SAP SE
 	 * @since 1.58
-	 * @version 1.126.1
+	 * @version 1.128.0
 	 * @private
 	 * @ui5-restricted
 	*/
@@ -88,7 +88,25 @@ sap.ui.define(function() {
 				 * @returns {boolean} <code>true</code> if completed successfully (<code>false</code> if there is nothing to reset)
 				 * @public
 				 */
-				reset: oSelectionManager.reset.bind(oSelectionManager)
+				reset: oSelectionManager.reset.bind(oSelectionManager),
+
+				/**
+				 * Adds hover effect to the specified controls.
+				 *
+				 * @method sap.ui.rta.service.Selection.addHover
+				 * @param {string|string[]} vControlIds - Control IDs to which to add the hover effect
+				 * @public
+				 */
+				addHover: oSelectionManager.addHover.bind(oSelectionManager),
+
+				/**
+				 * Removes hover effect from the specified controls.
+				 *
+				 * @method sap.ui.rta.service.Selection.removeHover
+				 * @param {string|string[]} vControlIds - Control IDs from which to remove the hover effect
+				 * @public
+				 */
+				removeHover: oSelectionManager.removeHover.bind(oSelectionManager)
 			}
 		};
 	};

package/src/sap/ui/rta/service/SupportTools.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @name sap.ui.rta.service.SupportTools
 	 * @author SAP SE
 	 * @since 1.106
-	 * @version 1.126.1
+	 * @version 1.128.0
 	 * @private
 	 * @ui5-restricted
 	 */

package/src/sap/ui/rta/themes/base/AddIFrame.less

@@ -1,10 +1,9 @@
 /******************************************************************
 	Style of the RTA Add IFrame Dialog  - base Theme
 *******************************************************************/
-@_sap_ui_rta_AddIFrame_Title: @sapUiTextTitle; //#000
-@_sap_ui_rta_AddIFrame_DelimiterLineColor: @sapUiInfobarActiveBackground; //#d9d9d9
-@_sap_ui_rta_AddIFrame_BorderColor: @sapUiNeutralBorder; //#fff;
-@_sap_ui_rta_AddIFrame_PreviewBG: @sapUiListTableGroupHeaderBackground; //#f2f2f2
+@_sap_ui_rta_AddIFrame_BorderColor: @sapUiGroupContentBorderColor; //#000;
+@_sap_ui_rta_AddIFrame_PreviewBackgroundColor: @sapUiContentImagePlaceholderBackground; //#fff
+@_sap_ui_rta_AddIFrame_PreviewTextColor: @sapUiContentForegroundTextColor; //#000
 
 .sapUiRtaMode {
 	.sapUiRtaAddIFrameDialog {
@@ -16,10 +15,6 @@
 			&:focus::after {
 				content: none;
 			}
-
-			.sapMTitle {
-				color: @_sap_ui_rta_AddIFrame_Title;
-			}
 		}
 
 		.sapUiRtaAddIFrameDialogVlWrapper {
@@ -48,7 +43,7 @@
 			.sapUiRtaAddIFrameDialogPercentGrid {
 				padding: 0.25rem 0 0 0;
 				margin: 0 1rem;
-				border-bottom: 0.0625rem solid @_sap_ui_rta_AddIFrame_DelimiterLineColor; //1px
+				border-bottom: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
 
 				> div {
 					margin-bottom: 0.25rem;
@@ -119,7 +114,7 @@
 			.sapUiRtaAddIFrameDialogPreviewGrid {
 				padding: 0;
 				margin: 0 1rem 1rem;
-				background: @_sap_ui_rta_AddIFrame_PreviewBG;
+				background: @_sap_ui_rta_AddIFrame_PreviewBackgroundColor;
 				border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
 
 				> div {
@@ -130,6 +125,9 @@
 				.sapUiRtaAddIFrameDialogNoPreviewLabel {
 					margin-top: 4rem;
 				}
+				.sapMLabelTextWrapper {
+					color: @_sap_ui_rta_AddIFrame_PreviewTextColor;
+				}
 			}
 		}
 	}

package/src/sap/ui/rta/themes/base/ChangeVisualization.less

@@ -4,9 +4,8 @@
 @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorLight: @sapUiChartPaletteSequentialHue1Light1; //#4880cb
 @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorMedium: @sapUiChartPaletteSequentialHue1Dark1; //#1b57a7
 @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark: @sapUiChartPaletteSequentialHue11Dark2; //#0e4186
-@_sap_ui_rta_ChangeVisualization_DependentIndicatorColorTransparent: @sapUiGroupTitleBackground; //#fff
 @_sap_ui_rta_ChangeVisualization_OverlayBoxShadow: @sapUiUx3ToolPopupShadow; //0px 6px 12px 0px fade(black, 30);
-@_sap_ui_rta_ChangeVisualization_OverlayOutline: @sapUiSelected; //#8fb5ff
+@_sap_ui_rta_ChangeVisualization_OverlayOutlineColor: @sapUiSelected; //#8fb5ff
 
 .sapUiRtaChangeIndicator {
 	height: 0.8rem;
@@ -55,7 +54,7 @@
 			content: " ";
 			transition: box-shadow .25s;
 			box-shadow: @_sap_ui_rta_ChangeVisualization_OverlayBoxShadow;
-			outline: 0.0625rem solid @_sap_ui_rta_ChangeVisualization_OverlayOutline !important; //1px
+			outline: 0.0625rem solid @_sap_ui_rta_ChangeVisualization_OverlayOutlineColor !important; //1px
 			outline-offset: -0.0625rem; //1px
 		}
 	}

package/src/sap/ui/rta/themes/base/ContextMenu.less

@@ -1,24 +1,24 @@
 /******************************************************************
 	Style of the RTA Contextmenu - base Theme
 *******************************************************************/
-@_sap_ui_rta_ContextMenu_Border_LightColor: @sapUiInvertedElement; //#fff
-@_sap_ui_rta_ContextMenu_Border_DarkColor: darken(desaturate(@sapUiChart1, 48%), 14%); //#435060
-@_sap_ui_rta_ContextMenu_BoxShadow_DarkColor: @sapUiDarkShadowTint; // #000
-@_sap_ui_rta_ContextMenu_BoxShadow_LightColor: @sapUiLightShadowTint; // #fff
+@_sap_ui_rta_ContextMenu_BorderLightColor: @sapUiButtonLiteBorderColor; //#fff
+@_sap_ui_rta_ContextMenu_BorderDarkColor: @sapUiButtonAcceptBorderColor; //#006362
+@_sap_ui_rta_ContextMenu_BoxShadowDarkColor: @sapUiDarkShadowTint; // #000
+@_sap_ui_rta_ContextMenu_BoxShadowLightColor: @sapUiLightShadowTint; // #fff
 
-@_sap_ui_rta_ContextMenu_BoxShadow: 0.375rem 0.625rem 2rem fade(@_sap_ui_rta_ContextMenu_BoxShadow_DarkColor, 30),
-0.125rem 0.375rem 1rem fade(@_sap_ui_rta_ContextMenu_BoxShadow_DarkColor, 60),
-0 0 0 0.0625rem fade(@_sap_ui_rta_ContextMenu_BoxShadow_LightColor, 20),
-0 0.0625rem 0 0 fade(@_sap_ui_rta_ContextMenu_BoxShadow_LightColor, 20); //10px 20px 6px 6px 1px 1px
+@_sap_ui_rta_ContextMenu_BoxShadow: 0.375rem 0.625rem 2rem fade(@_sap_ui_rta_ContextMenu_BoxShadowDarkColor, 30),
+0.125rem 0.375rem 1rem fade(@_sap_ui_rta_ContextMenu_BoxShadowDarkColor, 60),
+0 0 0 0.0625rem fade(@_sap_ui_rta_ContextMenu_BoxShadowLightColor, 20),
+0 0.0625rem 0 0 fade(@_sap_ui_rta_ContextMenu_BoxShadowLightColor, 20); //10px 20px 6px 6px 1px 1px
 
 .sapUiRtaMode {
 	.sapUiDtContextMenu {
 		&.sapMMenu {
-			border: 0.125rem solid @_sap_ui_rta_ContextMenu_Border_LightColor; //2px
-			border-image: repeating-linear-gradient(-45deg, @_sap_ui_rta_ContextMenu_Border_DarkColor,
-			@_sap_ui_rta_ContextMenu_Border_DarkColor 0.25rem,
-			@_sap_ui_rta_ContextMenu_Border_LightColor 0.25rem,
-			@_sap_ui_rta_ContextMenu_Border_LightColor 0.375rem) 4;
+			border: 0.125rem solid @_sap_ui_rta_ContextMenu_BorderLightColor; //2px
+			border-image: repeating-linear-gradient(-45deg, @_sap_ui_rta_ContextMenu_BorderDarkColor,
+			@_sap_ui_rta_ContextMenu_BorderDarkColor 0.25rem,
+			@_sap_ui_rta_ContextMenu_BorderLightColor 0.25rem,
+			@_sap_ui_rta_ContextMenu_BorderLightColor 0.375rem) 4;
 			box-shadow: @_sap_ui_rta_ContextMenu_BoxShadow;
 		}
 	}

package/src/sap/ui/rta/themes/base/Dialogs.less

@@ -1,8 +1,8 @@
 /******************************************************************
 	Style of the RTA Dialogs - base Theme
 *******************************************************************/
-@_sap_ui_rta_Dialogs_BorderLightColor: @sapUiShellBackground; //#fff
-@_sap_ui_rta_Dialogs_BorderDarkColor: darken(desaturate(@sapUiChart1, 48%), 14%); //#435060
+@_sap_ui_rta_Dialogs_BorderLightColor: @sapUiButtonLiteBorderColor; //#fff
+@_sap_ui_rta_Dialogs_BorderDarkColor: @sapUiButtonAcceptBorderColor; //#006362
 @_sap_ui_rta_Dialogs_BoxShadowDarkColor: @sapUiDarkShadowTint; // #000
 @_sap_ui_rta_Dialogs_BoxShadowLightColor: @sapUiLightShadowTint; // #fff
 

package/src/sap/ui/rta/themes/base/FieldRepository.less

@@ -1,20 +1,15 @@
 /******************************************************************
 	Style of the RTA Add Fields Dialog  - base Theme
 *******************************************************************/
-@_sap_ui_rta_FieldRepository_Title: @sapUiTextTitle; //#000
-@_sap_ui_rta_FieldRepository_BtnFocusOtline: @sapUiButtonHoverBorderColor; //#000
-@_sap_ui_rta_FieldRepository_BC_Container_Border: @sapUiGroupContentBorderColor; //#000
+@_sap_ui_rta_FieldRepository_BtnFocusOutlineColor: @sapUiContentFocusColor; //#000
+@_sap_ui_rta_FieldRepository_BC_Container_BorderColor: @sapUiGroupContentBorderColor; //#000
 
 .sapUIRtaFieldRepositoryDialog {
 
-	&.sapMDialog > header .sapMDialogTitleGroup .sapMTitle {
-		color: @_sap_ui_rta_FieldRepository_Title;
-	}
-
 	.sapMBtn {
 		&:focus {
 			> .sapMBtnInner {
-				outline: 0.0625rem dotted @_sap_ui_rta_FieldRepository_BtnFocusOtline; //1px
+				outline: 0.0625rem dotted @_sap_ui_rta_FieldRepository_BtnFocusOutlineColor; //1px
 				border: 0.0625rem solid transparent;
 			}
 		}
@@ -28,10 +23,10 @@
 		width: 100%;
 		margin-top: 0.25rem; //4px
 		padding-bottom: 0.5rem; //8px
-		border-bottom: 0.0625rem solid @_sap_ui_rta_FieldRepository_BC_Container_Border; //1px
+		border-bottom: 0.0625rem solid @_sap_ui_rta_FieldRepository_BC_Container_BorderColor; //1px
 
 		> div:not(:first-child) {
-			padding-left: 2.125rem; //34px
+			padding-left: 2.125rem;     //34px
 			padding-right: 0.625rem; //10px
 		}
 

package/src/sap/ui/rta/themes/base/FlexSupportExtension.less

@@ -1,14 +1,19 @@
 /******************************************************************
 	Style used by flex support chrome extension  - base Theme
 *******************************************************************/
+@_sap_ui_rta_FlexSupportExtension_BoxShadow: @sapUiUx3ToolPopupShadow; //0px 6px 12px 0px fade(black, 30);
+@_sap_ui_rta_FlexSupportExtension_BackgroundColor: fade(@sapUiSelected, 5%); //rgba(143, 181, 255, 0.05);
+@_sap_ui_rta_FlexSupportExtension_BorderRadius: @sapUiButtonBorderCornerRadius; //0.375rem
+@_sap_ui_rta_FlexSupportExtension_OutlineColor: @sapUiSelected; //#8fb5ff
+
 .sapUiFlexibilitySupportExtension_Selected {
-	box-shadow: @sapUiUx3ToolPopupShadow;
+	box-shadow: @_sap_ui_rta_FlexSupportExtension_BoxShadow;
 	&:after {
 		content: " ";
-		background: @sapUiMessageSuccessBorderColor;
+		background: @_sap_ui_rta_FlexSupportExtension_BackgroundColor;
 		opacity: 0.40;
-		border-radius: @sapUiButtonBorderCornerRadius;
-		outline: 0.125rem solid @sapUiSelected; //1px
+		border-radius: @_sap_ui_rta_FlexSupportExtension_BorderRadius;
+		outline: 0.125rem solid @_sap_ui_rta_FlexSupportExtension_OutlineColor; //1px
 		outline-offset: -0.125rem; //1px
 	}
 }