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

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

@@ -1,10 +1,11 @@
-/* ============================================= */
-/* CSS for control sap.suite.ui.commons/NetworkGroup */
-/* ============================================= */
+/* ================================================== */
+/* CSS for control sap.suite.ui.commons/NetworkGroup  */
+/* Base theme                                         */
+/* ================================================== */
 
 .sapSuiteUiCommonsNetworkGroup {
 	background-color: transparent;
-	border: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	border: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapNeutralBorderColor);
 	border-radius: 5px;
 	position: absolute;
 }
@@ -22,20 +23,17 @@
 	border-left-style: dashed;
 }
 
-
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane:first-of-type {
 	border-left-style: solid;
 }
 
 .sapSuiteUiCommonsNetworkGraphRightLeft.sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane:first-of-type {
-	border: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	border: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapNeutralBorderColor);
 	border-left-style: dashed;
 }
 
 .sapSuiteUiCommonsNetworkGroup:not(.sapSuiteUiCommonsNetworkGroupSwimLane) {
-	-webkit-box-shadow: @sapUiContentShadow2;
-	-moz-box-shadow: @sapUiContentShadow2;
-	box-shadow: @sapUiContentShadow2;
+	box-shadow: var(--sapContent_Shadow2);
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane {
@@ -47,21 +45,21 @@
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane:last-of-type {
-	border-right: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	border-right: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapNeutralBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGraphRightLeft.sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane:last-of-type {
-	border-left: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	border-left: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapNeutralBorderColor);
 	border-right: none;
 }
 
 .sapSuiteUiCommonsNetworkGraphRightLeft .sapSuiteUiCommonsNetworkGroupHeader {
-    margin-right: 0.0625rem;
+	margin-right: 0.0625rem;
 }
 
 .sapSuiteUiCommonsNetworkGroupHeader {
-	border-bottom: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
-	background-color: @sapNeutralBackground;
+	border-bottom: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapNeutralBorderColor);
+	background-color: var(--sapNeutralBackground);
 	border-top-left-radius: 3px;
 	border-top-right-radius: 3px;
 	height: 32px;
@@ -78,13 +76,12 @@
 .sapSuiteUiCommonsNetworkGroupHeaderInnerIcons {
 	padding-right: 3px;
 	flex-direction: row-reverse;
-
 	flex-shrink: 0;
 }
 
 .sapSuiteUiCommonsNetworkGroupHeaderMenuIcon,
 .sapSuiteUiCommonsNetworkGroupHeaderInnerText > div {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane .sapSuiteUiCommonsNetworkGroupHeader {
@@ -107,7 +104,6 @@
 .sapSuiteUiCommonsNetworkGroupHeaderInner > * {
 	padding: 4px;
 	margin: 1px;
-
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
@@ -116,18 +112,22 @@
 	width: 40px;
 }
 
+html[dir=rtl] .sapUiSizeCozy .sapSuiteUiCommonsNetworkGraphHeaderCheckboxInner .sapMCbMark {
+	transform: scaleX(-1);
+}
+
 .sapSuiteUiCommonsNetworkGroupHeaderMenuIcon {
 	cursor: pointer;
 	pointer-events: all;
 }
 
 .sapSuiteUiCommonsNetworkGroupHeaderMenuIcon:focus {
-	outline: 1px dashed @sapUiContentFocusColor;
+	outline: 1px dashed var(--sapContent_FocusColor);
 }
 
 .sapSuiteUiCommonsNetworkGroupHeaderMenuIcon:hover {
-	background-color: @sapUiButtonHoverBackground;
-	color: @sapUiBaseText !important;
+	background-color: var(--sapButton_Hover_Background);
+	color: var(--sapTextColor) !important;
 }
 
 .sapSuiteUiCommonsNetworkGraphMapContent .sapSuiteUiCommonsNetworkGroupHeaderMenuIcon {
@@ -135,14 +135,13 @@
 	pointer-events: none;
 }
 
-// vertical swim lane
+/* vertical swim lane */
 .sapSuiteUiCommonsNetworkGroupVerticalSwimLane .sapSuiteUiCommonsNetworkGroupHeader {
 	justify-content: flex-end;
 	height: 100%;
 	width: 2rem;
 	flex-direction: column-reverse;
-
-	border-right: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiListBorderColor;
+	border-right: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapList_BorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGroupVerticalSwimLane .sapSuiteUiCommonsNetworkGroupHeaderInner {
@@ -172,22 +171,21 @@
 .sapSuiteUiCommonsNetworkGroupHeaderStatus {
 	width: 0.375rem;
 	height: 100%;
-
 	flex-shrink: 0;
 }
 
 .sapSuiteUiCommonsNetworkGroupVerticalSwimLane .sapSuiteUiCommonsNetworkGroupHeader {
-	border: @sapUiFieldBorderStyle;
+	border: var(--sapField_BorderStyle);
 }
 
 .sapSuiteUiCommonsNetworkGroupVerticalSwimLane.sapSuiteUiCommonsNetworkGroupTopBottom .sapSuiteUiCommonsNetworkGroupHeader {
-	border: @sapUiFieldBorderStyle;
-	border-right: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiListBorderColor;
+	border: var(--sapField_BorderStyle);
+	border-right: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapList_BorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane.sapSuiteUiCommonsNetworkGroupTopBottom {
 	border-left-style: solid;
-	border-right: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	border-right: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapNeutralBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane.sapSuiteUiCommonsNetworkGroupTopBottom {
@@ -196,7 +194,7 @@
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane.sapSuiteUiCommonsNetworkGroupTopBottom.sapSuiteUiCommonsNetworkGroupCollapsed .sapSuiteUiCommonsNetworkGroupHeader {
-	border: @sapUiFieldBorderStyle;
+	border: var(--sapField_BorderStyle);
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane.sapSuiteUiCommonsNetworkGroupTopBottom:first-of-type {
@@ -204,18 +202,18 @@
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane.sapSuiteUiCommonsNetworkGroupTopBottom:last-of-type {
-	border-bottom: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	border-bottom: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapNeutralBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGroupVerticalSwimLane.sapSuiteUiCommonsNetworkGroupBottomTop .sapSuiteUiCommonsNetworkGroupHeader {
-	border: @sapUiFieldBorderStyle;
-	border-right: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiListBorderColor;
+	border: var(--sapField_BorderStyle);
+	border-right: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapList_BorderColor);
 	height: 99%;
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane.sapSuiteUiCommonsNetworkGroupBottomTop {
 	border-left-style: solid;
-	border-right: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	border-right: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapNeutralBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane.sapSuiteUiCommonsNetworkGroupBottomTop {
@@ -224,11 +222,11 @@
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane.sapSuiteUiCommonsNetworkGroupBottomTop.sapSuiteUiCommonsNetworkGroupCollapsed .sapSuiteUiCommonsNetworkGroupHeader {
-	border: @sapUiFieldBorderStyle;
+	border: var(--sapField_BorderStyle);
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane.sapSuiteUiCommonsNetworkGroupBottomTop:first-of-type {
-	border-bottom: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	border-bottom: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapNeutralBorderColor);
 
 	.sapSuiteUiCommonsNetworkGroupHeader {
 		height: 100%;
@@ -236,80 +234,78 @@
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane.sapSuiteUiCommonsNetworkGroupBottomTop:last-of-type {
-	border-top: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	border-top: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapNeutralBorderColor);
 }
 
-// status
+/* status */
 .sapSuiteUiCommonsNetworkElementSuccess .sapSuiteUiCommonsNetworkGroupHeaderStatus {
-	background-color: @sapUiPositiveElement;
+	background-color: var(--sapPositiveElementColor);
 }
 
 .sapSuiteUiCommonsNetworkElementError .sapSuiteUiCommonsNetworkGroupHeaderStatus {
-	background-color: @sapUiNegativeElement;
+	background-color: var(--sapNegativeElementColor);
 }
 
 .sapSuiteUiCommonsNetworkElementWarning .sapSuiteUiCommonsNetworkGroupHeaderStatus {
-	background-color: @sapUiChartCritical;
+	background-color: var(--sapChart_Critical);
 }
 
 .sapSuiteUiCommonsNetworkElementInformation .sapSuiteUiCommonsNetworkGroupHeaderStatus {
-	background-color: @sapUiHighlight;
+	background-color: var(--sapHighlightColor);
 }
 
 .sapSuiteUiCommonsNetworkGroupClassic.sapSuiteUiCommonsNetworkElementError .sapSuiteUiCommonsNetworkGroupHeader *,
 .sapSuiteUiCommonsNetworkGroupClassic.sapSuiteUiCommonsNetworkElementWarning .sapSuiteUiCommonsNetworkGroupHeader *,
 .sapSuiteUiCommonsNetworkGroupClassic.sapSuiteUiCommonsNetworkElementSuccess .sapSuiteUiCommonsNetworkGroupHeader *,
 .sapSuiteUiCommonsNetworkGroupClassic.sapSuiteUiCommonsNetworkElementInformation .sapSuiteUiCommonsNetworkGroupHeader * {
-	color: @sapTextColor;
+	color: var(--sapTextColor);
 }
 
 .sapSuiteUiCommonsNetworkGroupClassic.sapSuiteUiCommonsNetworkElementSuccess .sapSuiteUiCommonsNetworkGroupHeader {
-	background-color: @sapSuccessBackground;
-	border-color: @sapSuccessBorderColor;
+	background-color: var(--sapSuccessBackground);
+	border-color: var(--sapSuccessBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGroupClassic.sapSuiteUiCommonsNetworkElementSuccess {
-	border-color: @sapSuccessBorderColor;
+	border-color: var(--sapSuccessBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGroupClassic.sapSuiteUiCommonsNetworkElementError .sapSuiteUiCommonsNetworkGroupHeader {
-	background-color: @sapErrorBackground;
-	border-color: @sapErrorBorderColor;
+	background-color: var(--sapErrorBackground);
+	border-color: var(--sapErrorBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGroupClassic.sapSuiteUiCommonsNetworkElementError {
-	border-color: @sapErrorBorderColor;
+	border-color: var(--sapErrorBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGroupClassic.sapSuiteUiCommonsNetworkElementWarning .sapSuiteUiCommonsNetworkGroupHeader {
-	background-color: @sapWarningBackground;
-	border-color: @sapWarningBorderColor;
+	background-color: var(--sapWarningBackground);
+	border-color: var(--sapWarningBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGroupClassic.sapSuiteUiCommonsNetworkElementWarning {
-	border-color: @sapWarningBorderColor;
+	border-color: var(--sapWarningBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGroupClassic.sapSuiteUiCommonsNetworkElementInformation .sapSuiteUiCommonsNetworkGroupHeader {
-	background-color: @sapInformationBackground;
-	border-color: @sapInformationBorderColor;
+	background-color: var(--sapInformationBackground);
+	border-color: var(--sapInformationBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkGroupClassic.sapSuiteUiCommonsNetworkElementInformation {
-	border-color: @sapInformationBorderColor;
+	border-color: var(--sapInformationBorderColor);
 }
 
-// top group
+/* top group */
 .sapSuiteUiCommonsNetworkTopGroup {
 	position: absolute;
-
 	display: flex;
 	align-items: center;
-
-	border-bottom: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiListBorderColor;
+	border-bottom: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapList_BorderColor);
 }
 
-html[dir=rtl] .sapSuiteUiCommonsNetworkTopGroup {
+html[dir='rtl'] .sapSuiteUiCommonsNetworkTopGroup {
 	justify-content: flex-end;
 }
 
@@ -317,7 +313,7 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkTopGroup {
 	justify-content: flex-end;
 }
 
-html[dir=rtl] .sapSuiteUiCommonsNetworkTopGroupRight {
+html[dir='rtl'] .sapSuiteUiCommonsNetworkTopGroupRight {
 	justify-content: normal;
 }
 
@@ -336,16 +332,16 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkTopGroupRight {
 	flex-direction: row-reverse;
 }
 
-html[dir=rtl] .sapSuiteUiCommonsNetworkTopGroupHeader {
+html[dir='rtl'] .sapSuiteUiCommonsNetworkTopGroupHeader {
 	flex-direction: row-reverse;
 }
 
-html[dir=rtl] .sapSuiteUiCommonsNetworkTopGroupRight .sapSuiteUiCommonsNetworkTopGroupHeader {
+html[dir='rtl'] .sapSuiteUiCommonsNetworkTopGroupRight .sapSuiteUiCommonsNetworkTopGroupHeader {
 	flex-direction: row;
 }
 
 .sapSuiteUiCommonsNetworkTopGroupDelimiter {
-	border-left: @sapUiElementBorderWidth @sapUiFieldSelectorReadOnlyBorderStyle @sapUiListBorderColor;
+	border-left: var(--sapElement_BorderWidth) var(--sapField_Selector_ReadOnly_BorderStyle) var(--sapList_BorderColor);
 	top: 32px;
 	height: 100%;
 	left: 50%;
@@ -353,5 +349,5 @@ html[dir=rtl] .sapSuiteUiCommonsNetworkTopGroupRight .sapSuiteUiCommonsNetworkTo
 }
 
 .sapSuiteUiCommonsNetworkGroupHeaderMenuIcon.sapSuiteUiCommonsNetworkElementFocus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-}
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+}

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

@@ -1,6 +1,11 @@
+/* ================================================= */
+/* CSS for control sap.suite.ui.commons/NetworkLine  */
+/* Base theme                                        */
+/* ================================================= */
+
 .sapSuiteUiCommonsNetworkLineInvisibleWrapper {
 	stroke-width: 8;
-	stroke:  transparent; /* Transparent stroke for hit-testing. as "none" effectively disables the stroke rendering entirely, which also eliminates the hit-test area of the SVG path*/
+	stroke:  transparent; /* Transparent stroke for hit-testing. as "none" effectively disables the stroke rendering entirely, which also eliminates the hit-test area of the SVG path */
 	pointer-events: stroke;
 	fill: none;
 }
@@ -8,7 +13,7 @@
 .sapSuiteUiCommonsNetworkLinePath {
 	fill: none;
 	pointer-events: none;
-	stroke: @sapNeutralBorderColor;
+	stroke: var(--sapNeutralBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkLines .sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLinePath,
@@ -23,17 +28,17 @@
 .sapSuiteUiCommonsNetworkLines .sapSuiteUiCommonsNetworkElementSelected .sapSuiteUiCommonsNetworkLineArrow,
 .sapSuiteUiCommonsNetworkLines .sapSuiteUiCommonsNetworkElementSelected .sapSuiteUiCommonsNetworkLineTextBoxBackground {
 	stroke-width: 2;
-	stroke: @sapUiContentDragAndDropActiveColor;
+	stroke: var(--sapContent_DragAndDropActiveColor);
 }
 
 .sapSuiteUiCommonsNetworkLines .sapSuiteUiCommonsNetworkElementSelected .sapSuiteUiCommonsNetworkLineArrow,
 .sapSuiteUiCommonsNetworkLines .sapSuiteUiCommonsNetworkElementSelected .sapSuiteUiCommonsNetworkLineNipple {
-	fill: @sapUiContentDragAndDropActiveColor;
+	fill: var(--sapContent_DragAndDropActiveColor);
 }
 
 .sapSuiteUiCommonsNetworkLineArrow {
-	fill: @sapNeutralBorderColor;
-	stroke: @sapNeutralBorderColor;
+	fill: var(--sapNeutralBorderColor);
+	stroke: var(--sapNeutralBorderColor);
 	pointer-events: none;
 	shape-rendering: geometricPrecision !important;
 }
@@ -44,7 +49,7 @@
 
 /* Colors - status */
 .sapSuiteUiCommonsNetworkLineNipple {
-	fill: @sapNeutralBorderColor;
+	fill: var(--sapNeutralBorderColor);
 	shape-rendering: auto !important;
 }
 .sapSuiteUiCommonsNetworkElementWarning.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLinePath,
@@ -53,14 +58,14 @@
 .sapSuiteUiCommonsNetworkElementWarning .sapSuiteUiCommonsNetworkLineTextBoxBackground,
 .sapSuiteUiCommonsNetworkLineTexts .sapSuiteUiCommonsNetworkElementWarning.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLineTextBoxBackground,
 .sapSuiteUiCommonsNetworkLineTexts .sapSuiteUiCommonsNetworkElementWarning .sapSuiteUiCommonsNetworkLineTextBoxBackground {
-	stroke: @sapWarningBorderColor;
+	stroke: var(--sapWarningBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkElementWarning.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLineArrow,
 .sapSuiteUiCommonsNetworkElementWarning .sapSuiteUiCommonsNetworkLineArrow,
 .sapSuiteUiCommonsNetworkElementWarning .sapSuiteUiCommonsNetworkLineNipple {
-	stroke: @sapWarningBorderColor;
-	fill: @sapWarningBorderColor;
+	stroke: var(--sapWarningBorderColor);
+	fill: var(--sapWarningBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkElementError.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLinePath,
@@ -69,14 +74,14 @@
 .sapSuiteUiCommonsNetworkElementError .sapSuiteUiCommonsNetworkLineTextBoxBackground,
 .sapSuiteUiCommonsNetworkLineTexts .sapSuiteUiCommonsNetworkElementError.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLineTextBoxBackground,
 .sapSuiteUiCommonsNetworkLineTexts .sapSuiteUiCommonsNetworkElementError .sapSuiteUiCommonsNetworkLineTextBoxBackground {
-	stroke: @sapErrorBorderColor;
+	stroke: var(--sapErrorBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkElementError.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLineArrow,
 .sapSuiteUiCommonsNetworkElementError .sapSuiteUiCommonsNetworkLineArrow,
 .sapSuiteUiCommonsNetworkElementError .sapSuiteUiCommonsNetworkLineNipple {
-	stroke: @sapErrorBorderColor;
-	fill: @sapErrorBorderColor;
+	stroke: var(--sapErrorBorderColor);
+	fill: var(--sapErrorBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkElementSuccess.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLinePath,
@@ -85,34 +90,32 @@
 .sapSuiteUiCommonsNetworkElementSuccess .sapSuiteUiCommonsNetworkLineTextBoxBackground,
 .sapSuiteUiCommonsNetworkLineTexts .sapSuiteUiCommonsNetworkElementSuccess.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLineTextBoxBackground,
 .sapSuiteUiCommonsNetworkLineTexts .sapSuiteUiCommonsNetworkElementSuccess .sapSuiteUiCommonsNetworkLineTextBoxBackground {
-	stroke: @sapSuccessBorderColor;
+	stroke: var(--sapSuccessBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkElementSuccess.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLineArrow,
 .sapSuiteUiCommonsNetworkElementSuccess .sapSuiteUiCommonsNetworkLineArrow,
 .sapSuiteUiCommonsNetworkElementSuccess .sapSuiteUiCommonsNetworkLineNipple {
-	stroke: @sapSuccessBorderColor;
-	fill: @sapSuccessBorderColor;
+	stroke: var(--sapSuccessBorderColor);
+	fill: var(--sapSuccessBorderColor);
 }
 
-
 .sapSuiteUiCommonsNetworkElementInformation.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLinePath,
 .sapSuiteUiCommonsNetworkElementInformation .sapSuiteUiCommonsNetworkLinePath,
 .sapSuiteUiCommonsNetworkElementInformation.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLineTextBoxBackground,
 .sapSuiteUiCommonsNetworkElementInformation .sapSuiteUiCommonsNetworkLineTextBoxBackground,
 .sapSuiteUiCommonsNetworkLineTexts .sapSuiteUiCommonsNetworkElementInformation.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLineTextBoxBackground,
 .sapSuiteUiCommonsNetworkLineTexts .sapSuiteUiCommonsNetworkElementInformation .sapSuiteUiCommonsNetworkLineTextBoxBackground {
-	stroke: @sapInformationBorderColor;
+	stroke: var(--sapInformationBorderColor);
 }
 
 .sapSuiteUiCommonsNetworkElementInformation.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLineArrow,
 .sapSuiteUiCommonsNetworkElementInformation .sapSuiteUiCommonsNetworkLineArrow,
 .sapSuiteUiCommonsNetworkElementInformation .sapSuiteUiCommonsNetworkLineNipple {
-	stroke: @sapInformationBorderColor;
-	fill: @sapInformationBorderColor;
+	stroke: var(--sapInformationBorderColor);
+	fill: var(--sapInformationBorderColor);
 }
 
-
 /* Line style */
 .sapSuiteUiCommonsNetworkDashedLine {
 	stroke-dasharray: 5, 5
@@ -121,28 +124,31 @@
 .sapSuiteUiCommonsNetworkDottedLine {
 	stroke-dasharray: 2, 2
 }
+
 .sapSuiteUiCommonsNetworkLine.sapSuiteUiCommonsNetworkElementFocus {
+
 	.sapSuiteUiCommonsNetworkLinePath{
-		stroke: @sapContent_DragAndDropActiveColor;
+		stroke: var(--sapContent_DragAndDropActiveColor);
 	}
+
 	.sapSuiteUiCommonsNetworkLineArrow {
-		stroke: @sapContent_DragAndDropActiveColor;
-		fill: @sapContent_DragAndDropActiveColor;
+		stroke: var(--sapContent_DragAndDropActiveColor);
+		fill: var(--sapContent_DragAndDropActiveColor);
 	}
 }
 
 .sapSuiteUiCommonsNetworkLineFocus {
-	stroke: @sapContent_FocusColor;
+	stroke: var(--sapContent_FocusColor);
 	stroke-width: 2px;
 	stroke-dasharray: 0, 0;
-  	stroke-linecap: round;
+	stroke-linecap: round;
 	fill: none;
 	pointer-events: none;
 	display: none;
 }
 
 .sapSuiteUiCommonsNetworkGraph.sapSuiteUiCommonsNetworkGraphLayered.sapSuiteUiCommonsNetworkGraphCrispEdges .sapSuiteUiCommonsNetworkGraphSvg path.sapSuiteUiCommonsNetworkLineFocus {
-  	shape-rendering: geometricprecision;
+	shape-rendering: geometricprecision;
 }
 
 .sapSuiteUiCommonsNetworkElementFocus .sapSuiteUiCommonsNetworkLineFocus {
@@ -155,18 +161,18 @@
 }
 
 .sapSuiteUiCommonsNetworkGraphLineTooltip {
-	background-color: @sapContent_ForegroundColor;
+	background-color: var(--sapContent_ForegroundColor);
 	align-self: flex-start;
 	padding: 8px;
-	color: @sapTextColor;
+	color: var(--sapTextColor);
 	margin-right: 10px;
 	border-radius: 5px;
-	border: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiContentDragAndDropActiveColor;
+	border: var(--sapElement_BorderWidth) var(--sapContent_FocusStyle) var(--sapContent_DragAndDropActiveColor);
 	position: relative;
 }
 
 .sapSuiteUiCommonsNetworkGraphLineTooltipArrow {
-	font-family:@sapUiContentIconFontFamily;
+	font-family:var(--sapContent_IconFontFamily);
 	margin-left: 8px;
 	vertical-align: middle;
 	font-size: @sapMFontMediumSize;
@@ -185,18 +191,15 @@
 	width: 300px;
 	height: 300px;
 	border-radius: 50%;
-
 	display: none;
-
 	background: white;
 }
 
-
 .sapSuiteUiCommonsNetworkGraphDivInnerCloned {
 	position: absolute !important;
 	top: 0 !important;;
 	z-index: -1 !important;;
-	border: @sapUiFieldBorderStyle !important;
+	border: var(--sapField_BorderStyle) !important;
 }
 
 .sapSuiteUiCommonsNetworkGraphTooltips {
@@ -211,9 +214,9 @@
 	left: -9px;
 	width: 0;
 	height: 0;
-	border-top: 10px @sapUiContentFocusStyle @sapUiButtonLiteBorderColor;
-	border-bottom: 10px @sapUiContentFocusStyle @sapUiButtonLiteBorderColor;
-	border-right:9px @sapUiContentFocusStyle @sapUiContentDragAndDropActiveColor;
+	border-top: 10px var(--sapContent_FocusStyle) var(--sapButton_Lite_BorderColor);
+	border-bottom: 10px var(--sapContent_FocusStyle) var(--sapButton_Lite_BorderColor);
+	border-right:9px var(--sapContent_FocusStyle) var(--sapContent_DragAndDropActiveColor);
 }
 
 .sapSuiteUiCommonsNetworkGraphTooltipRightArrow {
@@ -221,9 +224,9 @@
 	width: 0;
 	right: -9px;
 	height: 0;
-	border-top: 10px @sapUiContentFocusStyle @sapUiButtonLiteBorderColor;
-	border-bottom: 10px @sapUiContentFocusStyle @sapUiButtonLiteBorderColor;
-	border-left: 9px @sapUiContentFocusStyle @sapUiContentDragAndDropActiveColor;
+	border-top: 10px var(--sapContent_FocusStyle) var(--sapButton_Lite_BorderColor);
+	border-bottom: 10px var(--sapContent_FocusStyle) var(--sapButton_Lite_BorderColor);
+	border-left: 9px var(--sapContent_FocusStyle) var(--sapContent_DragAndDropActiveColor);
 }
 
 .sapSuiteUiCommonsNetworkGraphTooltipBottomArrow {
@@ -231,9 +234,9 @@
 	bottom: -9px;
 	width: 0;
 	height: 0;
-	border-left: 10px @sapUiContentFocusStyle @sapUiButtonLiteBorderColor;
-	border-right: 10px @sapUiContentFocusStyle @sapUiButtonLiteBorderColor;
-	border-top: 9px solid @sapUiContentDragAndDropActiveColor;
+	border-left: 10px var(--sapContent_FocusStyle) var(--sapButton_Lite_BorderColor);
+	border-right: 10px var(--sapContent_FocusStyle) var(--sapButton_Lite_BorderColor);
+	border-top: 9px solid var(--sapContent_DragAndDropActiveColor);
 }
 
 .sapSuiteUiCommonsNetworkGraphTooltipTopArrow {
@@ -241,9 +244,9 @@
 	top: -9px;
 	width: 0;
 	height: 0;
-	border-left: 10px @sapUiContentFocusStyle @sapUiButtonLiteBorderColor;
-	border-right: 10px @sapUiContentFocusStyle @sapUiButtonLiteBorderColor;
-	border-bottom: 9px @sapUiContentFocusStyle @sapUiContentDragAndDropActiveColor;
+	border-left: 10px var(--sapContent_FocusStyle) var(--sapButton_Lite_BorderColor);
+	border-right: 10px var(--sapContent_FocusStyle) var(--sapButton_Lite_BorderColor);
+	border-bottom: 9px var(--sapContent_FocusStyle) var(--sapContent_DragAndDropActiveColor);
 }
 
 .sapSuiteUiCommonsNetworkGraphLineTooltipDualArrow {
@@ -256,9 +259,9 @@
 
 .sapSuiteUiCommonsNetworkLineText {
 	font-size: 12px;
-	font-family: @sapUiFontFamily;
-	fill: @sapTextColor;
-	text-shadow: @sapContent_TextShadow;
+	font-family: var(--sapFontFamily);
+	fill: var(--sapTextColor);
+	text-shadow: var(--sapContent_TextShadow);
 	pointer-events: all;
 	text-anchor: middle;
 	dominant-baseline: central;
@@ -269,21 +272,21 @@
 }
 
 .sapSuiteUiCommonsNetworkLineTextBoxBackground {
-	fill: @sapNeutralBackground;
-	stroke: @sapNeutralBorderColor;
+	fill: var(--sapNeutralBackground);
+	stroke: var(--sapNeutralBorderColor);
 	stroke-width: 1;
 	pointer-events: all;
 }
 
 .sapSuiteUiCommonsNetworkLineTexts .sapSuiteUiCommonsNetworkElementFocus .sapSuiteUiCommonsNetworkLineTextBoxBackground {
-	stroke: @sapContent_FocusColor !important;
+	stroke: var(--sapContent_FocusColor) !important;
 	stroke-width: 2;
 }
 
 .sapSuiteUiCommonsNetworkLineTexts .sapSuiteUiCommonsNetworkElementFocus .sapSuiteUiCommonsNetworkLineText {
-    font-weight: bold;
+	font-weight: bold;
 }
 
 .sapSuiteUiCommonsNetworkLineTexts .sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkLineText {
-    font-weight: bold;
+	font-weight: bold;
 }

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

@@ -895,6 +895,9 @@
 // auto-create border-color class with all different semantic colors
 .sapSuiteBorderSemanticColor(borderSemanticColor);
 
+// auto-create outline-color class with all different semantic colors
+.sapSuiteOutlineSemanticColor(outlineSemanticColor);
+
 // auto-create border-color class with all different semantic colors
 .sapSuiteStrokeSemanticColor(strokeSemanticColor);