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

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) */

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

@@ -1,6 +1,7 @@
-/* =========================================================== */
-/* CSS for control sap.suite.ui.commons/ComparisonTile.control */
-/* =========================================================== */
+/* =============================================== */
+/* CSS for control sap.suite.ui.commons/ChartTile  */
+/* Base theme                                      */
+/* =============================================== */
 
 .sapSuiteCmpTileContent {
 	position: absolute;
@@ -39,7 +40,6 @@
 	display: inline-block;
 	max-width: 100%;
 	box-sizing: border-box;
-	-moz-box-sizing: border-box;
 }
 
 .sapSuiteCmpTileUnitInner {
@@ -102,13 +102,10 @@
 	background-color: #e2e2e2;
 	border-right: 1px solid white;
 	box-sizing: border-box;
-	-moz-box-sizing: border-box;
-
 }
 
 .sapSuiteCmpTileBarNoValue {
 	background-color: #e2e2e2;
 	border-left: 1px solid white;
 	box-sizing: border-box;
-	-moz-box-sizing: border-box;
-}
+}

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

@@ -1,168 +1,178 @@
-.sapSuiteUiCollaborationBarMSTeamsButtonHorizontal .sapMBtnInner{
-    background-color: @sapLegendBackgroundColor20;
-    color: @sapLegendColor20;
-    height: 90px;
-    flex-direction: column;
-    align-items: center;
-    font-size: 15px;
+/* ========================================================== */
+/* CSS for control sap.suite.ui.commons/CollaborationPopover  */
+/* Base theme                                                 */
+/* ========================================================== */
+
+.sapSuiteUiCollaborationBarMSTeamsButtonHorizontal .sapMBtnInner {
+	background-color: var(--sapLegendBackgroundColor20);
+	color: var(--sapLegendColor20);
+	height: 90px;
+	flex-direction: column;
+	align-items: center;
+	font-size: 15px;
 }
 
-.sapSuiteUiCollaborationBarMSTeamsButtonHorizontal .sapMBtnIcon::before{
-    font-size: 25px;
-    color: @sapLegendColor20;
+.sapSuiteUiCollaborationBarMSTeamsButtonHorizontal .sapMBtnIcon::before {
+	font-size: 25px;
+	color: var(--sapLegendColor20);
 }
 
 .sapSuiteUiCollaborationBarMSTeamsButtonHorizontal .sapMBtnContent {
-    white-space: normal !important;
-    overflow: visible !important;
-    line-height: 15px !important;
+	white-space: normal !important;
+	overflow: visible !important;
+	line-height: 15px !important;
 }
 
 .sapSuiteUiCollaborationBarEmailButtonHorizontal .sapMBtnInner {
-    background-color: @sapLegendBackgroundColor6;
-    color: @sapLegendColor6;
-    height: 90px;
-    flex-direction: column;
-    align-items: center;
-    font-size: 15px;
+	background-color: var(--sapLegendBackgroundColor6);
+	color: var(--sapLegendColor6);
+	height: 90px;
+	flex-direction: column;
+	align-items: center;
+	font-size: 15px;
 }
 
 .sapSuiteUiCollaborationBarEmailButtonHorizontal .sapMBtnIcon::before {
-    font-size: 25px;
-    color: @sapLegendColor6;
+	font-size: 25px;
+	color: var(--sapLegendColor6);
 }
 
 .sapSuiteUiCollaborationBarEmailButtonHorizontal .sapMBtnContent {
-    white-space: normal !important;
-    overflow: visible !important;
-    line-height: 15px !important;
+	white-space: normal !important;
+	overflow: visible !important;
+	line-height: 15px !important;
 }
 
-.sapSuiteUiCollaborationBarCMButtonHorizontal .sapMBtnInner{
-    background-color: @sapLegendBackgroundColor7;
-    color: @sapLegendColor17;
-    height: 90px;
-    flex-direction: column;
-    align-items: center;
-    font-size: 15px;
+.sapSuiteUiCollaborationBarCMButtonHorizontal .sapMBtnInner {
+	background-color: var(--sapLegendBackgroundColor7);
+	color: var(--sapLegendColor17);
+	height: 90px;
+	flex-direction: column;
+	align-items: center;
+	font-size: 15px;
 }
 
-.sapSuiteUiCollaborationBarCMButtonHorizontal .sapMBtnIcon::before{
-    font-size: 25px;
-    color: @sapLegendColor17;
+.sapSuiteUiCollaborationBarCMButtonHorizontal .sapMBtnIcon::before {
+	font-size: 25px;
+	color: var(--sapLegendColor17);
 }
 
 .sapSuiteUiCollaborationBarCMButtonHorizontal .sapMBtnContent {
-    white-space: normal !important;
-    overflow: visible !important;
-    line-height: 15px !important;
+	white-space: normal !important;
+	overflow: visible !important;
+	line-height: 15px !important;
 }
 
-.sapSuiteUiCollaborationBarMSTeamsButtonVertical .sapMBtnInner{
-    background-color: @sapLegendBackgroundColor20;
-    color: @sapLegendColor20;
-    height: 60px;
-    align-items: center;
-    font-size: 15px;
+.sapSuiteUiCollaborationBarMSTeamsButtonVertical .sapMBtnInner {
+	background-color: var(--sapLegendBackgroundColor20);
+	color: var(--sapLegendColor20);
+	height: 60px;
+	align-items: center;
+	font-size: 15px;
 }
 
-.sapSuiteUiCollaborationBarMSTeamsButtonVertical .sapMBtnIcon::before{
-    font-size: 25px;
-    color: @sapLegendColor20;
+.sapSuiteUiCollaborationBarMSTeamsButtonVertical .sapMBtnIcon::before {
+	font-size: 25px;
+	color: var(--sapLegendColor20);
 }
 
 .sapSuiteUiCollaborationBarMSTeamsButtonVertical .sapMBtnIcon {
-    margin-right: 15px;
+	margin-right: 15px;
 }
 
 .sapSuiteUiCollaborationBarMSTeamsButtonVertical .sapMBtnContent {
-    white-space: normal !important;
-    overflow: visible !important;
-    line-height: 15px !important;
+	white-space: normal !important;
+	overflow: visible !important;
+	line-height: 15px !important;
 }
 
 .sapSuiteUiCollaborationBarEmailButtonVertical .sapMBtnInner {
-    background-color: @sapLegendBackgroundColor6;
-    color: @sapLegendColor6;
-    height: 60px;
-    align-items: center;
-    font-size: 15px;
+	background-color: var(--sapLegendBackgroundColor6);
+	color: var(--sapLegendColor6);
+	height: 60px;
+	align-items: center;
+	font-size: 15px;
 }
 
 .sapSuiteUiCollaborationBarEmailButtonVertical .sapMBtnIcon::before {
-    font-size: 25px;
-    color: @sapLegendColor6;
+	font-size: 25px;
+	color: var(--sapLegendColor6);
 }
 
 .sapSuiteUiCollaborationBarEmailButtonVertical .sapMBtnIcon {
-    margin-right: 15px;
+	margin-right: 15px;
 }
 
 .sapSuiteUiCollaborationBarEmailButtonVertical .sapMBtnContent {
-    white-space: normal !important;
-    overflow: visible !important;
-    line-height: 15px !important;
+	white-space: normal !important;
+	overflow: visible !important;
+	line-height: 15px !important;
 }
 
-.sapSuiteUiCollaborationBarCMButtonVertical .sapMBtnInner{
-    background-color: @sapLegendBackgroundColor7;
-    color: @sapLegendColor17;
-    height: 60px;
-    align-items: center;
-    font-size: 15px;
+.sapSuiteUiCollaborationBarCMButtonVertical .sapMBtnInner {
+	background-color: var(--sapLegendBackgroundColor7);
+	color: var(--sapLegendColor17);
+	height: 60px;
+	align-items: center;
+	font-size: 15px;
 }
 
-.sapSuiteUiCollaborationBarCMButtonVertical .sapMBtnIcon::before{
-    font-size: 25px;
-    color: @sapLegendColor17;
+.sapSuiteUiCollaborationBarCMButtonVertical .sapMBtnIcon::before {
+	font-size: 25px;
+	color: var(--sapLegendColor17);
 }
 
 .sapSuiteUiCollaborationBarCMButtonVertical .sapMBtnIcon {
-    margin-right: 15px;
+	margin-right: 15px;
 }
 
 .sapSuiteUiCollaborationBarCMButtonVertical .sapMBtnContent {
-    white-space: normal !important;
-    overflow: visible !important;
-    line-height: 15px !important;
+	white-space: normal !important;
+	overflow: visible !important;
+	line-height: 15px !important;
 }
 
 .sapSuiteUiCollaborationBarMsgStripHBox {
-    background-color: @sapLegendBackgroundColor6 !important;
-    background-image: none;
-    border-radius: 10px !important;
-    align-items: center !important;
+	background-color: var(--sapLegendBackgroundColor6) !important;
+	background-image: none;
+	border-radius: 10px !important;
+	align-items: center !important;
 }
 
 .sapSuiteCollaborationBarMsgStrip {
-    background-color: @sapLegendBackgroundColor6 !important;
-    border-width: 0px !important;
+	background-color: var(--sapLegendBackgroundColor6) !important;
+	border-width: 0 !important;
 }
 
 .sapSuiteCollaborationBarMenu {
-    .sapSuiteUiCommonsCollaborationMail {
-        .sapUiIcon {
-            color: @sapLegendColor6;
-        }
-    }
-
-    .sapSuiteUiCommonsCollaborationMSTeamsShare,
-    .sapSuiteUiCommonsCollaborationChat,
-    .sapSuiteUiCommonsCollaborationTab {
-        .sapUiIcon {
-            color: @sapLegendColor20;
-        }
-    }
-
-    .sapSuiteUiCommonsCollaborationManager {
-        .sapUiIcon {
-            color: @sapLegendColor17;
-        }
-    }
-
-    .sapSuiteUiCommonsCollaborationLink {
-        .sapUiIcon {
-            color: @sapLegendColor18;
-        }
-    }
-}
+
+	.sapSuiteUiCommonsCollaborationMail {
+
+		.sapUiIcon {
+			color: var(--sapLegendColor6);
+		}
+	}
+
+	.sapSuiteUiCommonsCollaborationMSTeamsShare,
+	.sapSuiteUiCommonsCollaborationChat,
+	.sapSuiteUiCommonsCollaborationTab {
+
+		.sapUiIcon {
+			color: var(--sapLegendColor20);
+		}
+	}
+
+	.sapSuiteUiCommonsCollaborationManager {
+
+		.sapUiIcon {
+			color: var(--sapLegendColor17);
+		}
+	}
+
+	.sapSuiteUiCommonsCollaborationLink {
+
+		.sapUiIcon {
+			color: var(--sapLegendColor18);
+		}
+	}
+}