@openui5/sap.ui.rta 1.143.1 → 1.145.0

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

@@ -1,25 +1,22 @@
-/******************************************************************
-	Style of the RTA Contextmenu - base Theme
-*******************************************************************/
-@_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
+/* ======================================= */
+/* CSS for control sap.ui.rta/ContextMenu  */
+/* Base theme                              */
+/* ======================================= */
 
-@_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
+@_sap_ui_rta_ContextMenu_BorderLightColor: var(--sapButton_Lite_BorderColor);
+@_sap_ui_rta_ContextMenu_BorderDarkColor: var(--sapButton_Accept_BorderColor);
 
 .sapUiRtaMode {
+
 	.sapUiDtContextMenu {
+
 		&.sapMMenu {
-			border: 0.125rem solid @_sap_ui_rta_ContextMenu_BorderLightColor; //2px
+			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;
+			box-shadow: var(--sapContent_Shadow2);
 		}
 	}
 }

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

@@ -1,40 +1,25 @@
-/******************************************************************
-	Style of the RTA Dialogs - base Theme
-*******************************************************************/
-@_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
-
-@_sap_ui_rta_Dialogs_BorderBoxShadow: 0.375rem 0.625rem 2rem fade(@_sap_ui_rta_Dialogs_BoxShadowDarkColor, 30),
-0.125rem 0.375rem 1rem fade(@_sap_ui_rta_Dialogs_BoxShadowDarkColor, 60),
-0 0 0 0.0625rem fade(@_sap_ui_rta_Dialogs_BoxShadowLightColor, 20),
-0 0.0625rem 0 0 fade(@_sap_ui_rta_Dialogs_BoxShadowLightColor, 20);
-
-@_sap_ui_rta_Dialogs_ArrowBoxShadow: 0.375rem -0.375rem 0.75rem 0 fade(@_sap_ui_rta_Dialogs_BoxShadowDarkColor, 30),
-0 0 0 0.0625rem fade(@_sap_ui_rta_Dialogs_BoxShadowLightColor, 20); //6px 6px 12px 1px
-
-@_sap_ui_rta_Dialogs_ArrowUpBoxShadow: -0.375rem 0.375rem 0.75rem 0 fade(@_sap_ui_rta_Dialogs_BoxShadowDarkColor, 30),
-0 0 0 0.0625rem fade(@_sap_ui_rta_Dialogs_BoxShadowLightColor, 20); //6px 6px 12px 1px
+/* =================================== */
+/* CSS for control sap.ui.rta/Dialogs  */
+/* Base theme                          */
+/* =================================== */
 
+@_sap_ui_rta_Dialogs_BorderLightColor: var(--sapButton_Lite_BorderColor); /* #fff */
+@_sap_ui_rta_Dialogs_BorderDarkColor: var(--sapButton_Accept_BorderColor); /* #006362 */
 @_sap_ui_rta_Dialogs_BorderImage: repeating-linear-gradient(-45deg, @_sap_ui_rta_Dialogs_BorderDarkColor,
 @_sap_ui_rta_Dialogs_BorderDarkColor 0.3125rem,
 @_sap_ui_rta_Dialogs_BorderLightColor 0.3125rem,
 @_sap_ui_rta_Dialogs_BorderLightColor 0.625rem) 4;
-
 @_sap_ui_rta_Dialogs_PopoverBorderImage: repeating-linear-gradient(-45deg, @_sap_ui_rta_Dialogs_BorderDarkColor,
 @_sap_ui_rta_Dialogs_BorderDarkColor 0.25rem,
 @_sap_ui_rta_Dialogs_BorderLightColor 0.25rem,
 @_sap_ui_rta_Dialogs_BorderLightColor 0.375rem) 4;
-
 @_sap_ui_rta_Dialogs_ArrowBorderImage: repeating-linear-gradient(-50deg, @_sap_ui_rta_Dialogs_BorderDarkColor,
 @_sap_ui_rta_Dialogs_BorderDarkColor 0.1875rem,
 @_sap_ui_rta_Dialogs_BorderLightColor 0.1875rem,
 @_sap_ui_rta_Dialogs_BorderLightColor 0.3125rem) 4;
 
-
 .sapMDialog.sapUiRTABorder {
-	border: 0.1875rem solid @_sap_ui_rta_Dialogs_BorderLightColor; //3px
+	border: 0.1875rem solid @_sap_ui_rta_Dialogs_BorderLightColor; /* 3px */
 	border-image: @_sap_ui_rta_Dialogs_BorderImage;
 
 	& header > .sapMDialogTitleGroup:focus::after {
@@ -44,35 +29,36 @@
 
 .sapUiRtaPopover {
 
-	&.sapMPopover, .sapMPopover {
-		border: 0.125rem solid @_sap_ui_rta_Dialogs_BorderLightColor; //2px
+	&.sapMPopover,
+	.sapMPopover {
+		border: 0.125rem solid @_sap_ui_rta_Dialogs_BorderLightColor; /* 2px */
 		border-image: @_sap_ui_rta_Dialogs_PopoverBorderImage;
-		box-shadow: @_sap_ui_rta_Dialogs_BorderBoxShadow;
+		box-shadow: var(--sapContent_Shadow2);
 
 		.sapMTableRowCustomFocus:focus > :not(.sapMListTblDummyCell:last-child)::before {
 			content: none;
 		}
 	}
 
-	&.sapMPopoverArr, .sapMPopoverArr {
-		width: 2rem; //32px
-		height: 2rem; //32px
-		bottom: -2rem; //32px
-		&:after {
-			box-shadow: @_sap_ui_rta_Dialogs_ArrowBoxShadow;
-			border: 0.125rem solid @_sap_ui_rta_Dialogs_BorderLightColor; //2px
+	&.sapMPopoverArr,
+	 .sapMPopoverArr {
+		width: 2rem; /* 32px */
+		height: 2rem; /* 32px */
+
+		&::after {
+			box-shadow: var(--sapContent_Shadow2);
+			border: 0.125rem solid @_sap_ui_rta_Dialogs_BorderLightColor; /* 2px */
 			border-image: @_sap_ui_rta_Dialogs_ArrowBorderImage;
-			width: 1rem; //16px
-			height: 0.8125rem; //13px
-			margin: -0.65rem 0 0 0.35rem; //10px 6px
+			margin-top: ~"calc(-1 * var(--sapContent_Space_Tiny))"; /* -8px */
 		}
 
 		&.sapMPopoverArrUp {
-			height: 0.8125rem; //13px
-			top: -0.8125rem; //13px
-			&:after {
-				box-shadow: @_sap_ui_rta_Dialogs_ArrowUpBoxShadow;
-				margin: 0.35rem 0 0 0.35rem; //6px 6px
+			height: 0.8125rem; /* 13px */
+			top: -0.8125rem; /* 13px */
+
+			&::after {
+				box-shadow: var(--sapContent_Shadow2);
+				margin-top: 0.35rem !important; /* 6px 6px */
 			}
 		}
 	}

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

@@ -1,43 +1,36 @@
 /******************************************************************
 	Style of the RTA Add Fields Dialog  - base Theme
 *******************************************************************/
-@_sap_ui_rta_FieldRepository_BtnFocusOutlineColor: @sapUiContentFocusColor; //#000
 @_sap_ui_rta_FieldRepository_BC_Container_BorderColor: @sapUiGroupContentBorderColor; //#000
 
 .sapUIRtaFieldRepositoryDialog {
 
-	.sapMBtn {
-		&:focus {
-			> .sapMBtnInner {
-				outline: 0.0625rem dotted @_sap_ui_rta_FieldRepository_BtnFocusOutlineColor; //1px
-				border: 0.0625rem solid transparent;
-			}
-		}
-	}
-
 	.sapUIRtaListItem {
 		line-height: 1rem;
 	}
 
 	.sapUIRtaBusinessContextContainer {
 		width: 100%;
-		margin-top: 0.25rem; //4px
-		padding-bottom: 0.5rem; //8px
-		border-bottom: 0.0625rem solid @_sap_ui_rta_FieldRepository_BC_Container_BorderColor; //1px
+		padding: var(--sapContent_Space_Tiny) 0; /* 8px */
+		border-bottom: 0.0625rem solid @_sap_ui_rta_FieldRepository_BC_Container_BorderColor; /* 1px */
 
 		> div:not(:first-child) {
-			padding-left: 2.125rem;     //34px
-			padding-right: 0.625rem; //10px
+			padding-left: var(--sapContent_Space_Medium); /* 32px */
+			padding-right: var(--sapContent_Space_Tiny); /* 8px */
 		}
 
 		> div:first-child {
 			font-weight: bold;
-			padding: 0.25rem 0 0.25rem 0.625rem;
+			padding: var(--sapContent_Space_Tiny); /* 8px */
+		}
+
+		.sapMText {
+			max-width: 37.5rem; /* 600px */
 		}
 
 	}
 
 	.sapUIRtaCCDialogScrollContainer {
-		height: 25rem !important;
+		max-height: 25rem; /* 400px */
 	}
 }

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

@@ -1,19 +1,21 @@
-/******************************************************************
-	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
+/* ================================================ */
+/* CSS for control sap.ui.rta/FlexSupportExtension  */
+/* Base theme                                       */
+/* ================================================ */
+
+@_sap_ui_rta_FlexSupportExtension_BackgroundColor: fade(@sapUiSelected, 5%); /* rgba(143, 181, 255, 0.05); */
+@_sap_ui_rta_FlexSupportExtension_BorderRadius: var(--sapButton_BorderCornerRadius); /* 0.375rem */
+@_sap_ui_rta_FlexSupportExtension_OutlineColor: var(--sapSelectedColor); /* #8fb5ff */
 
 .sapUiFlexibilitySupportExtension_Selected {
-	box-shadow: @_sap_ui_rta_FlexSupportExtension_BoxShadow;
-	&:after {
-		content: " ";
+	box-shadow: var(--sapContent_Shadow2);
+
+	&::after {
+		content: '';
 		background: @_sap_ui_rta_FlexSupportExtension_BackgroundColor;
-		opacity: 0.40;
+		opacity: 0.4;
 		border-radius: @_sap_ui_rta_FlexSupportExtension_BorderRadius;
-		outline: 0.125rem solid @_sap_ui_rta_FlexSupportExtension_OutlineColor; //1px
-		outline-offset: -0.125rem; //1px
+		outline: 0.125rem solid @_sap_ui_rta_FlexSupportExtension_OutlineColor; /* 1px */
+		outline-offset: -0.125rem; /* 1px */
 	}
 }

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

@@ -1,8 +1,10 @@
-/******************************************************************
-	Style of the RTA MessageBox  - base Theme
-*******************************************************************/
+/* ====================================== */
+/* CSS for control sap.ui.rta/MessageBox  */
+/* Base theme                             */
+/* ====================================== */
 
 .sapUiRtaMessageBox {
+
 	& .sapMLnk,
 	& .sapMText {
 		display: inline;

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

@@ -1,56 +1,60 @@
-/******************************************************************
-	Style of the RTA Overlays - base Theme
-*******************************************************************/
-@_sap_ui_rta_Overlay_ResizeHandleColor: @sapUiSelected; //#8fb5ff
-@_sap_ui_rta_Overlay_ErrorBorderColor: @sapUiErrorBorder; //#ff0000
-@_sap_ui_rta_Overlay_BoxShadow: @sapUiUx3ToolPopupShadow; //0px 6px 12px 0px fade(black, 30);
+/* =================================== */
+/* CSS for control sap.ui.rta/Overlay  */
+/* Base theme                          */
+/* =================================== */
+
+@_sap_ui_rta_Overlay_ResizeHandleColor: var(--sapSelectedColor); /* #8fb5ff */
+@_sap_ui_rta_Overlay_ErrorBorderColor: var(--sapErrorBorderColor); /* #ff0000 */
 
 .sapUiRtaRoot {
+
 	.sapUiRtaMarginBottom {
-		margin-bottom: 2.5rem; //40px
+		margin-bottom: var(--sapContent_Space_Medium); //32px // To be complient with standard paddings
 	}
 
 	.sapUiRtaPaddingTop {
-		padding-top: 2.5rem; //40px
+		padding-top: var(--sapContent_Space_Medium); //32px // To be complient with standard paddings
 	}
 
 	&.sapUiRtaStretchPaddingTop, .sapUiRtaStretchPaddingTop {
-		padding-top: 1.5rem; //24px
+		padding-top: var(--sapContent_Space_Medium); //32px // To be complient with standard paddings
 	}
 }
 
-.sapUiSizeCozy .sapUiRtaRoot .sapUiRtaStretchPaddingTop, .sapUiSizeCozy .sapUiRtaRoot.sapUiRtaStretchPaddingTop {
-	padding-top: 2rem; //32px
+.sapUiSizeCozy .sapUiRtaRoot .sapUiRtaStretchPaddingTop,
+.sapUiSizeCozy .sapUiRtaRoot.sapUiRtaStretchPaddingTop {
+	padding-top: var(--sapContent_Space_Medium); //32px
 }
 
 .sapUiRta:not(.sapUiRtaVisualizationMode) {
+
 	.sapUiRtaResizeHandle {
 		cursor: col-resize;
 		position: absolute;
 		top: 0;
 		bottom: 0;
-		width: 0.625rem; // 10px
+		width: 0.625rem; /* 10px */
 		background-clip: content-box;
 		background-color: @_sap_ui_rta_Overlay_ResizeHandleColor;
 		-webkit-user-select: none;
 		user-select: none;
 
-		&:before {
-			content: "";
+		&::before {
+			content: '';
 			position: absolute;
 			top: 10%;
 			bottom: 10%;
 			left: 37.5%;
-			border-left: 0.0625rem solid @sapUiHighlightTextColor; //1px
+			border-left: 0.0625rem solid var(--sapHighlightTextColor); /* 1px */
 		}
 
-		&:after {
-			content: "";
+		&::after {
+			content: '';
 			position: absolute;
 			top: 25%;
 			bottom: 25%;
 			left: 62.5%;
-			border-left: 0.0625rem solid @sapUiHighlightTextColor; //1px
+			border-left: 0.0625rem solid var(--sapHighlightTextColor); /* 1px */
 		}
 	}
 
@@ -58,8 +62,8 @@
 		position: relative;
 		top: 0;
 		bottom: 0;
-		width: 0.5rem; // 8px
-		border-right: 0.125rem dotted @_sap_ui_rta_Overlay_ResizeHandleColor; // 2px
+		width: 0.5rem; /* 8px */
+		border-right: 0.125rem dotted @_sap_ui_rta_Overlay_ResizeHandleColor; /* 2px */
 		background-clip: content-box;
 		-webkit-user-select: none;
 		user-select: none;
@@ -76,14 +80,15 @@
 
 	.sapUiDtOverlaySelected {
 		transition: box-shadow .25s;
-		box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
+		box-shadow: var(--sapContent_Shadow2);
 
-		&.sapUiRtaErrorBg:after {
-			outline: 0.125rem solid @_sap_ui_rta_Overlay_ErrorBorderColor; //2px
-			outline-offset: -0.125rem; //2px
+		&.sapUiRtaErrorBg::after {
+			outline: 0.125rem solid @_sap_ui_rta_Overlay_ErrorBorderColor; /* 2px */
+			outline-offset: -0.125rem; /* 2px */
 			border: none
 		}
 	}
+
 	.sapUiRtaEditableField {
 		position: absolute;
 		top: 0;
@@ -98,11 +103,13 @@
 }
 
 .sapUiRta {
+
 	&.sapUiRtaVisualizationMode {
+
 		.sapUiDtOverlayHover {
 			background: inherit;
 
-			&:after {
+			&::after {
 				content: none;
 			}
 		}

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

@@ -1,30 +1,38 @@
-/******************************************************************
-	Style of the RTA OverlayWithScrollBar - base Theme
-*******************************************************************/
+/* ================================================ */
+/* CSS for control sap.ui.rta/OverlayWithScrollbar  */
+/* Base theme                                       */
+/* ================================================ */
 
 .sapUiRta .sapUiDtOverlayWithScrollBar {
+
 	&.sapUiDtOverlaySelected {
+
 		&.sapUiDtOverlayWithScrollBarVertical {
-			&:after {
+
+			&::after {
 				inset-inline-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
 			}
 		}
 
 		&.sapUiDtOverlayWithScrollBarHorizontal {
-			&:after {
+
+			&::after {
 				inset-block-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
 			}
 		}
 
 		&.sapUiDtOverlayFocusable {
+
 			&.sapUiDtOverlayWithScrollBarVertical {
-				&:focus:before {
+
+				&:focus::before {
 					inset-inline-end: var(--sap-ui-rta-scrollbar-scrollWidthPlusTwo) !important;
 				}
 			}
 
 			&.sapUiDtOverlayWithScrollBarHorizontal {
-				&:focus:before {
+
+				&:focus::before {
 					inset-block-end: var(--sap-ui-rta-scrollbar-scrollWidthPlusTwo) !important;
 				}
 			}
@@ -32,28 +40,34 @@
 	}
 
 	&.sapUiDtOverlayFocusable {
+
 		&.sapUiDtOverlayWithScrollBarHorizontal {
-			&:focus:before {
+
+			&:focus::before {
 				inset-block-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
 			}
 		}
 
 		&.sapUiDtOverlayWithScrollBarVertical {
-			&:focus:before {
+
+			&:focus::before {
 				inset-inline-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
 			}
 		}
 	}
 
 	&.sapUiDtOverlayHover {
+
 		&.sapUiDtOverlayWithScrollBarHorizontal {
-			&:after {
+
+			&::after {
 				inset-block-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
 			}
 		}
 
 		&.sapUiDtOverlayWithScrollBarVertical {
-			&:after {
+
+			&::after {
 				inset-inline-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
 			}
 		}