@sapui5/sap.suite.ui.commons 1.146.0 → 1.147.0

package/src/sap/suite/ui/commons/themes/base/CalculationBuilder.less

@@ -1,18 +1,24 @@
+/* ======================================================== */
+/* CSS for control sap.suite.ui.commons/CalculationBuilder  */
+/* Base theme                                               */
+/* ======================================================== */
+
 .sapCalculationBuilderInner {
 	display: flex;
 	align-items: center;
-  	&:focus {
-	  outline: none;
+
+	&:focus {
+		outline: none;
 	}
 }
 
 .sapCalculationBuilderWrapItems .sapCalculationBuilderInner {
- 	flex-wrap: wrap;
+	flex-wrap: wrap;
 }
 
 .sapCalculationBuilderInsideWrapper {
-  	overflow: auto;
-  	padding-bottom: 0.5rem;
+	overflow: auto;
+	padding-bottom: 0.5rem;
 }
 
 .sapUiSizeCozy .sapCalculationBuilderInsideWrapper {
@@ -24,40 +30,43 @@
 }
 
 .sapCalculationBuilderToolbar {
- 	margin-bottom: 0.5rem;
-  	height: 3rem;
-  	.sapMBtn {
+	margin-bottom: 0.5rem;
+	height: 3rem;
+
+	.sapMBtn {
 		padding: 0;
-  	}
-  	.sapMBtnInner {
+	}
+
+	.sapMBtnInner {
 		height: 2rem;
+
 		.sapMBtnIcon {
-	  		line-height: 30px;
-	 		max-height: 2rem;
+			line-height: 30px;
+			max-height: 2rem;
 		}
-  	}
+	}
 }
 
 .sapUiSizeCompact .sapCalculationBuilderToolbar {
-  	height: 3rem;
+	height: 3rem;
 }
 
 .sapCalculationBuilderOverlay {
 	width: 100%;
-  	min-height: 100%;
-	background-color: @sapUiListBackground;
+	min-height: 100%;
+	background-color: var(--sapList_Background);
 }
 
 .sapCalculationBuilderDelimiterLine {
 	height: 1px;
-	background-color: @sapUiGroupTitleBorderColor;
+	background-color: var(--sapGroup_TitleBorderColor);
 }
-.sapMListUl>.sapMLIB.sapMGHLI.sapCalculationBuilderSuggestionListHeader {
-	 height: auto;
-	 padding-top: 0;
- }
 
- .sapCalculationBuilderDisplayNone {
-	 display: none;
- }
+.sapMListUl > .sapMLIB.sapMGHLI.sapCalculationBuilderSuggestionListHeader {
+	height: auto;
+	padding-top: 0;
+}
 
+.sapCalculationBuilderDisplayNone {
+	display: none;
+}

package/src/sap/suite/ui/commons/themes/base/CalculationBuilderExpression.less

@@ -1,3 +1,8 @@
+/* ================================================================== */
+/* CSS for control sap.suite.ui.commons/CalculationBuilderExpression  */
+/* Base theme                                                         */
+/* ================================================================== */
+
 .sapCalculationBuilderDelimiter {
 	display: flex;
 	width: 0.5rem;
@@ -24,20 +29,17 @@
 	position: absolute;
 	border-radius: 3px;
 	z-index: 10000;
-
 	justify-content: center;
 	align-items: center;
 	cursor: pointer;
-
-
 	outline: none;
-	border: 1px solid @sapUiButtonTextColor;
-	background-color: @sapUiButtonBackground;
-	color: @sapUiButtonTextColor;
+	border: 1px solid var(--sapButton_TextColor);
+	background-color: var(--sapButton_Background);
+	color: var(--sapButton_TextColor);
 }
 
 .sapCalculationBuilderDelimiterNewButton:hover {
-	background-color: @sapUiButtonHoverBackground;
+	background-color: var(--sapButton_Hover_Background);
 }
 
 .sapCalculationBuilderDelimiterNewButtonIcon{
@@ -47,22 +49,23 @@
 }
 
 .ui-selectable-helper {
-  // TODO: change color
-  border: 1px dashed @sapUiNeutralBorder;
-  position: absolute;
-  z-index: 40;
+	/* TODO: change color*/
+	border: 1px dashed var(--sapNeutralBorderColor);
+	position: absolute;
+	z-index: 40;
 }
 
 .sapCalculationBuilderWrapItems {
 	position: relative;
+
 	.sapCalculationBuilderSelected {
-	  flex-wrap: wrap;
+		flex-wrap: wrap;
 	}
 }
 
 .sapCalculationBuilderSelected {
-  display: flex;
-  align-items: center;
+	display: flex;
+	align-items: center;
 }
 
 .sapCalculationBuilderDraggingSelectedClone {
@@ -71,43 +74,49 @@
 }
 
 .sapCalculationBuilderNavMainPage {
-  	.sapMLIB {
+
+	.sapMLIB {
 		padding: 0;
-  	}
-  	.sapMSLIImgIcon {
-		font-size: @sapFontLargeSize;
-  	}
-  	.sapMLIB.sapMSLI {
+	}
+
+	.sapMSLIImgIcon {
+		font-size: var(--sapFontLargeSize);
+	}
+
+	.sapMLIB.sapMSLI {
 		height: 4.5rem;
-  	}
+	}
 }
 
 .sapCalculationBuilderPopoverOperatorsButton {
+
 	.sapMBtn {
-	  	padding: 0;
+		padding: 0;
 	}
+
 	.sapMBtnInner {
-	  	height: 2rem;
+		height: 2rem;
 	}
+
 	.sapMBtnContent {
-	  	line-height: 30px;
-	  	font-size: @sapFontLargeSize;
-	  	font-weight: bold
+		line-height: 30px;
+		font-size: var(--sapFontLargeSize);
+		font-weight: bold
 	}
+
 	.sapMBtnIcon {
-	  	line-height: 30px;
+		line-height: 30px;
 	}
 }
 
 .sapCalculationBuilderExpressionErrorIcon {
-	color: @sapUiNegativeElement;
+	color: var(--sapNegativeElementColor);
 	position: absolute;
-
 	display: none;
 	top: 0;
 	right: 2px;
 }
 
 .sapCalculationBuilderExpressionSAPFont {
-	font-family: 'SAP-icons';
-}
+	font-family: var(--sapContent_IconFontFamily);
+}

package/src/sap/suite/ui/commons/themes/base/CalculationBuilderInput.less

@@ -1,21 +1,27 @@
+/* ============================================================= */
+/* CSS for control sap.suite.ui.commons/CalculationBuilderInput  */
+/* Base theme                                                    */
+/* ============================================================= */
+
 .sapCalculationBuilderInput {
-	border: 1px solid @sapUiGroupTitleBorderColor;
+	border: 1px solid var(--sapGroup_TitleBorderColor);
 	padding: 0.75rem;
 	min-height: 2.5rem;
-
 	position: relative;
 	user-select: text;
+
 	&:focus {
 		outline: none;
 	}
+
 	&:focus::before {
-		content: "";
+		content: '';
 		position: absolute;
 		top: 2px;
 		left: 2px;
 		right: 2px;
 		bottom: 2px;
-		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 		pointer-events: none;
 	}
 
@@ -33,12 +39,12 @@ html.sap-tablet:not(.sap-desktop) .sapCalculationBuilderInput span {
 }
 
 .sapCalculationBuilderInputError.sapCalculationBuilderInput {
-	border-color: @sapUiErrorBorder;
+	border-color: var(--sapErrorBorderColor);
 	border-width: 2px;
 }
 
 .sapCalculationBuilderInputWrapper {
-	background-color: @sapUiFieldBackground;
+	background-color: var(--sapField_Background);
 }
 
 .sapCalculationBuilderInputOuterWrapperMargin {
@@ -48,30 +54,39 @@ html.sap-tablet:not(.sap-desktop) .sapCalculationBuilderInput span {
 .sapCalculationBuilderInputToolbar {
 	border: none;
 	height: 3rem;
+
 	.sapCalculationBuilderInputToolbarFunctionMenu {
 		margin-left: 0.75rem;
 	}
+
 	.sapCalculationBuilderInputToolbarMenuButtons {
+
 		.sapMBtnInner {
 			height: 2rem;
 		}
+
 		.sapMBtnContent {
 			line-height: 30px;
 		}
+
 		&.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
 			height: 30px;
 			line-height: 30px;
 		}
 	}
+
 	.sapCalculationBuilderInputToolbarButtons {
+
 		.sapMBtnInner {
 			height: 2rem;
 		}
+
 		.sapMBtnContent {
 			line-height: 30px;
 			font-size: 1.25rem;
 			font-weight: bold;
 		}
+
 		.sapMBtnIcon {
 			line-height: 30px;
 		}
@@ -80,6 +95,7 @@ html.sap-tablet:not(.sap-desktop) .sapCalculationBuilderInput span {
 
 .sapUiSizeCompact .sapCalculationBuilderInputToolbar {
 	height: 3rem;
+
 	.sapMBtn {
 		padding: 0;
 	}
@@ -95,15 +111,15 @@ html.sap-tablet:not(.sap-desktop) .sapCalculationBuilderInput span {
 
 .sapCalculationBuilderInputErrorArea {
 	white-space: pre-line;
-	background-color: @sapErrorBackground;
-	font-size: @sapMFontSmallSize;
+	background-color: var(--sapErrorBackground);
+	font-size: var(--sapFontSmallSize);
 	position: relative;
 	width: max-content;
 	padding: 3px;
 	display: none;
-	z-Index:1;
+	z-index: 1;
 }
 
 .sapCalculationBuilderItemTextDefault {
 	overflow-wrap: break-word;
-}
+}

package/src/sap/suite/ui/commons/themes/base/CalculationBuilderItem.less

@@ -1,17 +1,20 @@
+/* ============================================================ */
+/* CSS for control sap.suite.ui.commons/CalculationBuilderItem  */
+/* Base theme                                                   */
+/* ============================================================ */
+
 .sapCalculationBuilderItem {
-	background-color: @sapUiButtonBackground;
-	border: 1px solid @sapUiNeutralBorder;
-	color: @sapUiNeutralText;
+	background-color: var(--sapButton_Background);
+	border: 1px solid var(--sapNeutralBorderColor);
+	color: var(--sapNeutralTextColor);
 	display: inline-block;
 	font-size: @sapMFontMediumSize;
 	border-radius: 3px;
 	font-weight: bold;
 	position: relative;
-	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
-	-webkit-touch-callout: none; /* iOS Safari */
-	-webkit-user-select: none; /* Safari */
-	-moz-user-select: none; /* Firefox */
-	-ms-user-select: none; /*Edge */
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	user-select: none;
 
 	&:focus {
 		outline: none;
@@ -19,7 +22,7 @@
 }
 
 .sapUiSizeCozy .sapCalculationBuilderItem {
-	font-size: @sapMFontLargeSize;
+	font-size: var(--sapFontLargeSize);
 }
 
 .sapCalculationBuilderItemContentWrapper {
@@ -49,8 +52,9 @@
 }
 
 .sapCalculationBuilderReadOnly .sapCalculationBuilderItemLabel {
-	color: @sapUiButtonBorderColor;
+	color: var(--sapButton_BorderColor);
 }
+
 .sapCalculationBuilderReadOnly .sapCalculationBuilderItem{
 	background-color: transparent;
 }
@@ -59,41 +63,44 @@
 .sapCalculationBuilderItemLiteral .sapCalculationBuilderItemContent,
 .sapCalculationBuilderUnknownItem .sapCalculationBuilderItemContent,
 .sapCalculationBuilderItemExpandButton {
+
 	&:hover {
-		border-color: @sapUiButtonHoverBorderColor;
-		background-color: @sapUiButtonHoverBackground;
+		border-color: var(--sapButton_Hover_BorderColor);
+		background-color: var(--sapButton_Hover_Background);
 	}
+
 	&:active {
-		border-color: @sapUiButtonActiveBorderColor;
-		background-color: @sapActiveColor;
-		color: @sapUiButtonActiveTextColor;
+		border-color: var(--sapButton_Active_BorderColor);
+		background-color: var(--sapActiveColor);
+		color: var(--sapButton_Active_TextColor);
 	}
 }
 
 .sapCalculationBuilderItemVariable,
 .sapCalculationBuilderItemLiteral,
 .sapCalculationBuilderUnknownItem {
-	border-color: @sapUiButtonBorderColor;
-	background-color: @sapUiButtonBackground;
-	color: @sapUiButtonTextColor;
+	border-color: var(--sapButton_BorderColor);
+	background-color: var(--sapButton_Background);
+	color: var(--sapButton_TextColor);
 	display: flex;
 }
 
 .sapCalculationBuilderItemFunction,
 .sapCalculationBuilderItemBracket,
 .sapCalculationBuilderItemOperator {
-	background-color: @sapUiButtonLiteBackground;
-	border-color: @sapUiButtonLiteBorderColor;
+	background-color: var(--sapButton_Lite_Background);
+	border-color: var(--sapButton_Lite_BorderColor);
 	color: @sapUiCalendarColorToday;
 
 	&:hover {
-		border-color: @sapUiButtonLiteHoverBorderColor;
-		background-color: @sapUiButtonLiteHoverBackground;
+		border-color: var(--sapButton_Lite_Hover_BorderColor);
+		background-color: var(--sapButton_Lite_Hover_Background);
 	}
+
 	&:active {
-		border-color: @sapUiButtonLiteActiveBackground;
-		background-color: @sapUiButtonLiteActiveBorderColor;
-		color: @sapUiButtonActiveTextColor;
+		border-color: var(--sapButton_Lite_Active_Background);
+		background-color: var(--sapButton_Lite_Active_BorderColor);
+		color: var(--sapButton_Active_TextColor);
 	}
 }
 
@@ -111,12 +118,12 @@
 }
 
 .sapCalculationBuilderBracket {
-	border-color: @sapUiButtonLiteHoverBorderColor;
-	background-color: @sapUiButtonLiteHoverBackground;
+	border-color: var(--sapButton_Lite_Hover_BorderColor);
+	background-color: var(--sapButton_Lite_Hover_Background);
 }
 
 .sapCalculationBuilderItemOperator {
-	color: @sapUiButtonTextColor;
+	color: var(--sapButton_TextColor);
 }
 
 .sapCalculationBuilderItemFunctionLabel {
@@ -125,9 +132,8 @@
 
 .sapCalculationBuilderItemFunctionBracket {
 	padding-left: 0;
-
-	background-color: @sapUiButtonLiteBackground;
-	border-color: @sapUiButtonLiteBorderColor;
+	background-color: var(--sapButton_Lite_Background);
+	border-color: var(--sapButton_Lite_BorderColor);
 }
 
 .sapCalculationBuilderItemOperatorLength-1 .sapCalculationBuilderItemLabel {
@@ -144,9 +150,9 @@
 	border-radius: 3px;
 	outline: none;
 	width: 1.625rem;
-	border: 1px solid @sapUiButtonTextColor;
-	background-color: @sapUiButtonLiteBackground;
-	color: @sapUiButtonTextColor;
+	border: 1px solid var(--sapButton_TextColor);
+	background-color: var(--sapButton_Lite_Background);
+	color: var(--sapButton_TextColor);
 }
 
 .sapUiSizeCozy .sapCalculationBuilderNewItem,
@@ -169,21 +175,25 @@
 
 .sapCalculationBuilderItemPopupOptionItem {
   padding-bottom: 1rem;
-  border-bottom: 1px solid @sapUiListBorderColor;
+  border-bottom: 1px solid var(--sapList_BorderColor);
 }
 
 .sapCalculationBuilderItemPopupOperators {
+
 	.sapMBtn {
 		padding: 0;
 	}
+
 	.sapMBtnInner {
 		height: 2rem;
 	}
+
 	.sapMBtnContent {
 		line-height: 30px;
 		font-size: 1.125rem;
 		font-weight: bold
 	}
+
 	.sapMBtnIcon {
 		line-height: 30px;
 	}
@@ -199,7 +209,7 @@
 
 .sapCalculationBuilderItem.ui-selecting,
 .sapCalculationBuilderItem.ui-selected {
-	border: 1px dashed @sapUiButtonBorderColor;
+	border: 1px dashed var(--sapButton_BorderColor);
 }
 
 .sapCalculationBuilderItem.ui-state-disabled {
@@ -214,12 +224,13 @@
 	flex-direction: column;
 	vertical-align: middle;
 	justify-content: center;
-	font-size: @sapFontSmallSize;
-	border-left: 1px solid @sapUiButtonBorderColor;
+	font-size: var(--sapFontSmallSize);
+	border-left: 1px solid var(--sapButton_BorderColor);
 
 	&:focus {
 		outline: none;
 	}
+
 	.sapUiIcon {
 		cursor: pointer;
 	}
@@ -247,7 +258,7 @@
 
 .sapCalculationBuilderItemExpandButton:focus .sapCalculationBuilderItemExpandButtonFocus,
 .sapCalculationBuilderItemExpandButton:active .sapCalculationBuilderItemExpandButtonFocus {
-	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 .sapCalculationBuilderItemFocusWrapper {
@@ -266,7 +277,7 @@
 	position: relative;
 	box-sizing: border-box;
 	height: 100%;
-	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	pointer-events: none;
 }
 
@@ -277,6 +288,7 @@
 
 .sapCalculationBuilderItemExpandButtonWrapper {
 	position: relative;
+
 	&:focus {
 		outline: none;
 	}
@@ -285,23 +297,25 @@
 .sapCalculationBuilderItemErrorSyntax,
 .sapCalculationBuilderItemErrorSyntax .sapCalculationBuilderItemContent,
 .sapCalculationBuilderItemErrorSyntax .sapCalculationBuilderItemExpandButton {
-	background-color: @sapUiButtonRejectBackground;
-	border-color: @sapUiButtonRejectBorderColor;
-	color: @sapUiButtonRejectTextColor;
+	background-color: var(--sapButton_Reject_Background);
+	border-color: var(--sapButton_Reject_BorderColor);
+	color: var(--sapButton_Reject_TextColor);
+
 	&:hover {
-		background-color: @sapUiButtonRejectHoverBackground;
-		border-color: @sapUiButtonRejectHoverBorderColor;
+		background-color: var(--sapButton_Reject_Hover_Background);
+		border-color: var(--sapButton_Reject_Hover_BorderColor);
 	}
+
 	&:active {
-		background-color: @sapUiButtonRejectActiveBackground;
-		border-color: @sapUiButtonRejectActiveBorderColor;
-		color: @sapUiButtonActiveTextColor;
+		background-color: var(--sapButton_Reject_Active_Background);
+		border-color: var(--sapButton_Reject_Active_BorderColor);
+		color: var(--sapButton_Active_TextColor);
 	}
 
 }
 
 .sapCalculationBuilderItemErrorSyntax .sapCalculationBuilderItemExpandButton {
-	border-left-color: @sapUiButtonRejectBorderColor;
+	border-left-color: var(--sapButton_Reject_BorderColor);
 }
 
 .sapCalculationBuilderItemTextError {
@@ -312,11 +326,11 @@
 
 .sapCalculationBuilderItemTextEmpty {
 	background-color: fade(@sapUiFieldTextColor, 15);
-	padding: 0px 5px 1px 1px;
+	padding: 0 5px 1px 1px;
 	border-radius: 3px
 }
 
-// *** DRAGGING *** //
+/* *** DRAGGING *** */
 .sapCalculationBuilderDragging.sapCalculationBuilderItem,
 .sapCalculationBuilderDragging .sapCalculationBuilderItemExpandButton,
 .sapCalculationBuilderDraggingSelectedClone .sapCalculationBuilderItemExpandButton,
@@ -324,10 +338,9 @@
 .sapCalculationBuilderDraggingSelectedClone .sapCalculationBuilderItem {
 	z-index: 30;
 	opacity: 0.7;
-	color: @sapUiContentDisabledTextColor !important;
-	background-color: @sapUiButtonBackground !important;
-	border-color: @sapUiButtonBackground !important;
-
+	color: var(--sapContent_DisabledTextColor) !important;
+	background-color: var(--sapButton_Background) !important;
+	border-color: var(--sapButton_Background) !important;
 }
 
 .sapCalculationBuilderDroppableLine,
@@ -340,20 +353,20 @@
 	display: block;
 }
 
-.sapCalculationBuilderDroppableLine:after {
-	content: "";
+.sapCalculationBuilderDroppableLine::after {
+	content: '';
 	position: absolute;
 	top: 10px;
 	bottom: 10px;
 	left: 50%;
 	width: 2px;
-	background-color: @sapUiSelected;
+	background-color: var(--sapSelectedColor);
 	transform: translate(-50%);
 }
 
-.sapCalculationBuilderDroppableCircle:after {
-	border: 2px solid @sapUiSelected;
-	content: "";
+.sapCalculationBuilderDroppableCircle::after {
+	border: 2px solid var(--sapSelectedColor);
+	content: '';
 	position: absolute;
 	border-radius: 50%;
 	top: 0;
@@ -364,5 +377,5 @@
 }
 
 .sapCalculationBuilderExpressionSAPFont {
-	font-family: 'SAP-icons';
-}
+	font-family: var(--sapContent_IconFontFamily);
+}

package/src/sap/suite/ui/commons/themes/base/ChartContainer.less

@@ -1,21 +1,18 @@
-/* =================================================== */
-/* CSS for control sap.suite.ui.commons/ChartContainer */
-/* Base Theme                                          */
-/* =================================================== */
+/* ==================================================== */
+/* CSS for control sap.suite.ui.commons/ChartContainer  */
+/* Base Theme                                           */
+/* ==================================================== */
 
 .sapSuiteUiCommonsChartContainer {
 	height: 100%;
 }
+
 .sapSuiteUiCommonsChartContainer {
-  overflow: unset;
-}
-/* In Edge browser vizFrame chart is cut off when changing the view from full screen to normal*/
-html[data-sap-ui-browser^="ed"] .sapSuiteUiCommonsChartContainer {
-	overflow: hidden;
+	overflow: unset;
 }
 
 .sapMDialogChartContainerScroll {
-    height: 100%;
+	height: 100%;
 }
 
 .sapSuiteUiCommonsChartContainerOverlay {
@@ -26,7 +23,7 @@ html[data-sap-ui-browser^="ed"] .sapSuiteUiCommonsChartContainer {
 }
 
 .sapSuiteUiCommonsChartContainerChartArea {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 /* mixin call for creating container content padding classes (arguments: rootContainer, contentSelector) */