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

package/src/sap/suite/ui/commons/themes/sap_horizon/ProcessFlowNode.less

@@ -1,22 +1,20 @@
-/* ============================================= */
-/* CSS for sap.suite.ui.commons/ProcessFlowNode  */
-/* Horizon Theme                                 */
-/* ============================================= */
+/* ===================================================== */
+/* CSS for control sap.suite.ui.commons/ProcessFlowNode  */
+/* Morning Horizon theme                                 */
+/* ===================================================== */
 
-@_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular: @sapUiContentForegroundBorderColor;
-@_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular: @sapUiGroupContentBackground;
+@_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular: var(--sapContent_ForegroundBorderColor);
+@_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular: var(--sapGroup_ContentBackground);
 @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned: lighten(@sapUiContentForegroundBorderColor, 8);
-@_sap_suite_ui_commons_ProcessFlowNode_TextColorPlanned: @sapUiGroupTitleTextColor;
-@_sap_suite_ui_commons_ProcessFlowNode_BackgroundHighlighted: @sapTile_Background;
-@_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed: @sapTile_Background;
-@_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed: @sapGroup_ContentBorderColor;
+@_sap_suite_ui_commons_ProcessFlowNode_TextColorPlanned: var(--sapGroup_TitleTextColor);
+@_sap_suite_ui_commons_ProcessFlowNode_BackgroundHighlighted: var(--sapTile_Background);
+@_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed: var(--sapTile_Background);
+@_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed: var(--sapGroup_ContentBorderColor);
 @_sap_suite_ui_commons_ProcessFlowNode_TextColorDimmed: lighten(@sapTile_TextColor, 20);
 @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover: darken(@sapUiGroupContentBackground, 5);
-@_sap_suite_ui_commons_ProcessFlowNode_BackgroundFocused: @sapTile_Background;
-@_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocused: @sapLegendColor6;
-// @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocusedDimmed: lighten(@sapUiAccent6, 35);
-@_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocusedDimmed: @sapGroup_ContentBorderColor;
-
+@_sap_suite_ui_commons_ProcessFlowNode_BackgroundFocused: var(--sapTile_Background);
+@_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocused: var(--sapLegendColor6);
+@_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocusedDimmed: var(--sapGroup_ContentBorderColor);
 
 /* border styles */
 .sapSuiteUiCommonsProcessFlowNodeBorderStandard {
@@ -25,41 +23,43 @@
 	/* border color needs to be separated, otherwise border style for planned node is overwritten in belize_plus when color variable is loaded */
 	border-color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular;
 }
+
 .sapSuiteUiCommonsProcessFlowNode1BorderStyle {
 	border-right: none !important;
 	border-bottom: none !important;
 	border-top-left-radius: 1rem !important;
 }
+
 .sapSuiteUiCommonsProcessFlowNode1FoldedBorderStyle {
 	border-style: none;
-    border-bottom-right-radius: 0.5rem !important;
+	border-bottom-right-radius: 0.5rem !important;
 }
+
 .sapSuiteUiCommonsProcessFlowNode2BorderStyle {
 	border-left: none !important;
 	border-bottom: none !important;
 	border-top-right-radius: 1rem !important;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3BorderStyle {
 	border-top: none !important;
 	border-bottom-left-radius: 1rem !important;
-    border-bottom-right-radius: 1rem !important;
+	border-bottom-right-radius: 1rem !important;
 }
+
 /* ----- */
 /* node0 */
 /* ----- */
-/* shadow for highlighted*/
+/* shadow for highlighted */
 .sapSuiteUiCommonsShadowedDivFoldedCorner,
 .sapSuiteUiCommonsShadowedDivFoldedCornerSafari {
 	position: absolute;
 	border: none;
-	height: 0rem;
-	min-height: 0rem;
-	max-height: 0rem;
-	line-height: 0rem;
+	height: 0;
+	min-height: 0;
+	max-height: 0;
+	line-height: 0;
 	transform: rotate(-45deg);
-	-ms-transform: rotate(-45deg);
-	-moz-transform: rotate(-45deg);
-	-webkit-transform: rotate(-45deg);
 }
 
 .sapSuiteUiCommonsShadowedDivCommon {
@@ -69,19 +69,22 @@
 	-moz-box-sizing: border-box;
 	-webkit-box-sizing: border-box;
 }
-.sapSuiteUiCommonsProcessFlowNode2BorderStyle.sapSuiteUiCommonsProcessFlowNodeDisplayStateHighlighted  {
+
+.sapSuiteUiCommonsProcessFlowNode2BorderStyle.sapSuiteUiCommonsProcessFlowNodeDisplayStateHighlighted {
 	border-left: none !important;
 	border-bottom: none !important;
 	border-top-right-radius: 1rem !important;
-	box-shadow: 2px -2px 0.125rem 0px fade(@sapUiContentShadowColor, 30) !important;
+	box-shadow: 2px -2px 0.125rem 0 fade(@sapUiContentShadowColor, 30) !important;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3BorderStyle.sapSuiteUiCommonsProcessFlowNodeDisplayStateHighlighted{
 	border-top: none !important;
 	border-bottom-left-radius: 1rem !important;
-    border-bottom-right-radius: 1rem !important;
-	box-shadow: 2px 2px 0.125rem 0px fade(@sapUiContentShadowColor, 30), -2px 2px 0.125rem 0px fade(@sapUiContentShadowColor, 30) !important;
+	border-bottom-right-radius: 1rem !important;
+	box-shadow: 2px 2px 0.125rem 0 fade(@sapUiContentShadowColor, 30), -2px 2px 0.125rem 0 fade(@sapUiContentShadowColor, 30) !important;
 }
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel1 > .sapSuiteUiCommonsShadowedDivFoldedCorner  {
+
+.sapSuiteUiCommonsProcessFlowNode0ZoomLevel1 > .sapSuiteUiCommonsShadowedDivFoldedCorner {
 	left: -0.18125rem;
 	top: 0.45rem;
 	width: 1.2375rem;
@@ -89,7 +92,8 @@
 	max-width: 1.2375rem;
 	box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
 }
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel1 > .sapSuiteUiCommonsShadowedDivFoldedCornerSafari  {
+
+.sapSuiteUiCommonsProcessFlowNode0ZoomLevel1 > .sapSuiteUiCommonsShadowedDivFoldedCornerSafari {
 	left: -0.18125rem;
 	top: 0.5rem;
 	width: 1.25rem;
@@ -97,7 +101,8 @@
 	max-width: 1.25rem;
 	box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
 }
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel2 > .sapSuiteUiCommonsShadowedDivFoldedCorner  {
+
+.sapSuiteUiCommonsProcessFlowNode0ZoomLevel2 > .sapSuiteUiCommonsShadowedDivFoldedCorner {
 	left: -0.18125rem;
 	top: 0.45rem;
 	width: 1.2375rem;
@@ -105,7 +110,8 @@
 	max-width: 1.2375rem;
 	box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
 }
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel2 > .sapSuiteUiCommonsShadowedDivFoldedCornerSafari  {
+
+.sapSuiteUiCommonsProcessFlowNode0ZoomLevel2 > .sapSuiteUiCommonsShadowedDivFoldedCornerSafari {
 	left: -0.18125rem;
 	top: 0.5rem;
 	width: 1.25rem;
@@ -113,6 +119,7 @@
 	max-width: 1.25rem;
 	box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
 }
+
 .sapSuiteUiCommonsProcessFlowNode0ZoomLevel3 > .sapSuiteUiCommonsShadowedDivFoldedCorner {
 	left: -0.13125rem;
 	top: 0.325rem;
@@ -121,7 +128,8 @@
 	max-width: 0.89375rem;
 	box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
 }
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel3 > .sapSuiteUiCommonsShadowedDivFoldedCornerSafari  {
+
+.sapSuiteUiCommonsProcessFlowNode0ZoomLevel3 > .sapSuiteUiCommonsShadowedDivFoldedCornerSafari {
 	left: -0.125rem;
 	top: 0.375rem;
 	width: 0.9375rem;
@@ -129,6 +137,7 @@
 	max-width: 0.9375rem;
 	box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
 }
+
 .sapSuiteUiCommonsProcessFlowNode0ZoomLevel4 > .sapSuiteUiCommonsShadowedDivFoldedCorner {
 	left: -0.13125rem;
 	top: 0.325rem;
@@ -137,6 +146,7 @@
 	max-width: 0.89375rem;
 	box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
 }
+
 .sapSuiteUiCommonsProcessFlowNode0ZoomLevel4 > .sapSuiteUiCommonsShadowedDivFoldedCornerSafari {
 	left: -0.125rem;
 	top: 0.375rem;
@@ -145,160 +155,13 @@
 	max-width: 0.9375rem;
 	box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
 }
-/*.sapSuiteUiCommonsShadowedDivBorderTop,
-.sapSuiteUiCommonsShadowedDivFoldedCornerBorderTop {
-	top: 0rem;
-	height: 0rem;
-	min-height: 0rem;
-	max-height: 0rem;
-	line-height: 0rem;
-	box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
-}
-.sapSuiteUiCommonsShadowedDivBorderRight {
-	right: 0rem;
-	top: 0rem;
-	width: 0rem;
-	min-width: 0rem;
-	max-width: 0rem;
-	height: 100%;
-	min-height: 100%;
-	max-height: 100%;
-	line-height: 100%;
-	box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
-}
-.sapSuiteUiCommonsShadowedDivBorderBottom {
-	left: 0rem;
-	bottom: 0rem;
-	width: 100%;
-	min-width: 100%;
-	max-width: 100%;
-	height: 0rem;
-	min-height: 0rem;
-	max-height: 0rem;
-	line-height: 0rem;
-	box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
-}
-.sapSuiteUiCommonsShadowedDivBorderLeft,
-.sapSuiteUiCommonsShadowedDivFoldedCornerBorderLeft {
-	left: 0rem;
-	width: 0rem;
-	min-width: 0rem;
-	max-width: 0rem;
-	box-shadow: 0 0 0.125rem 1px fade(@sapUiContentShadowColor, 30);
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel1 > .sapSuiteUiCommonsShadowedDivBorderTop  {
-	left: 0rem;
-	width: 11rem;
-	min-width: 11rem;
-	max-width: 11rem;
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel1 > .sapSuiteUiCommonsShadowedDivFoldedCornerBorderTop  {
-	left: 1rem;
-	width: 10rem;
-	min-width: 10rem;
-	max-width: 10rem;
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel1 > .sapSuiteUiCommonsShadowedDivBorderLeft  {
-	top: 0rem;
-	height: 13.8125rem;
-	min-height: 13.8125rem;
-	max-height: 13.8125rem;
-	line-height: 13.8125rem;
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel1 > .sapSuiteUiCommonsShadowedDivFoldedCornerBorderLeft  {
-	top: 1rem;
-	height: 12.8125rem;
-	min-height: 12.8125rem;
-	max-height: 12.8125rem;
-	line-height: 12.8125rem;
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel2 > .sapSuiteUiCommonsShadowedDivBorderTop  {
-	left: 0rem;
-	width: 9rem;
-	min-width: 9rem;
-	max-width: 9rem;
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel2 > .sapSuiteUiCommonsShadowedDivFoldedCornerBorderTop  {
-	left: 1rem;
-	width: 8rem;
-	min-width: 8rem;
-	max-width: 8rem;
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel2 > .sapSuiteUiCommonsShadowedDivBorderLeft  {
-	top: 0rem;
-	height: 12.1875rem;
-	min-height: 12.1875rem;
-	max-height: 12.1875rem;
-	line-height: 12.1875rem;
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel2 > .sapSuiteUiCommonsShadowedDivFoldedCornerBorderLeft  {
-	top: 1rem;
-	height: 11.1875rem;
-	min-height: 11.1875rem;
-	max-height: 11.1875rem;
-	line-height: 11.1875rem;
-}
-
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel3 > .sapSuiteUiCommonsShadowedDivBorderTop  {
-	left: 0rem;
-	width: 6.5rem;
-	min-width: 6.5rem;
-	max-width: 6.5rem;
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel3 > .sapSuiteUiCommonsShadowedDivFoldedCornerBorderTop  {
-	left: 0.75rem;
-	width: 5.75rem;
-	min-width: 5.75rem;
-	max-width: 5.75rem;
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel3 > .sapSuiteUiCommonsShadowedDivBorderLeft  {
-	top: 0rem;
-	height: 8rem;
-	min-height: 8rem;
-	max-height: 8rem;
-	line-height: 8rem;
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel3 > .sapSuiteUiCommonsShadowedDivFoldedCornerBorderLeft  {
-	top: 0.75rem;
-	height: 7.25rem;
-	min-height: 7.25rem;
-	max-height: 7.25rem;
-	line-height: 7.25rem;
-}
-
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel4 > .sapSuiteUiCommonsShadowedDivBorderTop  {
-	left: 0rem;
-	width: 3rem;
-	min-width: 3rem;
-	max-width: 3rem;
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel4 > .sapSuiteUiCommonsShadowedDivFoldedCornerBorderTop  {
-	left: 0.75rem;
-	width: 2.25rem;
-	min-width: 2.25rem;
-	max-width: 2.25rem;
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel4 > .sapSuiteUiCommonsShadowedDivBorderLeft  {
-	top: 0rem;
-	height: 3.75rem;
-	min-height: 3.75rem;
-	max-height: 3.75rem;
-	line-height: 3.75rem;
-}
-.sapSuiteUiCommonsProcessFlowNode0ZoomLevel4 > .sapSuiteUiCommonsShadowedDivFoldedCornerBorderLeft  {
-	top: 0.75rem;
-	height: 3rem;
-	min-height: 3rem;
-	max-height: 3rem;
-	line-height: 3rem;
-}
-*/
+
 /* Title */
 .sapSuiteUiCommonsProcessFlowNode3Title > .sapSuiteUiCommonsProcessFlowNodeActive,
 .sapSuiteUiCommonsProcessFlowNode3Title > .sapMText.sapSuiteUiCommonsProcessFlowNodeActive,
 .sapSuiteUiCommonsProcessFlowNode3Title > .sapMTextMaxLine.sapSuiteUiCommonsProcessFlowNodeActive,
 .sapSuiteUiCommonsProcessFlowNode3Title > .sapMTextMaxWidth.sapSuiteUiCommonsProcessFlowNodeActive {
-	color: @sapUiContentContrastTextColor;
+	color: var(--sapContent_ContrastTextColor);
 }
 
 .sapSuiteUiCommonsProcessFlowNodeDisplayStateDimmed > .sapSuiteUiCommonsProcessFlowNode3Title > .sapSuiteUiCommonsProcessFlowNode3Title > .sapMText,
@@ -323,43 +186,54 @@
 	background-color: @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular;
 	border-color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeDisplayStateRegular.sapSuiteUiCommonsProcessFlowNodeStatePlanned:not(.sapSuiteUiCommonsProcessFlowNodeDisplayStateFocused) {
 	border-color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeDisplayStateHighlighted:not(.sapSuiteUiCommonsProcessFlowNodeDisplayStateFocused) {
 	background-color: @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHighlighted;
-	border-color: @sapContent_DragAndDropActiveColor;
+	border-color: var(--sapContent_DragAndDropActiveColor);
 }
+
 .sapSuiteUiCommonsProcessFlowNodeDisplayStateDimmed:not(.sapSuiteUiCommonsProcessFlowNodeDisplayStateFocused) {
 	background-color: @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed;
 	border-color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeDisplayStateDimmed.sapSuiteUiCommonsProcessFlowNodeStatePlanned:not(.sapSuiteUiCommonsProcessFlowNodeDisplayStateFocused) {
 	border-color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed;
 }
-/* The focus div is an overlay of button which should not have background color*/
+
+/* The focus div is an overlay of button which should not have background color */
 .sapSuiteUiCommonsProcessFlowNodeHover:not(.sapMBtnFocusDiv) {
 	background-color: @sapTile_Hover_Background !important;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeDisplayStateDimmed.sapSuiteUiCommonsProcessFlowNodeStatePlanned.sapSuiteUiCommonsProcessFlowNodeHover {
 	border-color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeDisplayStateDimmed.sapSuiteUiCommonsProcessFlowNodeHover {
 	border-color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular;
 }
-/* The focus div is an overlay of button which should not have background color*/
+
+/* The focus div is an overlay of button which should not have background color */
 .sapSuiteUiCommonsProcessFlowNodeActive:not(.sapMBtnFocusDiv) {
-	border-color: @sapUiHighlight !important;
-	background-color: @sapUiHighlight !important;
-	color: @sapUiContentContrastTextColor !important;
+	border-color: var(--sapHighlightColor) !important;
+	background-color: var(--sapHighlightColor) !important;
+	color: var(--sapContent_ContrastTextColor) !important;
 }
+
 .sapSuiteUiCommonsProcessFlowNode0.sapSuiteUiCommonsProcessFlowNodeActive:not(.sapMBtnFocusDiv){
 	border-radius: 1rem !important;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeDisplayStateFocused {
 	background-color: @_sap_suite_ui_commons_ProcessFlowNode_BackgroundFocused;
 	border-color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocused;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeDisplayStateDimmed.sapSuiteUiCommonsProcessFlowNodeDisplayStateFocused {
 	border-color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocusedDimmed;
 }
@@ -369,33 +243,41 @@
 	background-color: transparent !important;
 }
 
-/* node corner states  - dog ear*/
+/* node corner states - dog ear */
 .sapSuiteUiCommonsProcessFlowFoldedCornerDisplayStateRegular {
 	color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular;
 }
+
 .sapSuiteUiCommonsProcessFlowFoldedCornerDisplayStateRegular.sapSuiteUiCommonsProcessFlowFoldedCornerPlanned {
 	color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned;
 }
+
 .sapSuiteUiCommonsProcessFlowFoldedCornerDisplayStateHighlighted {
-	color: @sapUiHighlight;
+	color: var(--sapHighlightColor);
 }
+
 .sapSuiteUiCommonsProcessFlowFoldedCornerDisplayStateDimmed {
 	color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed;
 }
+
 .sapSuiteUiCommonsProcessFlowFoldedCornerDisplayStateDimmed.sapSuiteUiCommonsProcessFlowFoldedCornerPlanned {
 	color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed;
 }
+
 .sapSuiteUiCommonsProcessFlowFoldedCornerNodeActive {
-	color: @sapUiContentContrastIconColor;
-	border-color: @sapUiContentContrastIconColor;
+	color: var(--sapContent_ContrastIconColor);
+	border-color: var(--sapContent_ContrastIconColor);
 }
+
 .sapSuiteUiCommonsProcessFlowFoldedCornerNode1.sapSuiteUiCommonsProcessFlowFoldedCornerNodeActive:not(.sapMBtnFocusDiv){
-	box-shadow: 5px 5px 0.125rem 1px @sapContent_DragAndDropActiveColor;
+	box-shadow: 5px 5px 0.125rem 1px var(--sapContent_DragAndDropActiveColor);
 }
+
 .sapSuiteUiCommonsProcessFlowFoldedCornerDisplayStateFocused,
 .sapSuiteUiCommonsProcessFlowFoldedCornerDisplayStateFocused.sapSuiteUiCommonsProcessFlowFoldedCornerDisplayStateRegular {
 	color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocused;
 }
+
 .sapSuiteUiCommonsProcessFlowFoldedCornerDisplayStateFocused.sapSuiteUiCommonsProcessFlowFoldedCornerDisplayStateDimmed {
 	color: @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocusedDimmed;
 }
@@ -403,7 +285,7 @@
 /* Focus */
 html.sap-desktop .sapSuiteUiCommonsProcessFlowNode0.sapSuiteUiCommonsProcessFlowFoldedCornerDisplayStateNavigation {
 	border-radius: 1rem !important;
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: 0.0625rem !important;
 }
 
@@ -432,58 +314,75 @@ html.sap-desktop .sapSuiteUiCommonsProcessFlowNode0.sapSuiteUiCommonsProcessFlow
 }
 
 .sapSuiteUiCommonsProcessFlowNodeAggregated {
-	box-shadow: 0.25rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.375rem 0rem 0rem -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular, 0.625rem 0rem 0rem -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.75rem 0rem 0rem -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular;
+	box-shadow: 0.25rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.375rem 0 0 -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular, 0.625rem 0 0 -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.75rem 0 0 -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedZoomLevel4 {
-	box-shadow: 0.125rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.1875rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular, 0.3125rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.375rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular;
+	box-shadow: 0.125rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.1875rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular, 0.3125rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.375rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregated.sapSuiteUiCommonsProcessFlowNodeDisplayStateHighlighted {
-	box-shadow: 0.25rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0rem 0rem -0.1875rem @sapUiHighlight, 0.625rem 0rem 0rem -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.75rem 0rem 0rem -0.375rem @sapUiHighlight;
+	box-shadow: 0.25rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0 0 -0.1875rem var(--sapHighlightColor), 0.625rem 0 0 -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.75rem 0 0 -0.375rem var(--sapHighlightColor);
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedZoomLevel4.sapSuiteUiCommonsProcessFlowNodeDisplayStateHighlighted {
-	box-shadow: 0.125rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.1875rem 0rem 0rem -0.0625rem @sapUiHighlight, 0.3125rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0rem 0rem -0.125rem @sapUiHighlight;
+	box-shadow: 0.125rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.1875rem 0 0 -0.0625rem var(--sapHighlightColor), 0.3125rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0 0 -0.125rem var(--sapHighlightColor);
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregated.sapSuiteUiCommonsProcessFlowNodeStatePlanned {
-	box-shadow: 0.25rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.375rem 0rem 0rem -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned, 0.625rem 0rem 0rem -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.75rem 0rem 0rem -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned;
+	box-shadow: 0.25rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.375rem 0 0 -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned, 0.625rem 0 0 -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.75rem 0 0 -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedZoomLevel4.sapSuiteUiCommonsProcessFlowNodeStatePlanned {
-	box-shadow: 0.125rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.1875rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned, 0.3125rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.375rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned;
+	box-shadow: 0.125rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.1875rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned, 0.3125rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundRegular, 0.375rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedFocused {
-	box-shadow: 0.25rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundFocused, 0.375rem 0rem 0rem -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocused, 0.625rem 0rem 0rem -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundFocused, 0.75rem 0rem 0rem -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocused;
+	box-shadow: 0.25rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundFocused, 0.375rem 0 0 -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocused, 0.625rem 0 0 -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundFocused, 0.75rem 0 0 -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocused;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedFocusedZoomLevel4 {
-	box-shadow: 0.125rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundFocused, 0.1875rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocused, 0.3125rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundFocused, 0.375rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocused;
+	box-shadow: 0.125rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundFocused, 0.1875rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocused, 0.3125rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundFocused, 0.375rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocused;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedFocused.sapSuiteUiCommonsProcessFlowNodeStateDimmed {
-	box-shadow: 0.25rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0rem 0rem -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocusedDimmed, 0.625rem 0rem 0rem -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.75rem 0rem 0rem -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocusedDimmed;
+	box-shadow: 0.25rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0 0 -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocusedDimmed, 0.625rem 0 0 -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.75rem 0 0 -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocusedDimmed;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedFocusedZoomLevel4.sapSuiteUiCommonsProcessFlowNodeStateDimmed {
-	box-shadow: 0.125rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.1875rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocusedDimmed, 0.3125rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocusedDimmed;
+	box-shadow: 0.125rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.1875rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocusedDimmed, 0.3125rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorFocusedDimmed;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedDimmed {
-	box-shadow: 0.25rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0rem 0rem -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed, 0.625rem 0rem 0rem -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.75rem 0rem 0rem -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed;
+	box-shadow: 0.25rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0 0 -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed, 0.625rem 0 0 -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.75rem 0 0 -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedDimmedZoomLevel4 {
-	box-shadow: 0.125rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.1875rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed, 0.3125rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed;
+	box-shadow: 0.125rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.1875rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed, 0.3125rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorDimmed;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedPressed,
 .sapSuiteUiCommonsProcessFlowNodeAggregatedDimmedPressed {
-	box-shadow: 0.25rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0rem 0rem -0.1875rem @sapUiHighlight, 0.625rem 0rem 0rem -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.75rem 0rem 0rem -0.375rem @sapUiHighlight;
+	box-shadow: 0.25rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0 0 -0.1875rem var(--sapHighlightColor), 0.625rem 0 0 -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.75rem 0 0 -0.375rem var(--sapHighlightColor);
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedPressedZoomLevel4,
 .sapSuiteUiCommonsProcessFlowNodeAggregatedDimmedPressedZoomLevel4 {
-	box-shadow: 0.125rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.1875rem 0rem 0rem -0.0625rem @sapUiHighlight, 0.3125rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0rem 0rem -0.125rem @sapUiHighlight;
+	box-shadow: 0.125rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.1875rem 0 0 -0.0625rem var(--sapHighlightColor), 0.3125rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundDimmed, 0.375rem 0 0 -0.125rem var(--sapHighlightColor);
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedDimmedHovered {
-	box-shadow: 0.25rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.375rem 0rem 0rem -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular, 0.625rem 0rem 0rem -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.75rem 0rem 0rem -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular;
+	box-shadow: 0.25rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.375rem 0 0 -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular, 0.625rem 0 0 -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.75rem 0 0 -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedDimmedHoveredZoomLevel4 {
-	box-shadow: 0.125rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.1875rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular, 0.3125rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.375rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular;
+	box-shadow: 0.125rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.1875rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular, 0.3125rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.375rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegular;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedDimmedHovered.sapSuiteUiCommonsProcessFlowNodeStatePlanned {
-	box-shadow: 0.25rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.375rem 0rem 0rem -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned, 0.625rem 0rem 0rem -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.75rem 0rem 0rem -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned;
+	box-shadow: 0.25rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.375rem 0 0 -0.1875rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned, 0.625rem 0 0 -0.3125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.75rem 0 0 -0.375rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeAggregatedDimmedHoveredZoomLevel4.sapSuiteUiCommonsProcessFlowNodeStatePlanned {
-	box-shadow: 0.125rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.1875rem 0rem 0rem -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned, 0.3125rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.375rem 0rem 0rem -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned;
-}
+	box-shadow: 0.125rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.1875rem 0 0 -0.0625rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned, 0.3125rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BackgroundHover, 0.375rem 0 0 -0.125rem @_sap_suite_ui_commons_ProcessFlowNode_BorderColorRegularPlanned;
+}