@openui5/sap.m 1.128.0 → 1.130.0

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

@@ -24,47 +24,53 @@
 
 .sapMColorPalette {
 	height: 100%;
-	// overstyling the button to more like a menu item
+	/* overstyling the button to more like a menu item */
 	.sapMBtnText {
 		text-align: left;
 	}
+
 	.sapMBtn {
-		// Remove paddings and border of the inner element, so we defined them at root level
+		/* Remove paddings and border of the inner element, so we defined them at root level */
 		.sapMBtnInner {
 			border: none;
-			position: static; // used to show the left and right border of the outline when focused
+			position: static; /* used to show the left and right border of the outline when focused */
 			background-color: inherit;
+
 			&.sapMBtnText {
 				padding: 0 0 0 1rem;
 			}
 		}
-		// Define paddings, margins and border at root level
+		/* Define paddings, margins and border at root level */
 		margin: 0;
 		padding: 0;
 		border: none;
 
-		// Remove hover & active styling of the inner button element
-		> .sapMBtnActive, &:hover > .sapMBtnActive, &:active > .sapMBtnActive {
+		/* Remove hover & active styling of the inner button element */
+		> .sapMBtnActive,
+		&:hover > .sapMBtnActive,
+		&:active > .sapMBtnActive {
 			color: inherit;
 			background: inherit;
 		}
+
 		.sapMBtnTransparent {
 			color: inherit;
 		}
+
 		&:hover > .sapMBtnTransparent.sapMBtnHoverable {
 			background-color: inherit;
 		}
 
-		// define active & hover on the root button level
+		/* define active & hover on the root button level */
 		&:not(active) {
-			color: @sapUiButtonTextColor;
+			color: var(--sapButton_TextColor);
 			text-shadow: none;
 		}
 
-		// active
+		/* active */
 		&:active:not(:hover) {
-			background-color: @sapUiButtonBackground;
-			color: @sapUiButtonTextColor;
+			background-color: var(--sapButton_Background);
+			color: var(--sapButton_TextColor);
 			text-shadow: none;
 		}
 
@@ -73,21 +79,24 @@
 		}
 
 		&:active {
-			background-color: @sapUiListActiveBackground;
-			color: @sapUiButtonActiveTextColor;
+			background-color: var(--sapList_Active_Background);
+			color: var(--sapButton_Active_TextColor);
 		}
 
-		// hover
+		/* hover */
 		&:hover:not(:active) {
-			background: @sapUiListHoverBackground;
+			background: var(--sapList_Hover_Background);
 		}
 
 		&:focus {
-			> .sapMFocusable { // The focus should go at the outside container
+
+			> .sapMFocusable { /* The focus should go at the outside container */
+
 				.sap-desktop & {
 					outline: none;
 					outline-offset: 0;
-					.sapMBtnFocusDiv { // Button has special focus handling for IE, so remove it as well
+
+					.sapMBtnFocusDiv { /* Button has special focus handling for IE, so remove it as well */
 						box-sizing: inherit;
 						position: inherit;
 						left: 0;
@@ -99,15 +108,18 @@
 						pointer-events: none;
 					}
 				}
+
 				.sap-desktop .sapContrast &,
 				.sap-desktop .sapContrastPlus & {
 					outline: none;
 					outline-offset: 0;
 				}
 			}
+
 			.sap-desktop & {
-				&:after {
-					content: " ";
+
+				&::after {
+					content: ' ';
 					position: absolute;
 					box-sizing: border-box;
 					left: 2px;
@@ -115,7 +127,7 @@
 					right: 2px;
 					bottom: 2px;
 					border-radius: 0;
-					border: 0.0625rem dotted @sapUiContentFocusColor;
+					border: 0.0625rem dotted var(--sapContent_FocusColor);
 					pointer-events: none;
 				}
 			}
@@ -130,7 +142,8 @@
 	.sapMColorPaletteSeparator {
 		position: relative;
 		height: 0.0625rem;
-		// overstyling the hr to look like menu separator line
+
+		/* overstyling the hr to look like menu separator line */
 		> hr {
 			display: inline-block;
 			position: absolute;
@@ -138,24 +151,27 @@
 			left: 0;
 			right: 0;
 			border-width: 0;
-			border-top: 1px solid @sapUiToolbarSeparatorColor;
-			color: @sapUiToolbarSeparatorColor;
+			border-top: 1px solid var(--sapToolbar_SeparatorColor);
+			color: var(--sapToolbar_SeparatorColor);
 		}
 	}
+
 	:focus {
 		outline: none;
 	}
-	.sapMColorPaletteSquare:focus{
+
+	.sapMColorPaletteSquare:focus {
 		outline: none
 	}
 }
 
 html:not(.sap-phone) {
 
-	// Dimension and paddings of the Palette
+	/* Dimension and paddings of the Palette */
 	.sapMColorPalette {
 		max-width: @_sap_m_ColorPalette_SwatchesPerRow * @_sap_m_ColorPalette_SwatchWidthHitAreaCozy + 2 * @_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCozy;
 		min-width: @_sap_m_ColorPalette_SwatchesPerRow * @_sap_m_ColorPalette_SwatchWidthHitAreaCozy + 2 * @_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCozy;
+
 		.sapMColorPaletteContent {
 			padding: @_sap_m_ColorPalette_SwatchContainerPaddingTopBottomCozy @_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCozy;
 		}
@@ -164,18 +180,22 @@ html:not(.sap-phone) {
 	& .sapUiSizeCompact .sapMColorPalette {
 		max-width: @_sap_m_ColorPalette_SwatchesPerRow * @_sap_m_ColorPalette_SwatchWidthHitAreaCompact + 2 * @_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCompact;
 		min-width: @_sap_m_ColorPalette_SwatchesPerRow * @_sap_m_ColorPalette_SwatchWidthHitAreaCompact + 2 * @_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCompact;
+
 		.sapMColorPaletteContent {
 			padding: @_sap_m_ColorPalette_SwatchContainerPaddingTopBottomCompact @_sap_m_ColorPalette_SwatchContainerPaddingLeftRightCompact;
 		}
 	}
+
 	.sapMColorPalette {
+
 		.sapMBtnInner {
 			border-radius: 0.25rem 0.25rem 0 0;
 		}
+
 		.sapMColorPaletteSquare {
 			box-sizing: border-box;
 			position: relative;
-			border: 0.0625rem solid @sapUiContentForegroundBorderColor;
+			border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
 			border-radius: 0.125rem;
 			width: @_sap_m_ColorPalette_SwatchWidthCozy;
 			height: @_sap_m_ColorPalette_SwatchWidthCozy;
@@ -183,35 +203,37 @@ html:not(.sap-phone) {
 			margin: (@_sap_m_ColorPalette_SwatchWidthHitAreaCozy - @_sap_m_ColorPalette_SwatchWidthCozy)/2;
 
 			&:hover,
-			&.sapMColorPaletteSquareSelected { /* now the hit area (margin) gets occupied by the content*/
+			&.sapMColorPaletteSquareSelected { /* now the hit area (margin) gets occupied by the content */
 				margin: 0;
 				width: @_sap_m_ColorPalette_SwatchWidthHitAreaCozy;
 				height: @_sap_m_ColorPalette_SwatchWidthHitAreaCozy;
+
 				> div {
-					border: 1px solid @sapUiGroupContentBackground;
+					border: 1px solid var(--sapGroup_ContentBackground);
 				}
 			}
 
-			&:focus:before {
-				content: "";
+			&:focus::before {
+				content: '';
 				box-sizing: border-box;
 				position: absolute;
 				left: 1px;
 				top: 1px;
 				right: 1px;
 				bottom: 1px;
-				border: 1px solid @sapUiContentFocusColor;
+				border: 1px solid var(--sapContent_FocusColor);
 				pointer-events: none;
 			}
-			&:focus:after {
-				content: "";
+
+			&:focus::after {
+				content: '';
 				position: absolute;
 				box-sizing: border-box;
 				left: 1px;
 				top: 1px;
 				right: 1px;
 				bottom: 1px;
-				border: 1px dotted @sapUiContentContrastFocusColor;
+				border: 1px dotted var(--sapContent_ContrastFocusColor);
 				pointer-events: none;
 			}
 
@@ -222,11 +244,13 @@ html:not(.sap-phone) {
 	}
 	&.sapUiSizeCompact .sapMColorPalette,
 	& .sapUiSizeCompact .sapMColorPalette {
+
 		.sapMColorPaletteSquare {
 			width: @_sap_m_ColorPalette_SwatchWidthCompact;
 			height: @_sap_m_ColorPalette_SwatchWidthCompact;
 			display: inline-block;
 			margin: (@_sap_m_ColorPalette_SwatchWidthHitAreaCompact - @_sap_m_ColorPalette_SwatchWidthCompact)/2;
+
 			&:hover,
 			&.sapMColorPaletteSquareSelected {
 				margin: 0;
@@ -242,6 +266,7 @@ html:not(.sap-phone) {
 	}
 
 	.sapMColorPaletteSquare {
+
 		& > div {
 			height: 100%;
 			width: 100%;
@@ -250,32 +275,38 @@ html:not(.sap-phone) {
 }
 
 .sap-phone {
+
 	.sapMColorPalette {
+
 		&html:not(.sap-phone) .sapMBtnInner {
 			border-radius: 0.25rem 0.25rem 0 0;
 		}
 	}
+
 	.sapMColorPaletteContent {
 		display: flex;
 		flex-wrap: wrap;
 		padding: @_sap_m_ColorPalette_SwatchContainerPaddingTopBottomPhone @_sap_m_ColorPalette_SwatchContainerPaddingLeftRightPhone;
 		max-width: 22.5rem;
-   		margin: auto;
+		margin: auto;
 	}
+
 	.sapMColorPaletteContainer .sapMDialogScroll {
 		height: 100%;
+
 		.sapMDialogScrollCont.sapMDialogStretchContent {
 			padding: 0;
 		}
-
 	}
+
 	.sapMColorPaletteSquare {
 		width: @_sap_m_ColorPalette_SwatchWidthPhone;
 		max-width: @_sap_m_ColorPalette_SwatchMaxWidthPhone;
 		position: relative;
 		aspect-ratio: 1 / 1;
+
 		& > div {
-			border: 1px solid @sapUiContentForegroundBorderColor;
+			border: 1px solid var(--sapContent_ForegroundBorderColor);
 			border-radius: 0.125rem;
 			position: absolute;
 			top: @_sap_m_ColorPalette_SwatchMarginPhone;
@@ -284,8 +315,9 @@ html:not(.sap-phone) {
 			right: @_sap_m_ColorPalette_SwatchMarginPhone;
 			aspect-ratio: 1 / 1;
 		}
+
 		&:active > div {
-			box-shadow: inset 0 0 0 1px @sapUiGroupContentBackground;
+			box-shadow: inset 0 0 0 1px var(--sapGroup_ContentBackground);
 			top: -0.0625rem;
 			bottom: -0.0625rem;
 			left: -0.0625rem;
@@ -295,9 +327,10 @@ html:not(.sap-phone) {
 		&.sapMColorPaletteSquareSelected {
 			width: ~"calc(@{_sap_m_ColorPalette_SwatchWidthPhone} + 0.625rem)";
 			aspect-ratio: 1 / 1;
+
 			& > div {
 				aspect-ratio: 1 / 1;
-				box-shadow: inset 0 0 0 1px @sapUiGroupContentBackground;
+				box-shadow: inset 0 0 0 1px var(--sapGroup_ContentBackground);
 				top: @_sap_m_ColorPalette_SwatchSelectedMarginPhone;
 				bottom: @_sap_m_ColorPalette_SwatchSelectedMarginPhone;
 				left: @_sap_m_ColorPalette_SwatchSelectedMarginPhone;
@@ -308,24 +341,28 @@ html:not(.sap-phone) {
 }
 
 @media (orientation: landscape) {
+
 	.sap-phone {
+
 		.sapMColorPaletteContent {
 			max-width: initial;
 		}
 	}
 }
 
-html.sap-desktop .sapMDialog.CPDialog{
-	min-width: 18rem; //override the  Dialog's min-width for desktop
+html.sap-desktop .sapMDialog.CPDialog {
+	min-width: 18rem; /* override the  Dialog's min-width for desktop */
+
 	.sapUiColorPicker-ColorPickerMatrix {
+
 		&.sapUiRespGrid.sapUiRespGridHSpace1 {
 			padding-bottom: 0.5rem;
 		}
-		//in a dialog ColorPicker doesn't have padding-top in order to be as compact as possible
+
+		/* in a dialog ColorPicker doesn't have padding-top in order to be as compact as possible */
 		&.sapUnifiedColorPicker.sapUiRespGrid.sapUiRespGridHSpace1 > div:first-child {
 			height: auto;
 			padding-top: 0;
 		}
 	}
-}
-
+}

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

@@ -22,20 +22,23 @@
 }
 
 .sapMListTblSubRow {
-	background: @sapUiListBackground;
+	background: var(--sapList_Background);
 }
 
 /* adding alternating rows background color */
 :nth-child(even of .sapMListTblRowAlternate),
 :nth-child(even of .sapMListTblRowAlternate) + .sapMListTblSubRow {
-	background-color: @sapUiListAlternatingBackground;
+	background-color: var(--sapList_AlternatingBackground);
+
 	&.sapMLIBHoverable:hover {
-		background : @sapUiListHoverBackground;
+		background: var(--sapList_Hover_Background);
 	}
+
 	&.sapMLIBSelected {
-		background: @sapUiListSelectionBackgroundColor;
+		background: var(--sapList_SelectionBackgroundColor);
+
 		&.sapMLIBHoverable:hover {
-			background: @sapUiListHoverSelectionBackground;
+			background: var(--sapList_Hover_SelectionBackground);
 		}
 	}
 }
@@ -43,7 +46,7 @@
 .sapMLIBHoverable:not(.sapMLIBSelected):hover + .sapMListTblSubRow,
 .sapMLIBHoverable:not(.sapMLIBSelected) + .sapMListTblSubRow:hover,
 .sapMLIBHoverable:not(.sapMLIBSelected).sapMPopinHovered {
-	background : @sapUiListHoverBackground;
+	background: var(--sapList_Hover_Background);
 }
 
 .sapMLIBHoverable + .sapMListTblSubRow:hover {
@@ -52,22 +55,22 @@
 
 .sapMLIBSelected + .sapMListTblSubRow,
 .sapMLIBSelected.sapMListTblRowAlternate + .sapMListTblSubRow {
-	background: @sapUiListSelectionBackgroundColor;
+	background: var(--sapList_SelectionBackgroundColor);
 }
 
 .sapMLIB.sapMLIBActive + .sapMListTblSubRow {
-	color: @sapUiListActiveTextColor;
-	background: @sapUiListActiveBackground;
+	color: var(--sapList_Active_TextColor);
+	background: var(--sapList_Active_Background);
 }
 
 .sapMLIBHoverable.sapMLIBSelected:hover + .sapMListTblSubRow,
 .sapMLIBHoverable.sapMLIBSelected + .sapMListTblSubRow:hover,
 .sapMLIBHoverable.sapMLIBSelected.sapMPopinHovered {
-	background : @sapUiListSelectionHoverBackground;
+	background: @sapUiListSelectionHoverBackground;
 }
 
 .sapMLIBHoverable.sapMLIBSelected.sapMLIBActive:hover + .sapMListTblSubRow {
-	background: @sapUiListActiveBackground;
+	background: var(--sapList_Active_Background);
 }
 
 /* table popin */
@@ -82,7 +85,7 @@
 	padding-left: calc(@_sap_m_table_SelectionControlWidth + 0.5rem);
 }
 
-.sapMListTblSubCntRow{
+.sapMListTblSubCntRow {
 	padding-bottom: 0;
 	padding-top: 1px;
 }
@@ -91,12 +94,16 @@
 	margin-top: .5rem;
 }
 
+.sapMListTblSubCntHdr {
+	display: inline-flex;
+}
+
 .sapMListTblSubCntValBlock {
 	margin-top: .25rem;
 	display : block;
 }
 
-.sapMListTblSubCntValInline{
+.sapMListTblSubCntValInline {
 	display: inline-block;
 	max-width: 100%;
 }
@@ -104,20 +111,20 @@
 .sapMListTblSubCntHdr > .sapMListTblSubCntSpr,
 .sapMListTblSubCntRow > .sapMListTblSubCntHdr .sapMText,
 .sapMListTblSubCntRow > .sapMListTblSubCntHdr .sapMLabel {
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 	padding-top: 0;
-	display: inline;
 }
 
 .sapMListTblSubCntRow > .sapMListTblSubCntVal .sapMText,
 .sapMListTblSubCntRow > .sapMListTblSubCntVal .sapMLabel {
-	color: @sapUiListTextColor;
+	color: var(--sapList_TextColor);
 	padding-top: 0;
 }
 
 .sapMListTblSubCntSpr {
 	font-size: @sapMFontMediumSize;
 	padding-right: .5rem;
+
 	&::before {
 		content: attr(data-popin-colon);
 		vertical-align: top;
@@ -132,7 +139,7 @@
 
  /* separators */
  .sapMLIBShowSeparator > td {
-	border-top: 1px solid @sapUiListBorderColor;
+	border-top: 1px solid var(--sapList_BorderColor);
 }
 
 .sapMListShowSeparatorsNone .sapMLIBShowSeparator > td:not(.sapMListTblDummyCell),
@@ -142,12 +149,12 @@
 
 .sapMListShowSeparatorsAll .sapMListTblSubRow:last-child > td:not(.sapMListTblDummyCell),
 .sapMListShowSeparatorsAll .sapMLIBShowSeparator:last-child > td:not(.sapMListTblDummyCell) {
-	border-bottom: 1px solid @sapUiListBorderColor;
+	border-bottom: 1px solid var(--sapList_BorderColor);
 }
 
 .sapMListShowSeparatorsAll .sapMLIBShowSeparator:last-child > td:not(.sapMListTblDummyCell),
 .sapMListShowSeparatorsAll .sapMListTblSubRow:last-child > td:not(.sapMListTblDummyCell) {
-	border-bottom: 1px solid @sapUiListTableFooterBorder;
+	border-bottom: 1px solid var(--sapList_TableFooterBorder);
 }
 
 .sapMListShowSeparatorsInner .sapMLIBShowSeparator:last-child > td,
@@ -155,11 +162,12 @@
 	border-bottom-color: transparent;
 }
 
-.sapMListShowSeparatorsNone .sapMListTblFooter > td{
+.sapMListShowSeparatorsNone .sapMListTblFooter > td {
 	border-top-width: 2px;
 }
 
 .sapMTableRowCustomFocus {
+
 	.sapMLIBIconDet,
 	.sapMLIBIconDel {
 		margin-left: 0;
@@ -176,7 +184,6 @@
 	top: 0;
 }
 
-
 /********** COMPACT DESIGN ************/
 
 /* decrease vertical popin paddings */
@@ -189,4 +196,4 @@
 .sapUiSizeCompact .sapMListModeMultiSelect .sapMListTblSubCnt,
 .sapUiSizeCompact .sapMListModeSingleSelectLeft .sapMListTblSubCnt {
 	padding-left: 2.5rem;
-}
+}

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

@@ -7,7 +7,7 @@
 }
 
 .sapMPluginsColumnResizerResizable {
-	border-right: 1px solid @sapUiListBorderColor;
+	border-right: 1px solid var(--sapList_BorderColor);
 }
 
 .sapMPluginsColumnResizerHandle {
@@ -21,20 +21,20 @@
 	margin-left: -0.25rem;
 	cursor: col-resize;
 	background-clip: content-box;
-	background-color: @sapUiContentDragAndDropActiveColor;
+	background-color: var(--sapContent_DragAndDropActiveColor);
 	-webkit-user-select: none;
 	user-select: none;
 }
 
 .sapMPluginsColumnResizerHandleCircle {
-	content: "";
+	content: '';
 	position: absolute;
 	top: 1.5rem;
 	left: -0.4375rem;
 	width: 1rem;
 	height: 1rem;
 	border-radius: 1rem;
-	border: 0.125rem solid @sapUiContentDragAndDropActiveColor;
+	border: 0.125rem solid var(--sapContent_DragAndDropActiveColor);
 	background: @sapUiWhiteBG;
 	pointer-events: none;
 	margin-top: -0.125rem;

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

@@ -5,6 +5,6 @@
 
 .sapMComboBoxBasePicker-CTX .sapMComboBoxList.sapMListFocus .sapMLIBSelected,
 .sapMComboBoxBasePicker-CTX .sapMComboBoxList.sapMListFocus .sapMComboBoxBaseNonInteractiveItem.sapMLIBFocused {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: -0.125rem;
 }

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

@@ -21,25 +21,25 @@
 }
 
 .sapMInputBaseIconPressed .sapMComboBoxBaseClearIcon {
-	color: @sapUiContentIconColor;
+	color: var(--sapContent_IconColor);
 	background: transparent;
 
 	&:hover {
-		background: @sapUiButtonLiteHoverBackground;
+		background: var(--sapButton_Lite_Hover_Background);
 	}
 
 	&:active {
-		background-color: @sapUiButtonLiteActiveBackground;
-		color: @sapUiButtonActiveTextColor;
+		background-color: var(--sapButton_Lite_Active_Background);
+		color: var(--sapButton_Active_TextColor);
 
 		&::before {
-			color: @sapUiButtonActiveTextColor;
+			color: var(--sapButton_Active_TextColor);
 		}
 	}
 }
 
 .sapMInputBaseIconPressed .sapMComboBoxBaseClearIcon::before {
-	color: @sapUiContentIconColor;
+	color: var(--sapContent_IconColor);
 }
 
 /* ------------------------------ */