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

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

@@ -1,3 +1,8 @@
+/* ====================================================== */
+/* CSS for control sap.suite.ui.commons/MicroProcessFlow  */
+/* Base theme                                             */
+/* ====================================================== */
+
 .sapSuiteUiCommonsMicroProcessFlow {
 	display: flex;
 	flex-direction: row;
@@ -18,7 +23,6 @@
 	display: flex;
 	flex-direction: row;
 	margin: 2px;
-
 	width: 100%;
 }
 
@@ -35,9 +39,9 @@
 	width: 18px;
 	height: 18px;
 	border-radius: 50%;
-	border: 1px solid @sapUiNeutralBorder;
-	color: @sapUiNeutralBorder;
-	background-color: @sapUiGroupContentBackground;
+	border: 1px solid var(--sapNeutralBorderColor);
+	color: var(--sapNeutralBorderColor);
+	background-color: var(--sapGroup_ContentBackground);
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -50,100 +54,99 @@
 
 .sapSuiteUiCommonsMicroProcessFlowItemContent:focus,
 .sapSuiteUiCommonsMicroProcessFlowItem:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: 1px;
 }
 
 .sapSuiteUiCommonsMicroProcessFlow:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: 1px;
 }
 
-
 .sapSuiteUiCommonsMicroProcessFlowItem .sapUiIcon:not(.sapMLIBImgNav):not(.sapMBtnIcon):not(.sapFAvatarTypeIcon) {
 	font-size: 0.75rem;
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemStandard {
-	color: @sapUiNeutralBorder;
+	color: var(--sapNeutralBorderColor);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemSuccess {
-	border-color: @sapSuccessBorderColor;
-	background-color: @sapButton_Success_Background;
+	border-color: var(--sapSuccessBorderColor);
+	background-color: var(--sapButton_Success_Background);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemError {
-	border-color: @sapErrorBorderColor;
-	background-color: @sapButton_Negative_Background;
+	border-color: var(--sapErrorBorderColor);
+	background-color: var(--sapButton_Negative_Background);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemWarning {
-	border-color: @sapWarningBorderColor;
-	background-color: @sapButton_Critical_Background;
+	border-color: var(--sapWarningBorderColor);
+	background-color: var(--sapButton_Critical_Background);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemInformation {
-  	border-color: @sapInformationBorderColor;
-  	background-color: @sapInformationBackground;
+	border-color: var(--sapInformationBorderColor);
+	background-color: var(--sapInformationBackground);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemNone {
-	border-color: @sapNeutralBorderColor;
-    background-color: @sapNeutralBackground;
+	border-color: var(--sapNeutralBorderColor);
+	background-color: var(--sapNeutralBackground);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemError .sapSuiteUiCommonsMicroProcessFlowItemIcon{
-	color: @sapContent_ContrastTextColor;
-	text-shadow: @sapContent_ContrastTextShadow; 
+	color: var(--sapContent_ContrastTextColor);
+	text-shadow: var(--sapContent_ContrastTextShadow);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemInformation .sapSuiteUiCommonsMicroProcessFlowItemIcon {
-	color: @sapInformativeTextColor;
+	color: var(--sapInformativeTextColor);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemWarning .sapSuiteUiCommonsMicroProcessFlowItemIcon {
-	color: @sapContent_ContrastTextColor;
-	text-shadow: @sapContent_ContrastTextShadow;
+	color: var(--sapContent_ContrastTextColor);
+	text-shadow: var(--sapContent_ContrastTextShadow);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemSuccess .sapSuiteUiCommonsMicroProcessFlowItemIcon {
-	color: @sapContent_ContrastTextColor;
-	text-shadow: @sapContent_ContrastTextShadow;
+	color: var(--sapContent_ContrastTextColor);
+	text-shadow: var(--sapContent_ContrastTextShadow);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemNone .sapSuiteUiCommonsMicroProcessFlowItemIcon {
-	color: @sapChart_Sequence_Neutral_Minus2;
+	color: var(--sapChart_Sequence_Neutral_Minus2);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemSuccess:hover {
-	background-color: @sapButton_Success_Hover_Background;
-	border-color: @sapSuccessBorderColor;
-	color: @sapButton_Success_Hover_TextColor;
+	background-color: var(--sapButton_Success_Hover_Background);
+	border-color: var(--sapSuccessBorderColor);
+	color: var(--sapButton_Success_Hover_TextColor);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemWarning:hover {
-	background-color: @sapButton_Critical_Hover_Background;
-	border-color: @sapWarningBorderColor;
-	color:@sapButton_Critical_Hover_TextColor
+	background-color: var(--sapButton_Critical_Hover_Background);
+	border-color: var(--sapWarningBorderColor);
+	color: var(--sapButton_Critical_Hover_TextColor);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemError:hover {
-	background-color: @sapButton_Negative_Hover_Background;
-	border-color: @sapErrorBorderColor;
-	color: @sapButton_Negative_Hover_TextColor;
+	background-color: var(--sapButton_Negative_Hover_Background);
+	border-color: var(--sapErrorBorderColor);
+	color: var(--sapButton_Negative_Hover_TextColor);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemInformation:hover {
-  background-color:  @sapButton_Information_Hover_Background;
-  border-color: @sapInformationBorderColor;
-  color: @sapButton_Information_Hover_TextColor;
+	background-color: var(--sapButton_Information_Hover_Background);
+	border-color: var(--sapInformationBorderColor);
+	color: var(--sapButton_Information_Hover_TextColor);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemNone:hover {
-  background-color: @sapChart_Sequence_Neutral_Plus2;
-  border-color: @sapChart_Sequence_Neutral_BorderColor;
-  color: @sapChart_Sequence_Neutral_Minus2;
+	background-color: var(--sapChart_Sequence_Neutral_Plus2);
+	border-color: var(--sapChart_Sequence_Neutral_BorderColor);
+	color: var(--sapChart_Sequence_Neutral_Minus2);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemWrapper {
@@ -156,7 +159,7 @@
 
 .sapSuiteUiCommonsMicroProcessFlowItemSeparator {
 	height: 1px;
-	background-color: @sapUiContentForegroundBorderColor;
+	background-color: var(--sapContent_ForegroundBorderColor);
 	margin-left: 3px;
 	margin-right: 3px;
 	flex-grow: 1;
@@ -185,7 +188,7 @@
 .sapSuiteUiCommonsMicroProcessFlowItemOnHoldElement {
 	width: 4px;
 	height: 20px;
-	background-color: @sapUiNegativeElement;
+	background-color: var(--sapNegativeElementColor);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemIntermediary {
@@ -209,8 +212,9 @@
 .sapSuiteUiCommonsMicroProcessFlowItemPressed:hover .sapSuiteUiCommonsMicroProcessFlowItemIcon{
 	color:var(--sapContent_ContrastIconColor);
 }
+
 .sapSuiteUiCommonsMicroProcessFlowItemPressed:hover .sapSuiteUiCommonsMicroProcessFlowItem {
-	background-color: @sapUiHighlight;
+	background-color: var(--sapHighlightColor);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemHiddenSeparator {
@@ -239,11 +243,11 @@
 
 .sapSuiteUiCommonsMicroProcessFlowArrow {
 	cursor: pointer;
-	color: @sapUiContentIconColor;
+	color: var(--sapContent_IconColor);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowArrow:hover {
-	color: @sapUiHighlight;
+	color: var(--sapHighlightColor);
 }
 
 .sapSuiteUiCommonsMicroProcessFlowLeftLabel {
@@ -260,4 +264,4 @@
 
 .sapSuiteUiCommonsMicroProcessFlowScroller:focus {
 	outline: none;
-}
+}

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

@@ -1,7 +1,7 @@
-
-/* ============================================= */
-/* CSS for control sap.suite.ui.commons/MonitoringContent.control */
-/* ============================================= */
+/* ======================================================= */
+/* CSS for control sap.suite.ui.commons/MonitoringContent  */
+/* Base theme                                              */
+/* ======================================================= */
 
 .sapSuiteUiCommonsMC {
 	position: relative;
@@ -79,4 +79,4 @@
 .sapSuiteUiCommonsMCIcon.Loading,
 .sapSuiteUiCommonsMCIcon.Failed {
 	opacity: 0.25;
-}
+}

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

@@ -1,9 +1,11 @@
-/* ============================================= */
-/* CSS for control sap.suite.ui.commons/NetworkGraph */
-/* ============================================= */
-.sapMSelectList li[data-islast="true"],
-.sapMSelectList li[data-islast="true"] {
-	border-bottom: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiContentForegroundBorderColor;
+/* ================================================== */
+/* CSS for control sap.suite.ui.commons/NetworkGraph  */
+/* Base theme                                         */
+/* ================================================== */
+
+.sapMSelectList li[data-islast='true'],
+.sapMSelectList li[data-islast='true'] {
+	border-bottom: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGraph {
@@ -18,15 +20,13 @@
 }
 
 .sapSuiteUiCommonsNetworkGraph:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-	outline-offset: 0px;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: 0;
 }
 
 .sapSuiteUiCommonsNetworkGraphPanning {
 	cursor: move;
 	cursor: grabbing;
-	cursor: -moz-grabbing;
-	cursor: -webkit-grabbing;
 }
 
 .sapSuiteUiCommonsNetworkGraphEventWrapper {
@@ -35,12 +35,12 @@
 }
 
 .sapSuiteUiCommonsNetworkGraphContentWrapperAccessibility {
-	position:absolute;
+	position: absolute;
 	left:-10000px;
-	top:auto;
-	width:1px;
-	height:1px;
-	overflow:hidden;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
 }
 
 .sapSuiteUiCommonsNetworkGraphScroller {
@@ -58,7 +58,7 @@
 
 .sapSuiteUiCommonsNetworkGraphInnerScrollerCenter.sapSuiteUiCommonsNetworkGraphInnerScrollerNoMargin {
 	margin: 0;
-	height:fit-content;
+	height: fit-content;
 	min-height: 0;
 }
 
@@ -67,15 +67,15 @@
 }
 
 .sapSuiteUiCommonsNetworkGraphBackgroundWhite {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 .sapSuiteUiCommonsNetworkGraphBackgroundDefault {
-	background-color: @sapUiBaseBG;
+	background-color: var(--sapBackgroundColor);
 }
 
 .sapSuiteFlickerFreeRect {
-	fill: @sapUiBaseBG;
+	fill: var(--sapBackgroundColor);
 	width: 1000px;
 	height: 1000px;
 }
@@ -92,14 +92,12 @@
 	flex-shrink: 0;
 	overflow: hidden;
 	position: absolute;
-	//margin: auto;
-
 	transform-origin: top left;
 	pointer-events: none;
 }
 
 .sapSuiteUiCommonsNetworkGraphContainerOverlay {
-	background-color: @sapUiListBackground;
+	background-color: var(--sapList_Background);
 	width: 100%;
 	height: 100%;
 }
@@ -109,11 +107,17 @@
 	pointer-events: none;
 }
 
+html[dir=rtl] .sapSuiteUiCommonsNetworkGraphIcon {
+	transform-box: fill-box;
+	transform-origin: center;
+	transform: scaleX(-1);
+}
+
 .sapSuiteUiCommonsNetworkGraphSvg .sapSuiteUiCommonsNetworkGraphIcon,
 .sapSuiteUiCommonsNetworkGraphDivActionButton .sapSuiteUiCommonsNetworkGraphIcon,
 .sapSuiteUiCommonsNetworkTopGroup .sapSuiteUiCommonsNetworkGraphIcon,
 .sapSuiteUiCommonsNetworkGroupHeader .sapSuiteUiCommonsNetworkGraphIcon {
-	font-family: @sapUiContentIconFontFamily;
+	font-family: var(--sapContent_IconFontFamily);
 }
 
 .sapSuiteUiCommonsNetworkGraphLegend {
@@ -132,7 +136,7 @@
 }
 
 .sapSuiteUiCommonsNetworkGraphContentWrapper:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: 1px;
 }
 
@@ -140,15 +144,12 @@
 	outline: none;
 }
 
-//** Legend **//
+/** Legend **/
 .sapSuiteUiCommonsNetworkGraphLegendLine {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	margin-bottom: 2px;
-
-	width: -webkit-fit-content;
-	width: -moz-fit-content;
 	width: fit-content;
 }
 
@@ -162,15 +163,15 @@
 }
 
 .sapSuiteUiCommonsNetworkGraphLegendLine:hover {
-	background-color: @sapUiButtonHoverBackground;
+	background-color: var(--sapButton_Hover_Background);
 }
 
 .sapSuiteUiCommonsNetworkGraphLegendColorLine {
 	width: 10px;
 	height: 10px;
 	margin: 6px;
-	background-color: @sapUiContentForegroundBorderColor;
-	border: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiContentForegroundBorderColor;
+	background-color: var(--sapContent_ForegroundBorderColor);
+	border: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapContent_ForegroundBorderColor);
 	flex-shrink: 0; /* Prevent shrinking */
 }
 
@@ -178,10 +179,10 @@
 	margin-right: 5px;
 }
 
-//** Attributes **/
+/** Attributes **/
 .sapSuiteUiCommonsNetworkGraphSvg .sapSuiteUiCommonsNetworkGraphAttribute {
-	font-size: @sapMFontSmallSize;
-	fill: @sapUiBaseText;
+	font-size: var(--sapFontSmallSize);
+	fill: var(--sapTextColor);
 }
 
 .sapSuiteUiCommonsNetworkGraphSvg .sapSuiteUiCommonsNetworkGraphAttributeValue {
@@ -193,19 +194,19 @@
 }
 
 .sapSuiteUiCommonsNetworkGraphLegendColorLine.sapSuiteUiCommonsNetworkElementSuccess {
-	background-color: @sapUiSuccessBorder;
+	background-color: var(--sapSuccessBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGraphLegendColorLine.sapSuiteUiCommonsNetworkElementError {
-	background-color: @sapUiErrorBorder;
+	background-color: var(--sapErrorBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGraphLegendColorLine.sapSuiteUiCommonsNetworkElementInformation {
-	background-color: @sapUiHighlight;
+	background-color: var(--sapHighlightColor);
 }
 
 .sapSuiteUiCommonsNetworkGraphLegendColorLine.sapSuiteUiCommonsNetworkElementWarning {
-	background-color: @sapUiWarningBorder;
+	background-color: var(--sapWarningBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkAlertWrapper {
@@ -214,33 +215,32 @@
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background-color: @sapUiBaseText;
+	background-color: var(--sapTextColor);
 	opacity: 0;
 	pointer-events: none;
 	transition: opacity ease-in-out;
-
 	z-index: 500;
 }
 
 .sapSuiteUiCommonsNetworkAlertText {
 	font-size: 1.375rem;
-	color: @sapUiTileBackground;
+	color: var(--sapTile_Background);
 	position: relative;
 	margin: 0;
 	top: 50%;
-	-webkit-transform: translateY(-50%);
-	-ms-transform: translateY(-50%);
 	transform: translateY(-50%);
 	text-align: center;
 }
 
-/* ============================================= */
-/* CSS for control sap.suite.ui.commons/GraphMap */
-/* ============================================= */
+/* ============================================== */
+/* CSS for control sap.suite.ui.commons/GraphMap  */
+/* ============================================== */
+
 .sapSuiteUiCommonsNetworkGraphMapDivNodes {
 	pointer-events: none;
 	transform-origin: top left;
 	position: absolute;
+	width: 100%;
 }
 
 .sapSuiteUiCommonsNetworkGraphMapSvg {
@@ -258,7 +258,8 @@
 	width: 100%;
 }
 
-html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivGroups {
+html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivGroups,
+html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivNodes {
 	transform-origin: top right;
 }
 
@@ -269,7 +270,7 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivGroups {
 
 .sapSuiteUiCommonsNetworkGraphMapBoundary {
 	fill: none;
-	stroke: @sapUiContentForegroundBorderColor;
+	stroke: var(--sapContent_ForegroundBorderColor);
 	vector-effect: non-scaling-stroke;
 	stroke-width: 2px;
 	shape-rendering: crispEdges;
@@ -281,7 +282,7 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivGroups {
 	align-items: center;
 	padding-left: 10px;
 	padding-right: 10px;
-	border-bottom: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiGroupTitleBorderColor;
+	border-bottom: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapGroup_TitleBorderColor);
 	flex-shrink: 0;
 	box-sizing: border-box;
 }
@@ -291,7 +292,7 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivGroups {
 }
 
 .sapSuiteUiCommonsNetworkGraphMapNavigator {
-	stroke: @sapUiActive;
+	stroke: var(--sapActiveColor);
 	fill: none;
 	stroke-width: 2px;
 	vector-effect: non-scaling-stroke;
@@ -309,8 +310,8 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivGroups {
 }
 
 .sapSuiteUiCommonsNetworkGraphMapTitleText {
-	font-size: @sapMFontLargeSize;
-	color: @sapTextColor;
+	font-size: var(--sapFontLargeSize);
+	color: var(--sapTextColor);
 }
 
 .sapSuiteUiCommonsNetworkGraphMap {
@@ -321,7 +322,7 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivGroups {
 
 .sapSuiteNetworkGraphErrorText {
 	margin: 5px;
-	color: @sapUiErrorBorder;
+	color: var(--sapErrorBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGraph.sapSuiteUiCommonsNetworkGraphLayered.sapSuiteUiCommonsNetworkGraphCrispEdges .sapSuiteUiCommonsNetworkGraphSvg path,
@@ -345,7 +346,7 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivGroups {
 }
 
 .sapSuiteUiCommonsNetworkGraphLaneIcon {
-	font-family: @sapUiContentIconFontFamily;
+	font-family: var(--sapContent_IconFontFamily);
 	pointer-events: none;
 }
 
@@ -359,10 +360,8 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivGroups {
 	position: absolute;
 	pointer-events: none;
 	transform-origin: top left;
-
 	width: 100%;
 	height: 100%;
-
 	z-index: 8;
 }
 
@@ -375,11 +374,9 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivGroups {
 }
 
 .sapSuiteUiCommonsNetworkGraphDivGroups {
-	//pointer-events: none;
 	transform-origin: top left;
 	position: absolute;
 	overflow: hidden;
-	
 	width: 100%;
 }
 
@@ -407,7 +404,6 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivGroups {
 	margin-right: auto;
 	margin-top: auto;
 	margin-bottom: auto;
-
 	display: flex;
 	flex-direction: unset;
 	align-items: center;
@@ -418,7 +414,6 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivGroups {
 	margin-right: auto;
 	margin-top: auto;
 	margin-bottom: auto;
-
 	display: flex;
 	flex-direction: unset;
 	align-items: center;
@@ -437,6 +432,6 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkGraphMapDivGroups {
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkElementFocus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: 1px;
-	}
+}