@openui5/sap.m 1.130.1 → 1.131.0

package/src/sap/m/themes/base/MenuButton.less

@@ -8,6 +8,7 @@
 	width: auto;
 	max-width: 100%;
 }
+
 .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner {
 	text-align: left;
 	padding-right: 2rem;
@@ -24,7 +25,7 @@
 	top: 0;
 	right: 0;
 	pointer-events: none;
-	font-family: 'SAP-icons';
+	font-family: var(--sapContent_IconFontFamily);
 	content: '\e1ef';
 	display: inline-block;
 	font-size: 0.75rem;
@@ -32,21 +33,22 @@
 	line-height: 2.125rem;
 	padding-right: 0.75rem;
 	padding-left: 0.5625rem;
-	color: @sapUiButtonIconColor;
+	color: var(--sapButton_IconColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner::after {
-	color: @sapUiButtonHoverTextColor;
+	color: var(--sapButton_Hover_TextColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnSplit .sapMSBActive:not(.sapMBtnDisabled) > .sapMBtnInner {
 	background-image: none;
 	text-shadow: none;
-	background-color: @sapUiButtonActiveBackground;
-	border-color:     @sapUiButtonActiveBorderColor;
+	background-color: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
 }
 
 .sapUiSizeCompact {
+
 	.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner {
 		padding-right: 1.625rem;
 		padding-left: 0.5rem;
@@ -64,55 +66,55 @@
 	}
 }
 
-//type Emphasized
+/* type Emphasized */
 .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnEmphasized::after {
-	color: @sapUiButtonEmphasizedTextColor;
-	text-shadow: @sapUiButtonEmphasizedTextShadow;
+	color: var(--sapButton_Emphasized_TextColor);
+	text-shadow: var(--sapButton_Emphasized_TextShadow);
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnEmphasized::after {
-	color: @sapUiButtonEmphasizedHoverTextColor;
+	color: var(--sapButton_Emphasized_Hover_TextColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnEmphasized.sapMBtnActive::after {
 	text-shadow: none;
 }
 
-//type Accept
+/* type Accept */
 .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnAccept::after {
-	color: @sapUiButtonAcceptTextColor;
+	color: var(--sapButton_Accept_TextColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnAccept::after {
-	color: @sapUiButtonAcceptHoverTextColor;
+	color: var(--sapButton_Accept_Hover_TextColor);
 }
 
-//type Attention
+/* type Attention */
 .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnAttention::after {
-	color: @sapUiButtonAttentionTextColor;
+	color: var(--sapButton_Attention_TextColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnAttention::after {
-	color: @sapUiButtonAttentionHoverTextColor;
+	color: var(--sapButton_Attention_Hover_TextColor);
 }
 
-//type Reject
+/* type Reject */
 .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnReject::after {
-	color: @sapUiButtonRejectTextColor;
+	color: var(--sapButton_Reject_TextColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnReject::after {
-	color: @sapUiButtonRejectHoverTextColor;
+	color: var(--sapButton_Reject_Hover_TextColor);
 }
 
-//type Default, Transparent(header)
+/* type Default, Transparent(header) */
 .sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnActive::after {
-	color: @sapUiButtonActiveTextColor;
+	color: var(--sapButton_Active_TextColor);
 }
 
-//Transparent(footer)
+/* Transparent(footer) */
 .sapMIBar-CTX.sapMFooter-CTX .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
-	text-shadow: @sapUiButtonEmphasizedTextShadow;
+	text-shadow: var(--sapButton_Emphasized_TextShadow);
 }
 
 .sapMFooter-CTX .sapMMenuBtn .sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
@@ -124,27 +126,27 @@
 }
 
 .sapMMenuBtn.sapMMenuBtnSplit .sapMSBActive:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnReject {
-	background-color: @sapUiButtonRejectActiveBackground;
-	border-color:     @sapUiButtonRejectActiveBorderColor;
+	background-color: var(--sapButton_Reject_Active_Background);
+	border-color: var(--sapButton_Reject_Active_BorderColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnSplit .sapMSBActive:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnAccept {
-	background-color: @sapUiButtonAcceptActiveBackground;
-	border-color:     @sapUiButtonAcceptActiveBorderColor;
+	background-color: var(--sapButton_Accept_Active_Background);
+	border-color: var(--sapButton_Accept_Active_BorderColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnSplit .sapMSBActive:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnAttention {
-	background-color: @sapUiButtonAttentionActiveBackground;
-	border-color: @sapUiButtonAttentionActiveBorderColor;
+	background-color: var(--sapButton_Attention_Active_Background);
+	border-color: var(--sapButton_Attention_Active_BorderColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnSplit .sapMSBActive:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnEmphasized {
-	background-color: @sapUiButtonEmphasizedActiveBackground;
-	border-color:     @sapUiButtonEmphasizedActiveBorderColor;
+	background-color: var(--sapButton_Emphasized_Active_Background);
+	border-color: var(--sapButton_Emphasized_Active_BorderColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnSplit .sapMSBActive:not(.sapMBtnDisabled) > .sapMBtnInner .sapMBtnIcon {
-	color: @sapUiButtonActiveTextColor;
+	color: var(--sapButton_Active_TextColor);
 }
 
 .sapMMenuBtn .sapMBtn .sapMBtnInner {
@@ -155,38 +157,38 @@
 	padding-right: 0.375rem;
 }
 
-.sapMMenuBtn .sapMBtn .sapMBtnInner.sapMBtnText:not(.sapMBtnIconFirst) .sapMBtnContent{
+.sapMMenuBtn .sapMBtn .sapMBtnInner.sapMBtnText:not(.sapMBtnIconFirst) .sapMBtnContent {
 	width: 100%;
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnCritical::after {
-	color: @sapUiButtonCriticalTextColor;
+	color: var(--sapButton_Critical_TextColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnCritical::after {
-	color: @sapUiButtonCriticalHoverTextColor;
+	color: var(--sapButton_Critical_Hover_TextColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnNegative::after {
-	color: @sapUiButtonNegativeTextColor;
+	color: var(--sapButton_Negative_TextColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnNegative::after {
-	color: @sapUiButtonNegativeHoverTextColor;
+	color: var(--sapButton_Negative_Hover_TextColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnSuccess::after {
-	color: @sapUiButtonSuccessTextColor;
+	color: var(--sapButton_Success_TextColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnSuccess::after {
-	color: @sapUiButtonSuccessHoverTextColor;
+	color: var(--sapButton_Success_Hover_TextColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnNeutral::after {
-	color: @sapUiButtonNeutralTextColor;
+	color: var(--sapButton_Neutral_TextColor);
 }
 
 .sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnNeutral::after {
-	color: @sapUiButtonNeutralHoverTextColor;
-}
+	color: var(--sapButton_Neutral_Hover_TextColor);
+}

package/src/sap/m/themes/base/MenuListItem.less

@@ -4,7 +4,6 @@
 /* =================================== */
 
 /* phone */
-
 .sapMRespMenuDialog .sapMLIB {
 	position: relative;
 	padding: 0 0.875rem;
@@ -34,7 +33,7 @@
 
 .sapMMenuLIArrowRightIcon {
 	font-size: .75rem;
-	width: 1.875remrem;
+	width: 1.875rem;
 	height: 3rem;
 	line-height: 3rem;
 }
@@ -57,12 +56,12 @@
 
 .sapMMLIDisabled .sapMSLITitle,
 .sapMMLIDisabled .sapMSLITitleOnly {
-	color: @sapUiContentDisabledTextColor;
+	color: var(--sapContent_DisabledTextColor);
 }
 
 html.sap-phone .sapMMLIDisabled .sapMMenuLIImgThumbIcon,
 html.sap-tablet .sapMMLIDisabled .sapMMenuLIImgThumbIcon {
-	color: @sapUiContentDisabledTextColor;
+	color: var(--sapContent_DisabledTextColor);
 }
 
 .sapMMenuLISel {
@@ -70,10 +69,11 @@ html.sap-tablet .sapMMLIDisabled .sapMMenuLIImgThumbIcon {
 	padding-inline-end: 0;
 	font-weight: normal;
 	text-align: center;
+
 	&::after {
-		color: @sapSelectedColor;
-		content: "\e05b";
-		font-family: 'SAP-icons';
+		color: var(--sapSelectedColor);
+		content: '\e05b';
+		font-family: var(--sapContent_IconFontFamily);
 		outline: none;
 		line-height: inherit;
 		padding-inline-end: 0.125rem;
@@ -82,34 +82,24 @@ html.sap-tablet .sapMMLIDisabled .sapMMenuLIImgThumbIcon {
 	}
 }
 
-/* end phone */
-
 /* desktop and tablet */
-
 .sapMMenu .sapUiMnuDiv > hr {
 	height: 0;
 	margin: 0;
 }
 
-// really strong selector in the sapUiMnu demands this
+/* really strong selector in the sapUiMnu demands this */
 .sapMMenu.sapUiMnu.sapUiMnuCozySupport .sapUiMnuItmTxt {
 	text-overflow: ellipsis;
 	max-width: 100%;
-	max-width: -moz-available;          /* WebKit-based browsers will ignore this. */
-	max-width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
+	max-width: -moz-available; /* WebKit-based browsers will ignore this. */
+	max-width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
 	max-width: fill-available;
 }
 
-/* end cozy */
-
 /* compact */
-
 .sapUiSizeCompact .sapMMenuLIArrowRightIcon {
 	width: 2rem;
 	height: 2rem;
 	line-height: 2rem;
-}
-
-/* end compact */
-
-/* end desktop and tablet */
+}

package/src/sap/m/themes/base/MessageBox.less

@@ -3,13 +3,13 @@
 /* Base theme                        */
 /* ================================= */
 
-// header shadow - different states
+/* header shadow - different states */
 @_sap_m_MessageBox_HeaderShadow: inset 0 -0.125rem;
-@_sap_m_MessageBox_InformationShadow: @_sap_m_MessageBox_HeaderShadow @sapUiInformationBorder;
-@_sap_m_MessageBox_WarningShadow: @_sap_m_MessageBox_HeaderShadow @sapUiWarningBorder;
-@_sap_m_MessageBox_ErrorShadow: @_sap_m_MessageBox_HeaderShadow @sapUiErrorBorder;
-@_sap_m_MessageBox_SuccessShadow: @_sap_m_MessageBox_HeaderShadow @sapUiSuccessBorder;
-@_sap_m_MessageBox_QuestionShadow: @_sap_m_MessageBox_HeaderShadow @sapUiContentHeaderShadow;
+@_sap_m_MessageBox_InformationShadow: @_sap_m_MessageBox_HeaderShadow var(--sapInformationBorderColor);
+@_sap_m_MessageBox_WarningShadow: @_sap_m_MessageBox_HeaderShadow var(--sapWarningBorderColor);
+@_sap_m_MessageBox_ErrorShadow: @_sap_m_MessageBox_HeaderShadow var(--sapErrorBorderColor);
+@_sap_m_MessageBox_SuccessShadow: @_sap_m_MessageBox_HeaderShadow var(--sapSuccessBorderColor);
+@_sap_m_MessageBox_QuestionShadow: @_sap_m_MessageBox_HeaderShadow var(--sapContent_HeaderShadow);
 
 .sapMMessageBoxLinkText {
 	vertical-align: bottom;
@@ -22,38 +22,43 @@
 }
 
 .sapMDialog.sapMMessageBoxInfo .sapMDialogIcon.sapUiIcon {
-	color: @sapUiNeutralElement;
+	color: var(--sapNeutralElementColor);
 }
 
 .sapMDialog.sapMMessageBoxWarning .sapMDialogIcon.sapUiIcon {
-	color: @sapUiCriticalElement;
+	color: var(--sapCriticalElementColor);
 }
 
 .sapMDialog.sapMMessageBoxError .sapMDialogIcon.sapUiIcon {
-	color: @sapUiNegativeElement;
+	color: var(--sapNegativeElementColor);
 }
 
 .sapMDialog.sapMMessageBoxSuccess .sapMDialogIcon.sapUiIcon {
-	color: @sapUiPositiveElement;
+	color: var(--sapPositiveElementColor);
 }
 
 .sapMDialog.sapMMessageBoxQuestion .sapMDialogIcon.sapUiIcon {
-	color: @sapUiNeutralElement;
+	color: var(--sapNeutralElementColor);
 }
 
 .sapMDialog.sapMMessageDialog {
+
 	&.sapMMessageBoxInfo .sapMDialogTitleGroup > .sapMBar {
 		box-shadow: @_sap_m_MessageBox_InformationShadow;
 	}
+
 	&.sapMMessageBoxWarning .sapMDialogTitleGroup > .sapMBar {
 		box-shadow: @_sap_m_MessageBox_WarningShadow;
 	}
+
 	&.sapMMessageBoxError .sapMDialogTitleGroup > .sapMBar {
 		box-shadow: @_sap_m_MessageBox_ErrorShadow;
 	}
+
 	&.sapMMessageBoxSuccess .sapMDialogTitleGroup > .sapMBar {
 		box-shadow: @_sap_m_MessageBox_SuccessShadow;
 	}
+
 	&.sapMMessageBoxQuestion .sapMDialogTitleGroup > .sapMBar {
 		box-shadow: @_sap_m_MessageBox_QuestionShadow;
 	}

package/src/sap/m/themes/base/MessageView.less

@@ -129,6 +129,7 @@
 
 	& .sapMLnk {
 		font-size: @sapMFontHeader5Size;
+		line-height: 1.5rem;
 	}
 
 	& .sapMSLITitleOnly {

package/src/sap/m/themes/base/NotificationListBase.less

@@ -14,7 +14,8 @@
 		margin: 0 0.5rem;
 	}
 }
-// Priority icons
+
+/* Priority icons */
 
 .sapMNLIBPriority {
 	padding-right: 0.625rem;
@@ -26,7 +27,7 @@
 }
 
 .sapMNLIBPriorityLow .sapUiIcon {
-	color: @sapUiSuccessBorder;
+	color: var(--sapSuccessBorderColor);
 
 	&::before {
 		content: '\e1c1';
@@ -34,7 +35,7 @@
 }
 
 .sapMNLIBPriorityMedium .sapUiIcon {
-	color: @sapUiWarningBorder;
+	color: var(--sapWarningBorderColor);
 
 	&::before {
 		content: '\e053';
@@ -42,7 +43,7 @@
 }
 
 .sapMNLIBPriorityHigh .sapUiIcon {
-	color: @sapUiErrorBorder;
+	color: var(--sapErrorBorderColor);
 
 	&::before {
 		content: '\e1ec';
@@ -54,7 +55,8 @@
 }
 
 .sapUiSizeCompact {
+
 	.sapMNLIBPriority {
 		padding-right: 0.5rem;
 	}
-}
+}

package/src/sap/m/themes/base/NotificationListGroup.less

@@ -3,10 +3,11 @@
 /* Base theme                                   */
 /* ============================================ */
 
-@_sap_m_NotificationListGroup_Background: @sapUiListGroupHeaderBackground;
-@_sap_m_NotificationListGroup_HeaderColor: @sapUiListTableGroupHeaderTextColor;
+@_sap_m_NotificationListGroup_Background: var(--sapList_GroupHeaderBackground);
+@_sap_m_NotificationListGroup_HeaderColor: var(--sapList_TableGroupHeaderTextColor);
 
 .sapMNLGroup {
+
 	&.sapMLIB {
 		display: block;
 		padding: 0;
@@ -23,7 +24,7 @@
 		position: relative;
 		min-height: 2.75rem;
 		background: @_sap_m_NotificationListGroup_Background;
-		border-bottom: 0.0625rem solid @sapUiListGroupHeaderBorderColor;
+		border-bottom: 0.0625rem solid var(--sapList_GroupHeaderBorderColor);
 		box-sizing: border-box;
 		padding: 0.75rem 0.5rem 0 1rem;
 		display: flex;
@@ -37,8 +38,8 @@
 		.sapMNLGroupTitle {
 			padding: 0.75rem 0;
 			color: @_sap_m_NotificationListGroup_HeaderColor;
-			font-size: @sapMFontHeader6Size;
-			font-family: @sapUiFontHeaderFamily;
+			font-size: var(--sapFontHeader6Size);
+			font-family: var(--sapFontHeaderFamily);
 			font-weight: bold;
 			overflow-wrap: break-word;
 			flex: 1;
@@ -47,8 +48,8 @@
 	}
 
 	&:focus .sapMNLGroupHeader::before {
-		content: " ";
-		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		content: ' ';
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 		position: absolute;
 		top: 1px;
 		right: 1px;
@@ -70,21 +71,21 @@
 
 	.sapMNLGroupMaxNotifications {
 		padding: 1rem;
-		background: @sapUiListBackground;
+		background: var(--sapList_Background);
 		text-align: center;
 
 		.sapMNLGroupMNTitle {
-			font-family: @sapUiFontHeaderFamily;
-			font-size: @sapMFontHeader5Size;
+			font-family: var(--sapFontHeaderFamily);
+			font-size: var(--sapFontHeader5Size);
 			font-weight: @sapUiFontHeaderWeight;
-			color: @sapUiGroupTitleTextColor;
+			color: var(--sapGroup_TitleTextColor);
 			margin-bottom: 0.5rem;
 		}
 
 		.sapMNLGroupMNDescription {
-			font-family: @sapUiFontFamily;
+			font-family: var(--sapFontFamily);
 			font-size: @sapMFontMediumSize;
-			color: @sapUiContentLabelColor;
+			color: var(--sapContent_LabelColor);
 		}
 	}
 }
@@ -94,7 +95,9 @@
 }
 
 .sapUiSizeCompact {
+
 	.sapMNLGroup {
+
 		.sapMNLGroupHeader {
 			padding: 0.5rem 0.5rem 0 0.75rem;
 

package/src/sap/m/themes/base/NotificationListItem.less

@@ -3,8 +3,8 @@
 /* Base theme                                  */
 /* =========================================== */
 
-@_sap_m_NotificationListBase_ItemBackground: @sapUiListBackground;
-@_sap_m_NotificationListBase_ItemGroupedBackground: @sapUiListBackground;
+@_sap_m_NotificationListBase_ItemBackground: var(--sapList_Background);
+@_sap_m_NotificationListBase_ItemGroupedBackground: var(--sapList_Background);
 
 .sapMNLI {
 	background: @_sap_m_NotificationListBase_ItemBackground;
@@ -34,19 +34,17 @@
 	.sapMNLIContent {
 		display: flex;
 		flex-direction: column;
-		min-width: 0; // chrome flex overflow issue
+		min-width: 0; /* chrome flex overflow issue */
 		flex: 1;
 		padding-right: 1rem;
 
 		.sapMNLITitle {
 			display: flex;
 			align-items: flex-start;
-
-			font-size: @sapMFontHeader6Size;
+			font-size: var(--sapFontHeader6Size);
 			font-weight: @sapUiFontHeaderWeight;
 			line-height: 1.4;
-			color: @sapUiGroupTitleTextColor;
-
+			color: var(--sapGroup_TitleTextColor);
 			padding-bottom: 0.25rem;
 		}
 
@@ -66,18 +64,16 @@
 	.sapMNLIFooter {
 		display: flex;
 		align-items: center;
-
 		padding-top: 0.5rem;
 
 		.sapMNLIFooterItem {
 			font-size: @sapMFontMediumSize;
-			color: @sapUiContentLabelColor;
-
+			color: var(--sapContent_LabelColor);
 			padding-top: 2px;
 			white-space: nowrap;
 		}
 
-		// the author name should truncate
+		/* the author name should truncate */
 		.sapMNLIFooterItem:first-child {
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -95,7 +91,9 @@
 	}
 
 	&.sapMNLIUnread {
+
 		.sapMNLIContent {
+
 			.sapMNLITitle {
 				font-weight: bold;
 			}
@@ -108,8 +106,8 @@
 	}
 
 	&:focus::before {
-		content: " ";
-		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		content: ' ';
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 		position: absolute;
 		top: 1px;
 		right: 1px;
@@ -129,7 +127,7 @@
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 	overflow: hidden;
-	max-height: 40px; // font-size * line-height (value 1.4) * 2 (number of rows)
+	max-height: 40px; /* font-size * line-height (value 1.4) * 2 (number of rows) */
 }
 
 .sapMNLIShowMore .sapMLnk {
@@ -138,7 +136,7 @@
 }
 
 .sapMNLITitleText {
-	font-size: @sapMFontHeader6Size;
+	font-size: var(--sapFontHeader6Size);
 }
 
 .sapMLIB.sapMNLI {
@@ -146,6 +144,7 @@
 }
 
 .sapUiSizeCompact {
+
 	.sapMNLI {
 		padding: 1rem 0.5rem 1rem 0.75rem;
 	}