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

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

@@ -1,14 +1,14 @@
-/* ==================================================================== */
-/* CSS for control sap.suite.ui.commons/ProcessFlowConnectionLabel      */
-/* High Contrast Black theme                                            */
-/* ==================================================================== */
+/* ================================================================ */
+/* CSS for control sap.suite.ui.commons/ProcessFlowConnectionLabel  */
+/* Quartz High Contrast Black 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_hcb/ProcessFlowLaneHeader.less

@@ -1,7 +1,7 @@
-/* ================================================================== */
-/* CSS for sap.suite.ui.commons/ProcessFlowLaneHeader.control         */
-/* High Contrast Black theme                                          */
-/* ================================================================== */
+/* =========================================================== */
+/* CSS for control sap.suite.ui.commons/ProcessFlowLaneHeader  */
+/* Quartz High Contrast Black 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);
+}