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

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

@@ -1,6 +1,7 @@
-/* ============================================= */
-/* CSS for control sap.suite.ui.commons/UnifiedThingInspector.control */
-/* ============================================= */
+/* =========================================================== */
+/* CSS for control sap.suite.ui.commons/UnifiedThingInspector  */
+/* Base theme                                                  */
+/* =========================================================== */
 
 .sapSuiteUti {
 	margin: 0 auto;
@@ -24,16 +25,16 @@
 
 /* sap.m.Page header restyling */
 /* removes blue line */
-.sap-desktop .sapSuiteUti .sapMBar.sapMPageHeader:before {
+.sap-desktop .sapSuiteUti .sapMBar.sapMPageHeader::before {
 	display: none;
 }
 
-/* changes header buttons style for desktop*/
+/* changes header buttons style for desktop */
 .sap-desktop .sapSuiteUti .sapMBar.sapMPageHeader .sapMBtn {
 	border-image: none;
 }
 
-/* Internal Header object styles*/
+/* Internal Header object styles */
 .sapSuiteUtiHeader {
 	position: relative;
 	height: 64px;
@@ -67,15 +68,17 @@
 	left: 40px;
 }
 
-/* End of internal Header object styles*/
+/* End of internal Header object styles */
 
 @media screen and (min-width:30px) and (max-width:1024px) {
+
 	.sapSuiteUtiKpiBox .sapMScrollContScroll {
 		float: left;
 	}
 }
 
 @media screen and (min-width:1024px) {
+
 	.sapSuiteUtiKpiBox.sapSuiteUtiKpiLT3 .sapMScrollContScroll {
 		clear: both;
 		float: right;
@@ -86,7 +89,7 @@
 	border-style: solid;
 	border-width: 1px;
 	box-sizing: border-box;
-	border-color: @sapUiGroupContentBorderColor;
+	border-color: var(--sapGroup_ContentBorderColor);
 }
 
 .sapSuiteUtiKpiBox .sapSuiteKTile {
@@ -107,4 +110,4 @@
 
 .sapSuiteUtiScThree .sapSuiteKTile {
 	width: 33.33%;
-}
+}

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

@@ -1,6 +1,7 @@
-/* ============================================= */
-/* CSS for control sap.suite.ui.commons/VerticalNavigationBar.control */
-/* ============================================= */
+/* =========================================================== */
+/* CSS for control sap.suite.ui.commons/VerticalNavigationBar  */
+/* Base theme                                                  */
+/* =========================================================== */
 
 @_sap_suite_ui_commons_VerticalNavigationBar_BgRGBA: rgba(255, 255, 255, .85);
 @_sap_suite_ui_commons_VerticalNavigationBar_BorderColor: #848484;
@@ -24,13 +25,13 @@
 }
 
 .sapSuiteTvNavBarItem.sapUiUx3NavBarItemSel {
-	background-color: @sapHighlightColor;
+	background-color: var(--sapHighlightColor);
 	color: @sapUiTextInverted;
 	font: bold 14px arial;
 }
 
 .sapSuiteTvNavBarItemLink:hover, .sapSuiteTvNavBarItemLink:focus {
-	background-color: @sapHighlightColor;
+	background-color: var(--sapHighlightColor);
 	color: @sapUiTextInverted;
 }
 
@@ -51,7 +52,6 @@
 	text-decoration: none;
 	text-transform: none;
 	box-sizing: border-box;
-	-moz-box-sizing: border-box;
 }
 
 .sapSuiteTvNavBarItem.sapUiUx3NavBarItemSel>a {
@@ -73,11 +73,6 @@
 	text-overflow: ellipsis;
 	max-width: 100%;
 	box-sizing: border-box;
-	-moz-box-sizing: border-box;
-}
-
-.sapSuiteTvNavBarItemQty {
-
 }
 
 .sapSuiteTvNavBarItemTltp.sapUiRtt {
@@ -90,11 +85,11 @@
 }
 
 .sapSuiteTvNavBarItemTltp .sapUiRttContentContainer {
-	padding: 0px;
+	padding: 0;
 }
 
 .sapSuiteTvNavBarItemTltp .sapUiRttContent {
-	min-width: 0px;
-	padding: 0px 5px 0px 5px;
+	min-width: 0;
+	padding: 0 5px 0 5px;
 	color: @sapUiLightText;
-}
+}

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

@@ -1,6 +1,7 @@
-/* ========================================================= */
-/* CSS for control sap.suite.ui.commons/ViewRepeater.control */
-/* ========================================================= */
+/* ================================================== */
+/* CSS for control sap.suite.ui.commons/ViewRepeater  */
+/* Base theme                                         */
+/* ================================================== */
 
 .suiteUiVrViewSwHolder {
 	background-color: @sapUiLightBG;
@@ -27,7 +28,7 @@
 
 .suiteUiVr.suiteUiVrResp .sapUiRrFtr {
 	position: absolute;
-	bottom: 0px;
+	bottom: 0;
 }
 
 .suiteUiVr .sapUiRrBody ul {
@@ -40,17 +41,15 @@
 	margin: 0;
 	position: relative;
 	box-sizing: border-box;
-	-moz-box-sizing: border-box;
 }
 
-.suiteUiVrViewSw>.sapUiSegmentedButton>span:first-of-type>.sapUiBtnS {
+.suiteUiVrViewSw > .sapUiSegmentedButton > span:first-of-type > .sapUiBtnS {
 	border-radius: 0;
-	-moz-border-radius: 0;
 }
 
-.suiteUiVr .sapUiRrDesignTransparent>.sapUiRrFtr {
+.suiteUiVr .sapUiRrDesignTransparent > .sapUiRrFtr {
 	width: auto;
 	border: 1px solid @sapUiMediumBorder;
 	height: 26px;
 	margin-top: 3px;
-}
+}

package/src/sap/suite/ui/commons/themes/base/library.source.less

@@ -19,7 +19,6 @@
 @import "ChartTile.less";
 @import "CollaborationPopover.less";
 @import "DateRangeScroller.less";
-@import "DateRangeSlider.less";
 @import "DateRangeSliderInternal.less";
 @import "FacetOverview.less";
 @import "FeedItemHeader.less";
@@ -36,7 +35,6 @@
 @import "LinkActionSheet.less";
 @import "MicroProcessFlow.less";
 @import "MonitoringContent.less";
-@import "MonitoringTile.less";
 @import "NetworkGraph.less";
 @import "NetworkGroup.less";
 @import "NetworkLine.less";

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

@@ -1,7 +1,13 @@
+/* ====================================================== */
+/* CSS for control sap.suite.ui.commons/MicroProcessFlow  */
+/* Quartz Light theme                                     */
+/* ====================================================== */
+
 .sapSuiteUiCommonsMicroProcessFlowItemInformation:hover {
-	background-color: @sapButton_Hover_Background;
-	border-color: @sapInformationBorderColor;
+	background-color: var(--sapButton_Hover_Background);
+	border-color: var(--sapInformationBorderColor);
+
 	.sapSuiteUiCommonsMicroProcessFlowItemIcon {
-		color: @sapButton_Hover_TextColor;
+		color: var(--sapButton_Hover_TextColor);
 	}
 }

package/src/sap/suite/ui/commons/themes/sap_fiori_3/ProcessFlowConnection.less

@@ -1,7 +1,7 @@
-/* ====================================================================== */
-/* CSS for sap.suite.ui.commons/ProcessFlowConnection.control             */
-/* Belize Theme                                                           */
-/* ====================================================================== */
+/* =========================================================== */
+/* CSS for control sap.suite.ui.commons/ProcessFlowConnection  */
+/* Quartz Light theme                                          */
+/* =========================================================== */
 
 @_sap_suite_ui_commons_ProcessFlowConnection_StateRegular: darken(@sapUiContentForegroundBorderColor, 15);
 @_sap_suite_ui_commons_ProcessFlowConnection_StateSelected: darken(@sapUiContentForegroundBorderColor, 30);
@@ -10,24 +10,31 @@
 .sapSuiteUiCommonsBorderLeftStateRegular {
 	border-left-color: @_sap_suite_ui_commons_ProcessFlowConnection_StateRegular;
 }
+
 .sapSuiteUiCommonsBorderLeftStateHighlighted {
-	border-left-color: @sapUiHighlight;
+	border-left-color: var(--sapHighlightColor);
 }
+
 .sapSuiteUiCommonsBorderLeftStateDimmed {
 	border-left-color: @_sap_suite_ui_commons_ProcessFlowConnection_StateDimmed;
 }
+
 .sapSuiteUiCommonsBorderLeftStateSelected {
 	border-left-color: @_sap_suite_ui_commons_ProcessFlowConnection_StateSelected;
 }
+
 .sapSuiteUiCommonsBorderBottomStateRegular {
 	border-bottom-color: @_sap_suite_ui_commons_ProcessFlowConnection_StateRegular;
 }
+
 .sapSuiteUiCommonsBorderBottomStateHighlighted {
-	border-bottom-color: @sapUiHighlight;
+	border-bottom-color: var(--sapHighlightColor);
 }
+
 .sapSuiteUiCommonsBorderBottomStateDimmed {
 	border-bottom-color: @_sap_suite_ui_commons_ProcessFlowConnection_StateDimmed;
 }
+
 .sapSuiteUiCommonsBorderBottomStateSelected {
 	border-bottom-color: @_sap_suite_ui_commons_ProcessFlowConnection_StateSelected;
-}
+}

package/src/sap/suite/ui/commons/themes/sap_fiori_3/ProcessFlowConnectionLabel.less

@@ -1,14 +1,14 @@
-/* ==================================================================== */
-/* CSS for control sap.suite.ui.commons/ProcessFlowConnectionLabel      */
-/* Belize Theme                                                         */
-/* ==================================================================== */
+/* ================================================================ */
+/* CSS for control sap.suite.ui.commons/ProcessFlowConnectionLabel  */
+/* Quartz Light theme                                               */
+/* ================================================================ */
 
 @_sap_suite_ui_commons_ProcessFlowConnectionLabel_BorderDimmed: lighten(@sapUiButtonBorderColor, 15);
 
 /* Regular */
 .sapSuiteUiCommonsProcessFlowConnectionLabel.sapMBtn > .sapMBtnInner {
-	background-color: @sapUiButtonBackground;
-	border-color: @sapUiButtonBorderColor;
+	background-color: var(--sapButton_Background);
+	border-color: var(--sapButton_BorderColor);
 	text-shadow: @sapUiShadowText;
 }
 
@@ -18,7 +18,6 @@
 	background-image: none;
 	border-color: darken(@sapUiButtonBorderColor, 5);
 	box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
-	-webkit-box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
 }
 
 /* Disabled */
@@ -29,42 +28,48 @@
 /* Dimmed */
 .sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelDimmed:not(.sapMBtnDisabled) > .sapMBtnInner:not(.sapSuiteUiCommonsProcessFlowLabelHover) {
 	background-image: none;
-	background-color: @sapUiButtonBackground;
+	background-color: var(--sapButton_Background);
 	border-color: @_sap_suite_ui_commons_ProcessFlowConnectionLabel_BorderDimmed;
 }
 
 /* Hover */
 .sapSuiteUiCommonsProcessFlowConnectionLabel:hover:not(.sapMBtnDisabled) > .sapMBtnInner:not(:active) {
-	background-color: @sapUiButtonHoverBackground;
-	border-color: @sapUiButtonHoverBorderColor;
+	background-color: var(--sapButton_Hover_Background);
+	border-color: var(--sapButton_Hover_BorderColor);
 }
 
 /* Configure inner text element of Label for specific state. */
 .sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateNegative > .sapMBtnInner {
-	color: @sapUiNegativeText;
+	color: var(--sapNegativeTextColor);
 }
+
 .sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateCritical > .sapMBtnInner {
-	color: @sapUiCriticalText;
+	color: var(--sapCriticalTextColor);
 }
+
 .sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStatePositive > .sapMBtnInner {
-	color: @sapUiPositiveText;
+	color: var(--sapPositiveTextColor);
 }
+
 .sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateNeutral > .sapMBtnInner {
-	color: @sapUiButtonTextColor;
+	color: var(--sapButton_TextColor);
 }
 
 /* Configure inner icon element of Label for specific state. */
 .sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateNegative > .sapMBtnInner > .sapMBtnIcon {
-	color: @sapUiNegativeElement;
+	color: var(--sapNegativeElementColor);
 }
+
 .sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateCritical > .sapMBtnInner > .sapMBtnIcon {
-	color: @sapUiCriticalElement;
+	color: var(--sapCriticalElementColor);
 }
+
 .sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStatePositive > .sapMBtnInner > .sapMBtnIcon {
-	color: @sapUiPositiveElement;
+	color: var(--sapPositiveElementColor);
 }
+
 .sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateNeutral > .sapMBtnInner > .sapMBtnIcon {
-	color: @sapUiNeutralElement;
+	color: var(--sapNeutralElementColor);
 }
 
 /* handle the keyboard press event for active state (both text and icon) */
@@ -72,23 +77,22 @@
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateNeutral > .sapMBtnInner.sapMBtnActive,
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStatePositive > .sapMBtnInner.sapMBtnActive,
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateNegative > .sapMBtnInner.sapMBtnActive {
-	color: @sapUiButtonActiveTextColor;
-	background-color: @sapUiButtonActiveBackground;
-	border-color: @sapUiButtonActiveBorderColor;
+	color: var(--sapButton_Active_TextColor);
+	background-color: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
 	box-shadow: none;
-	-webkit-box-shadow: none;
 	text-shadow: none;
 	outline-style: none;
 }
+
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateNegative > .sapMBtnInner.sapMBtnActive > .sapMBtnIcon,
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateCritical > .sapMBtnInner.sapMBtnActive > .sapMBtnIcon,
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStatePositive > .sapMBtnInner.sapMBtnActive > .sapMBtnIcon,
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateNeutral > .sapMBtnInner.sapMBtnActive > .sapMBtnIcon {
-	color: @sapUiButtonActiveTextColor;
-	background-color: @sapUiButtonActiveBackground;
-	border-color: @sapUiButtonActiveBorderColor;
+	color: var(--sapButton_Active_TextColor);
+	background-color: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
 	box-shadow: none;
-	-webkit-box-shadow: none;
 	text-shadow: none;
 	outline-style: none;
 }
@@ -98,23 +102,22 @@
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateNeutral > .sapMBtnInner.sapSuiteUiCommonsProcessFlowLabelActive,
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStatePositive > .sapMBtnInner.sapSuiteUiCommonsProcessFlowLabelActive,
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateNegative > .sapMBtnInner.sapSuiteUiCommonsProcessFlowLabelActive {
-	color: @sapUiButtonActiveTextColor;
-	background-color: @sapUiButtonActiveBackground;
-	border-color: @sapUiButtonActiveBorderColor;
+	color: var(--sapButton_Active_TextColor);
+	background-color: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
 	box-shadow: none;
-	-webkit-box-shadow: none;
 	text-shadow: none;
 	outline-style: none;
 }
+
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateNegative > .sapMBtnInner.sapSuiteUiCommonsProcessFlowLabelActive > .sapMBtnIcon,
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateCritical > .sapMBtnInner.sapSuiteUiCommonsProcessFlowLabelActive > .sapMBtnIcon,
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStatePositive > .sapMBtnInner.sapSuiteUiCommonsProcessFlowLabelActive > .sapMBtnIcon,
 :not(.sapMBtnDisabled).sapSuiteUiCommonsProcessFlowConnectionLabel.sapSuiteUiCommonsLabelStateNeutral > .sapMBtnInner.sapSuiteUiCommonsProcessFlowLabelActive > .sapMBtnIcon {
-	color: @sapUiButtonActiveTextColor;
-	background-color: @sapUiButtonActiveBackground;
-	border-color: @sapUiButtonActiveBorderColor;
+	color: var(--sapButton_Active_TextColor);
+	background-color: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
 	box-shadow: none;
-	-webkit-box-shadow: none;
 	text-shadow: none;
 	outline-style: none;
-}
+}

package/src/sap/suite/ui/commons/themes/sap_fiori_3/ProcessFlowLaneHeader.less

@@ -1,7 +1,7 @@
-/* ================================================================== */
-/* CSS for sap.suite.ui.commons/ProcessFlowLaneHeader.control         */
-/* Belize Theme                                                       */
-/* ================================================================== */
+/* =========================================================== */
+/* CSS for control sap.suite.ui.commons/ProcessFlowLaneHeader  */
+/* Quartz Light theme                                          */
+/* =========================================================== */
 
 @_sap_suite_ui_commons_ProcessFlowLaneHeader_PositiveColor: lighten(@sapUiPositiveElement, 6);
 @_sap_suite_ui_commons_ProcessFlowLaneHeader_NegativeColor: lighten(@sapUiNegativeElement, 6);
@@ -10,92 +10,91 @@
 
 .suiteUiProcessFlowLaneHeaderDonutSvg {
 	-webkit-tap-highlight-color: transparent;
-	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
 }
 
 .suiteUiProcessFlowLaneHeaderIconContainer {
 	-webkit-tap-highlight-color: transparent;
-	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
 }
 
 .suiteUiProcessFlowLaneHeaderStartEndSymbolContainer {
 	border: none;
 	-webkit-tap-highlight-color: transparent;
-	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
 }
 
 .suiteUiProcessFlowLaneHeaderProcessSymbolContainer {
 	border: none;
 	-webkit-tap-highlight-color: transparent;
-	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
 }
 
 .suiteUiProcessFlowLaneHeaderProcessSymbol {
 	background-color: transparent;
 	text-shadow: @sapUiShadowText;
-	-webkit-text-shadow: @sapUiShadowText;
 	-webkit-tap-highlight-color: transparent;
-	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
 }
 
 .suiteUiProcessFlowLaneHeaderProcessSymbolIcon,
 .suiteUiProcessFlowLaneHeaderProcessSymbolIcon > .sapUiIcon,
-.suiteUiProcessFlowLaneHeaderProcessSymbolIcon > .sapUiIcon:before {
+.suiteUiProcessFlowLaneHeaderProcessSymbolIcon > .sapUiIcon::before {
 	-webkit-tap-highlight-color: transparent;
-	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
 }
 
 .suiteUiProcessFlowLaneHeaderNoSelection {
 	-webkit-tap-highlight-color: transparent;
-	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
 }
 
 .suiteUiCommonsProcessFlowHeaderIconFill {
-	fill: @sapGroup_ContentBackground;
-	stroke: @sapContent_ForegroundBorderColor;
+	fill: var(--sapGroup_ContentBackground);
+	stroke: var(--sapContent_ForegroundBorderColor);
 }
 
 .suiteUiCommonsProcessFlowHeaderPositiveColor {
-	fill: @sapChart_Good;
+	fill: var(--sapChart_Good);
 }
 
 .suiteUiCommonsProcessFlowHeaderNegativeColor {
-	fill: @sapChart_Bad;
+	fill: var(--sapChart_Bad);
 }
 
 .suiteUiCommonsProcessFlowHeaderNeutralColor {
-	fill: @sapChart_Neutral;
+	fill: var(--sapChart_Neutral);
 }
 
 .suiteUiCommonsProcessFlowHeaderCriticalColor {
-	fill: @sapChart_Critical;
+	fill: var(--sapChart_Critical);
 }
 
 .suiteUiCommonsProcessFlowHeaderPlannedColor {
-	fill: @sapUiGroupContentBackground;
+	fill: var(--sapGroup_ContentBackground);
 }
 
 .suiteUiCommonsProcessFlowHeaderIconFill.suiteUiCommonsProcessFlowHeaderPositiveColor {
-	stroke: @sapChart_Good;
-	fill: @sapGroup_ContentBackground;
+	stroke: var(--sapChart_Good);
+	fill: var(--sapGroup_ContentBackground);
 }
 
 .suiteUiCommonsProcessFlowHeaderIconFill.suiteUiCommonsProcessFlowHeaderNegativeColor {
-	stroke: @sapChart_Bad;
-	fill: @sapGroup_ContentBackground;
+	stroke: var(--sapChart_Bad);
+	fill: var(--sapGroup_ContentBackground);
 }
 
 .suiteUiCommonsProcessFlowHeaderIconFill.suiteUiCommonsProcessFlowHeaderNeutralColor {
-	stroke: @sapChart_Neutral;
-	fill: @sapGroup_ContentBackground;
+	stroke: var(--sapChart_Neutral);
+	fill: var(--sapGroup_ContentBackground);
 }
 
 .suiteUiCommonsProcessFlowHeaderIconFill.suiteUiCommonsProcessFlowHeaderCriticalColor {
-	stroke: @sapChart_Critical;
-	fill: @sapGroup_ContentBackground;
+	stroke: var(--sapChart_Critical);
+	fill: var(--sapGroup_ContentBackground);
 }
 
 .suiteUiCommonsProcessFlowHeaderIconFill.suiteUiCommonsProcessFlowHeaderPlannedColor {
-	stroke: @sapUiGroupContentBackground;
-	fill: @sapUiGroupContentBackground;
+	stroke: var(--sapGroup_ContentBackground);
+	fill: var(--sapGroup_ContentBackground);
 }