@openui5/themelib_sap_horizon 1.101.0 → 1.102.2

package/src/sap/ui/dt/themes/sap_horizon_hcb/Overlay.less

@@ -1,9 +1,42 @@
-/* ================================== */
-/* CSS for control sap.ui.dt/Overlay  */
-/* Horizon High Contrast Black theme  */
-/* ================================== */
-
-@_sap_ui_dt_Overlay_FocusColor: fade(@sapUiWhite, 80%); //rgba(255, 255, 255, 0.8)
-@_sap_ui_dt_Overlay_TargetZoneColor: @sapHC_EnhancedForeground; //#03b803
-@_sap_ui_dt_Overlay_SelectionColor: @sapUiWhite; //#ffffff
-@_sap_ui_dt_Overlay_CuttedColor: @sapHC_ReducedBackground; //#585858
+/******************************************************************
+	Style of the DT Overlays - Horizon High Contrast Black theme
+*******************************************************************/
+@_sap_ui_dt_Overlay_FocusColor: fade(@sapUiNeutralBorder, 80%); //rgba(255, 255, 255, 0.8)
+@_sap_ui_dt_Overlay_TargetZoneColor: @sapUiContentHelpColor; //#03b803
+@_sap_ui_dt_Overlay_SelectionColor: @sapUiNeutralElement; //#ffffff
+@_sap_ui_dt_Overlay_CuttedColor: @sapUiFieldReadOnlyBackground; //#585858
+@_sap_ui_dt_Overlay_HighlightColor: @sapUiWarningBorder; // #ffab1d
+@_sap_ui_dt_Overlay_BorderRadius: @sapUiButtonBorderCornerRadius; // 0.375rem
+
+.sapUiDtOverlayFocusable {
+	&:focus {
+		&:before {
+			border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+			outline: 0.0625rem dotted @_sap_ui_dt_Overlay_FocusColor;
+			border: none;
+			outline-offset: -0.125rem;
+		}
+	}
+}
+
+.sapUiDtOverlaySelected {
+	box-shadow: none !important;
+
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}
+
+.sapUiDtOverlayTargetZone {
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}
+
+.sapUiDtOverlayCutted {
+	opacity: 0.7;
+
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}

package/src/sap/ui/dt/themes/sap_horizon_hcw/ContextMenu.less

@@ -1,6 +1,53 @@
-/* ============================================= */
-/* CSS for control sap.ui.core/ContextMenu  */
-/* Horizon High Contrast White theme             */
-/* ============================================= */
+/*********************************************************************
+	Style of the DT Contextmenu - Horizon High Contrast White theme
+**********************************************************************/
+@_sap_ui_dt_ContextMenu_Border_Radius: @sapUiButtonBorderCornerRadius; // .375rem
+@_sap_ui_dt_ContextMenu_OpenSubMenuBG: @sapUiSelected; //#0f5c93
+@_sap_ui_dt_ContextMenu_OpenSubMenuBorder: @sapUiNeutralBG; //000
 
-@_sap_ui_dt_ContextMenu_BorderColor: @sapUiBlackBG; //#000000
+.sapUiDtContextMenu {
+	.sapUiMnuLst {
+		.sapUiMnuItm {
+
+			&:focus {
+				border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+			}
+
+			&.sapUiMnuItmSubMnuOpen {
+				background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBG;
+				border-bottom: 0.0625rem solid @_sap_ui_dt_ContextMenu_OpenSubMenuBorder !important; //1px
+				border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+
+				&.sapUiMnuItmHov {
+					background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBG;
+				}
+			}
+		}
+	}
+}
+
+.sapUiDtContextMiniMenu:not(.sapUiSubmenu) {
+	.sapUiMnuLst {
+		.sapUiMnuItm {
+
+			&.sapUiMnuItmHov {
+				.sapUiIcon {
+					border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+				}
+			}
+
+			&.sapUiMnuItmSubMnuOpen {
+				background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBorder;
+
+				.sapUiIcon {
+					background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBG;
+					border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+				}
+			}
+
+			&:focus {
+				border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+			}
+		}
+	}
+}

package/src/sap/ui/dt/themes/sap_horizon_hcw/Overlay.less

@@ -0,0 +1,40 @@
+/******************************************************************
+	Style of the DT Overlays - Horizon High Contrast White theme
+*******************************************************************/
+@_sap_ui_dt_Overlay_FocusColor: fade(@sapUiNeutralBorder, 80%); //rgba(0, 0, 0, 0.8)
+@_sap_ui_dt_Overlay_CuttedColor: @sapUiFieldReadOnlyBackground; //#b3b3b3
+@_sap_ui_dt_Overlay_HighlightColor: @sapUiListHighlightColor; // #ec8b46
+@_sap_ui_dt_Overlay_BorderRadius: @sapUiButtonBorderCornerRadius; // 0.375rem
+
+.sapUiDtOverlayFocusable {
+	&:focus {
+		&:before {
+			border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+			outline: 0.0625rem dotted @_sap_ui_dt_Overlay_FocusColor;
+			border: none;
+			outline-offset: -0.125rem;
+		}
+	}
+}
+
+.sapUiDtOverlaySelected {
+	box-shadow: none !important;
+
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}
+
+.sapUiDtOverlayTargetZone {
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}
+
+.sapUiDtOverlayCutted {
+	opacity: 0.7;
+
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}

package/src/sap/ui/dt/themes/sap_horizon_hcw/library.source.less

@@ -8,4 +8,5 @@
 @import "../../../../../sap/ui/core/themes/sap_horizon_hcw/base.less";
 @import "../../../../../sap/ui/core/themes/sap_horizon_hcw/global.less";
 
-@import "ContextMenu.less";
+@import "ContextMenu.less";
+@import "Overlay.less";

package/src/sap/ui/layout/themes/sap_horizon/ResponsiveSplitter.less

@@ -6,4 +6,7 @@
 @_sap_ui_layout_ResponsiveSplitter_PaginatorHeight: 2.75rem;
 @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonWidth: 2.25rem;
 @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHeight: 2.25rem;
-@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonFocusBorderRadius: inherit;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonFocusBorderRadius: inherit;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorSelectedButton: @sapSelectedColor;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonActive: @sapUiButtonActiveTextColor;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHoverShadow: @sapUiContentInteractionShadow;

package/src/sap/ui/layout/themes/sap_horizon/Splitter.less

@@ -0,0 +1,7 @@
+/* ================================================= */
+/* CSS for control sap.ui.layout/Splitter  */
+/* Horizon theme                                     */
+/* ================================================= */
+
+@_sap_ui_layout_Splitter_GripButtonColor: @sapUiButtonLiteTextColor;
+@_sap_ui_layout_Splitter_BarDecorationColors: @sapUiGroupContentBorderColor, transparent;

package/src/sap/ui/layout/themes/sap_horizon/library.source.less

@@ -8,10 +8,11 @@
 @import "../../../../../sap/ui/core/themes/sap_horizon/base.less";
 @import "../../../../../sap/ui/core/themes/sap_horizon/global.less";
 
+@import "BlockLayout.less";
 @import "FormLayout.less";
 @import "ColumnLayout.less";
 @import "GridLayout.less";
 @import "ResponsiveGridLayout.less";
 @import "ResponsiveLayout.less";
 @import "ResponsiveSplitter.less";
-@import "BlockLayout.less";
+@import "Splitter.less";

package/src/sap/ui/layout/themes/sap_horizon_dark/ResponsiveSplitter.less

@@ -6,4 +6,7 @@
 @_sap_ui_layout_ResponsiveSplitter_PaginatorHeight: 2.75rem;
 @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonWidth: 2.25rem;
 @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHeight: 2.25rem;
-@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonFocusBorderRadius: inherit;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonFocusBorderRadius: inherit;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorSelectedButton: @sapSelectedColor;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonActive: @sapUiButtonActiveTextColor;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHoverShadow: @sapUiContentInteractionShadow;

package/src/sap/ui/layout/themes/sap_horizon_dark/Splitter.less

@@ -0,0 +1,7 @@
+/* ================================================= */
+/* CSS for control sap.ui.layout/Splitter  */
+/* Evening Horizon theme                             */
+/* ================================================= */
+
+@_sap_ui_layout_Splitter_GripButtonColor: @sapUiButtonLiteTextColor;
+@_sap_ui_layout_Splitter_BarDecorationColors: @sapUiGroupContentBorderColor, transparent;

package/src/sap/ui/layout/themes/sap_horizon_dark/library.source.less

@@ -8,10 +8,11 @@
 @import "../../../../../sap/ui/core/themes/sap_horizon_dark/base.less";
 @import "../../../../../sap/ui/core/themes/sap_horizon_dark/global.less";
 
+@import "BlockLayout.less";
 @import "FormLayout.less";
 @import "ColumnLayout.less";
 @import "GridLayout.less";
 @import "ResponsiveGridLayout.less";
 @import "ResponsiveLayout.less";
 @import "ResponsiveSplitter.less";
-@import "BlockLayout.less";
+@import "Splitter.less";

package/src/sap/ui/layout/themes/sap_horizon_hcb/Splitter.less

@@ -19,9 +19,5 @@
 .sapUiLoSplitter > .sapUiLoSplitterOverlay .sapUiLoSplitterOverlayBar {
 	&:focus::after {
 		border-width: 2px;
-		top: -1px;
-		bottom: -1px;
-		left: -1px;
-		right: -1px;
 	}
 }

package/src/sap/ui/layout/themes/sap_horizon_hcw/Splitter.less

@@ -19,9 +19,5 @@
 .sapUiLoSplitter > .sapUiLoSplitterOverlay .sapUiLoSplitterOverlayBar {
 	&:focus::after {
 		border-width: 2px;
-		top: -1px;
-		bottom: -1px;
-		left: -1px;
-		right: -1px;
 	}
 }

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

@@ -0,0 +1,65 @@
+/******************************************************************
+	Style of the RTA Add IFrame Dialog  - Horizon Theme
+*******************************************************************/
+@_sap_ui_rta_AddIFrame_DelimiterLineColor: @sapUiToolbarSeparatorColor; //#d9d9d9
+@_sap_ui_rta_AddIFrame_BorderRadius: @sapUiGroupBorderCornerRadius; //0.5rem
+@_sap_ui_rta_AddIFrame_PreviewTlbarHoverBG: @sapUiButtonHoverBackground; //fff
+
+.sapUiRtaMode {
+	.sapUiRtaAddIFrameDialog {
+		.sapUiRtaAddIFrameDialogVlWrapper {
+			.sapUiRtaAddIFrameDialogEditGrid {
+
+				.sapUiRtaAddIFrameDialogParameters {
+					.sapMScrollCont {
+						border-radius: @_sap_ui_rta_AddIFrame_BorderRadius;
+					}
+				}
+
+				.sapUiRtaAddIFrameDialogEditUrl {
+					.sapMTextArea {
+						.sapMInputBaseContentWrapper {
+							border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
+							border-radius: @_sap_ui_rta_AddIFrame_BorderRadius;
+							background-image: none;
+						}
+
+						.sapMTextAreaInner {
+							border: none;
+						}
+					}
+				}
+			}
+
+			.sapUiRtaAddIFrameDialogPreviewLinkGrid {
+				.sapUiRtaAddIFrameDialogPreviewLinkPanel {
+
+					&.sapMPanel .sapMPanelWrappingDiv:not(.sapMPanelWrappingDivExpanded),
+					&.sapMPanel .sapMPanelWrappingDivTb:not(.sapMPanelWrappingDivTbExpanded) {
+						border-radius: 0;
+					}
+
+					.sapUiRtaAddIFrameDialogPreviewLinkToolbar {
+						padding-left: 0;
+						padding-right: 0.125rem;
+
+						&.sapMTB:hover,
+						&.sapMTB-Solid-CTX.sapMTB:hover {
+							background-color: @_sap_ui_rta_AddIFrame_PreviewTlbarHoverBG;
+						}
+					}
+				}
+			}
+
+			.sapUiRtaAddIFrameDialogPreviewGrid {
+				border-radius: @_sap_ui_rta_AddIFrame_BorderRadius;
+				padding-bottom: 0.5rem;
+			}
+		}
+	}
+}
+
+// adapt scrollbars to rounded corners
+html.sap-desktop:not(.sapUiNativeScrollbars) ::-webkit-scrollbar {
+	background-color: inherit !important;
+}

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

@@ -1,10 +1,16 @@
-/* =============================================== */
-/* CSS for control sap.ui.rta/ChangeVisualization  */
-/* Horizon theme                                   */
-/* =============================================== */
+/******************************************************************
+	Style of the RTA Change Visualization - Horizon theme
+*******************************************************************/
+@_sap_ui_rta_ChangeVisualization_BorderRadius: @sapUiButtonBorderCornerRadius; // 0.5rem
 
-.sapUiRtaChangeIndicatorHovered {
-	&:after {
-		border-radius: @sapUiFieldBorderCornerRadius;
+.sapUiDtOverlay {
+	.sapUiRtaChangeIndicatorHovered {
+		&:after {
+			border-radius: @_sap_ui_rta_ChangeVisualization_BorderRadius;
+		}
+	}
+
+	&.sapUiRtaChangeIndicatorDependent {
+		border-radius: @_sap_ui_rta_ChangeVisualization_BorderRadius;
 	}
 }

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

@@ -1,39 +1,15 @@
-/* ======================================= */
-/* CSS for control sap.ui.rta/ContextMenu  */
-/* Horizon theme                           */
-/* ======================================= */
-
-@_sap_ui_rta_ContextMenu_Border_DarkColor: @sapUiButtonEmphasizedBorderColor;
-@_sap_ui_rta_ContextMenu_ShadowDarkColor: #000;
-@_sap_ui_rta_ContextMenu_ShadowLightColor: #fff;
-@_sap_ui_rta_ContextMenu_BoxShadow: 0 0.625rem 1.25rem fade(@_sap_ui_rta_ContextMenu_ShadowDarkColor, 19),
-									0 0.375rem 0.375rem fade(@_sap_ui_rta_ContextMenu_ShadowDarkColor, 23),
-									0 0 0 0.0625rem fade(@_sap_ui_rta_ContextMenu_ShadowLightColor, 20),
-									0 0.0625rem 0 0 fade(@_sap_ui_rta_ContextMenu_ShadowLightColor, 20);
+/******************************************************************
+	Style of the RTA Contextmenu - Horizon Theme
+*******************************************************************/
+@_sap_ui_rta_ContextMenu_Border_DarkColor: @sapUiButtonEmphasizedBorderColor; // #0070f2
+@_sap_ui_rta_ContextMenu_Border_Radius: @sapUiGroupBorderCornerRadius; // 0.5rem
 
 .sapUiRtaMode {
 	.sapUiDtContextMenu {
 		&.sapMMenu {
 			border: 0.188rem dashed @_sap_ui_rta_ContextMenu_Border_DarkColor; //2px
-			box-shadow: @_sap_ui_rta_ContextMenu_BoxShadow;
-			border-radius: @sapUiGroupBorderCornerRadius;
-		}
-		&.sapUiSubmenu,
-		&:not(.sapUiDtContextMiniMenu) {
-			.sapUiMnuItm {
-				&.sapUiMnuItmHov {
-					color: @sapUiListTextColor;
-					background-color: @sapUiListHoverBackground;
-				}
-			}
+			border-image: none;
+			border-radius: @_sap_ui_rta_ContextMenu_Border_Radius;
 		}
 	}
-}
-
-.sapUiRtaMode .sapUiDtContextMiniMenu:not(.sapUiSubmenu) .sapUiMnuItm.sapUiMnuItmHov .sapUiIcon {
-	background-color: @sapUiListHoverBackground;
-	border: 1px dotted;
-}
-.sapUiSizeCozy.sapUiRtaMode .sapUiMnu.sapUiDtContextMiniMenu:not(.sapUiSubmenu) {
-	min-width: 68px;
 }

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

@@ -1,46 +1,29 @@
-/* =================================== */
-/* CSS for control sap.ui.rta/Dialogs  */
-/* Horizon theme                       */
-/* =================================== */
-
-@_sap_ui_rta_Border_LightColor: @sapUiShellBorderColor; //#fff
-@_sap_ui_rta_Border_DarkColor: @sapUiButtonEmphasizedBorderColor; //#0070f2
-@_sap_ui_rta_Border_BoxShadow: 0 0.625rem 1.25rem fade(black, 19), 0 0.375rem 0.375rem fade(black, 23), 0 0 0 0.0625rem fade(white, 20), 0 0.0625rem 0 0 fade(white, 20); //10px 20px 6px 6px 1px 1px
+/******************************************************************
+	Style of the RTA Dialogs - Horizon Theme
+*******************************************************************/
+@_sap_ui_rta_Dialogs_BorderLightColor: @sapUiShellBorderColor; //#fff
+@_sap_ui_rta_Dialogs_BorderRadius: @sapUiElementBorderCornerRadius; //0.75rem
+@_sap_ui_rta_Dialogs_BorderDarkColor: @sapUiButtonEmphasizedBorderColor; //#0070f2
 
 .sapMDialog.sapUiRTABorder {
-	border: 0.188rem solid @_sap_ui_rta_Border_LightColor; //3px
-	border-radius: @sapUiElementBorderCornerRadius;
-	outline: 0.188rem dashed @_sap_ui_rta_Border_DarkColor; //3px
+	border-image: none;
+	border-radius: @_sap_ui_rta_Dialogs_BorderRadius;
+	outline: 0.188rem dashed @_sap_ui_rta_Dialogs_BorderDarkColor; //3px
 	outline-offset: -0.188rem;
 }
 
 .sapUiRtaPopover {
 
 	&.sapMPopover, .sapMPopover {
-		border: 0.188rem dashed @_sap_ui_rta_Border_DarkColor; //3px
-		box-shadow: @_sap_ui_rta_Border_BoxShadow;
-		border-radius: @sapUiElementBorderCornerRadius;
+		border: 0.188rem dashed @_sap_ui_rta_Dialogs_BorderDarkColor; //3px
+		border-image: none;
+		border-radius: @_sap_ui_rta_Dialogs_BorderRadius;
 	}
 
 	&.sapMPopoverArr, .sapMPopoverArr {
-		width: 2rem; //32px
-		height: 2rem; //32px
-		bottom: -2rem; //32px
 		&:after {
-			box-shadow: 0.375rem -0.375rem 0.75rem 0 fade(black, 30), 0 0 0 0.0625rem fade(white, 20); //6px 6px 12px 1px
-			border: 0.188rem dashed @_sap_ui_rta_Border_DarkColor; //3px
-			width: 1rem; //16px
-			height: 0.8125rem; //13px
-			margin: -0.65rem 0 0 0.35rem; //10px 6px
-		}
-
-		&.sapMPopoverArrUp {
-			height: 0.8125rem; //13px
-			top: -0.8125rem; //13px
-			&:after {
-				box-shadow: -0.375rem 0.375rem 0.75rem 0 fade(black, 30), 0 0 0 0.0625rem fade(white, 20); //6px 6px 12px 1px
-				margin: 0.35rem 0 0 0.35rem; //6px 6px
-			}
+			border: 0.188rem dashed @_sap_ui_rta_Dialogs_BorderDarkColor; //3px
+			border-image: none;
 		}
 	}
 }

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

@@ -1,38 +1,31 @@
-/* =========================================== */
-/* CSS for control sap.ui.rta/FieldRepository  */
-/* Horizon theme                               */
-/* =========================================== */
-
-@sap_ui_rta_FieldRepository_ListSelect: @sapUiListHoverSelectionBackground;
-@sap_ui_rta_FieldRepository_ButtonActiveColor: @sapUiButtonActiveBorderColor;
+/******************************************************************
+	Style of the RTA Add Fields Dialog  - Horizon Theme
+*******************************************************************/
+@_sap_ui_rta_FieldRepository_ListSelect: @sapUiListHoverSelectionBackground; //#dcf3ff
+@_sap_ui_rta_FieldRepository_BtnHoverOutline: @sapUiButtonActiveBorderColor; //#0070f2
+@_sap_ui_rta_FieldRepository_ListItmBorderRadius: @sapUiButtonBorderCornerRadius; //0.5rem
 
 .sapUiRtaMode {
 
 	.sapUIRtaFieldRepositoryDialog {
 
-		.sapMBtn {
-			&:hover:not(focus) {
-				.sapMBtnHoverable {
-					outline: none;
-				}
+		.sapMLIBHoverable {
+			&.sapMLIBSelected:hover {
+				background: @_sap_ui_rta_FieldRepository_ListSelect;
 			}
 
-			> .sapMBtnInner:not(.sapMBtnEmphasized) {
-				background: transparent;
+			&.sapMLIB.sapMLIBSelected {
+				border-bottom: 0.0625rem solid transparent;
 			}
+		}
 
-			&:focus {
-				&:hover > .sapMFocusable {
-					outline: 0.125rem solid @sap_ui_rta_FieldRepository_ButtonActiveColor;
-					outline-offset: -0.125rem;
-				}
-			}
+		.sapUIRtaListItem {
+			border-radius: @_sap_ui_rta_FieldRepository_ListItmBorderRadius;
 		}
 
-		.sapMLIBHoverable {
-			&.sapMLIBSelected:hover {
-				background: @sap_ui_rta_FieldRepository_ListSelect;
-			}
+		// Search field
+		.sapMSF.sapMFocus:hover .sapMSFF {
+			outline: 0.0625rem solid @_sap_ui_rta_FieldRepository_BtnHoverOutline; //1px
 		}
 	}
 }

package/src/sap/ui/rta/themes/sap_horizon/Overlay.less

@@ -1,39 +1,20 @@
-/* =================================== */
-/* CSS for control sap.ui.rta/Overlay  */
-/* Horizon theme                       */
-/* =================================== */
-
-@_sap_ui_rta_Overlay_BaseBG: @sapUiShellBackground; //#f5f6f7
-@_sap_ui_rta_Overlay_BaseColor: @sapUiNotificationBarBG; //rgba(85,107,130,0.98)
-@_sap_ui_rta_Overlay_Base_PlaceholderBG: lighten(saturate(@sapUiShellBackground, 15%), 2%);
+/******************************************************************
+	Style of the RTA Overlays - Horizon Theme
+*******************************************************************/
+@_sap_ui_rta_Overlay_ShellBG: transparent;
+@_sap_ui_rta_Overlay_PlaceholderBG: lighten(saturate(@sapUiShellBackground, 15%), 2%); // #fafbfc
+@_sap_ui_rta_Overlay_BorderRadius: @sapUiButtonBorderCornerRadius; // 0.5rem
+@_sap_ui_rta_Overlay_HoverBG: fade(@sapUiSelected, 5%); // rgba(0, 112, 242, 0.05)
+@_sap_ui_rta_Overlay_PersButtonBG: @sapUiSelected; //#0070f2
+@_sap_ui_rta_Overlay_PersButtonBorder: @sapUiShellBackground; // #f5f6f7
+@_sap_ui_rta_Overlay_PersButtonIcon: @sapUiShellBackground; // #f5f6f7
 
 .sapUiRta {
-	.sapUiDtOverlayDropZone {
-		> .sapUiDtOverlayChildren {
-			> .sapUiDtOverlayMovable {
-				background: inherit;
-			}
-		}
-	}
-	.sapUiDtOverlayFocusable:focus:before {
-		border-radius: @sapUiFieldBorderCornerRadius;
-		outline: 0.0625rem dotted @sapUiSelected;
-		border: none;
-		outline-offset: -0.125rem;
-	}
 	&:not(.sapUiRtaVisualizationMode) {
 		.sapUiRtaOverlayHover:after {
-			border-radius: @sapUiFieldBorderCornerRadius;
+			border-radius: @_sap_ui_rta_Overlay_BorderRadius;
 			border: none;
-			background: fade(@sapUiSelected, 5%);
-		}
-		.sapUiDtOverlaySelected {
-			box-shadow: none;
-			&:after {
-				border-radius: @sapUiFieldBorderCornerRadius;
-				transition: box-shadow 0.25s;
-				box-shadow: 0px 6px 12px 0px rgba(85, 107, 130, 0.3);
-			}
+			background: @_sap_ui_rta_Overlay_HoverBG;
 		}
 	}
 }