@sapui5/sap.suite.ui.microchart 1.143.1 → 1.145.0

package/src/sap/suite/ui/microchart/themes/base/RadialMicroChart.less

@@ -1,12 +1,12 @@
-/* ================================================================ */
-/* CSS for control sap.suite.ui.microchart/RadialMicroChart.control */
-/* Base Theme                                                       */
-/* ================================================================ */
+/* ========================================================= */
+/* CSS for control sap.suite.ui.microchart/RadialMicroChart  */
+/* Base theme                                                */
+/* ========================================================= */
 
 .sapSuiteRMC {
 	background-color: transparent;
 	position: relative;
-  	outline: none;
+	outline: none;
 	display: flex;
 	align-items: center;
 }
@@ -14,7 +14,7 @@
 .sapSuiteRMC .sapSuiteRMCVerticalAlignmentContainer {
 	width: 100%;
 	height: 100%;
-  	position: relative;
+	position: relative;
 	max-height: 5.875rem;
 	max-width: 20rem;
 	min-height: 1.125rem;
@@ -24,55 +24,55 @@
 }
 
 .sapSuiteRMCVerticalAlignmentContainer .sapSuiteRMCInnerContainer {
-  	position: relative;
-  	height: 100%;
+	position: relative;
+	height: 100%;
 	display: inline-block;
 }
 
 .sapSuiteRMCInnerContainer .sapSuiteRMCInsideLabel {
-  	position: absolute;
-  	top: 0;
-  	left: 0;
-  	width: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
 	height: 100%;
-  	display: flex;
-  	justify-content: center;
-  	align-items: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	color: @sapChart_Data_TextColor;
 }
 
 .sapSuiteRMCVerticalAlignmentContainer .sapSuiteRMCOutsideLabel {
-  	width: auto;
-  	height: auto;
-  	display: flex;
-  	align-items: center;
-  	padding-left: 0.25rem;
-  	overflow: hidden;
-  	white-space: nowrap;
-  	text-overflow: ellipsis;
+	width: auto;
+	height: auto;
+	display: flex;
+	align-items: center;
+	padding-left: 0.25rem;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
 .sapSuiteRMCVerticalAlignmentContainer .sapSuiteRMCSvg {
-  	height: 100%;
-  	width: 100%;
-  	min-width: 1.125rem;
-  	min-height: 1.125rem;
+	height: 100%;
+	width: 100%;
+	min-width: 1.125rem;
+	min-height: 1.125rem;
 }
 
 .sapSuiteRMCVerticalAlignmentContainer.sapSuiteRMCAlignLeft {
-  	justify-content: flex-start;
+	justify-content: flex-start;
 }
 
 .sapSuiteRMCVerticalAlignmentContainer.sapSuiteRMCAlignCenter {
-  	justify-content: center;
+	justify-content: center;
 }
 
 .sapSuiteRMCVerticalAlignmentContainer.sapSuiteRMCAlignRight {
-  	justify-content: flex-end;
+	justify-content: flex-end;
 }
 
 .sapSuiteRMC .sapSuiteRMCLabelHide {
-  	display: none;
+	display: none;
 }
 
 .sapSuiteRMC:focus:not([tabindex]) {
@@ -80,7 +80,7 @@
 }
 
 html.sap-desktop .sapSuiteRMC:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 .sapSuiteRMC.sapSuiteRMCSizeL {
@@ -112,32 +112,36 @@ html.sapUiMedia-Std-Phone .sapSuiteRMC.sapSuiteRMCSizeAuto,
 }
 
 .sapSuiteRMC.sapSuiteRMCLookL {
-  	.sapSuiteRMCFont {
-	  	font-size: @sapMFontHeader4Size;
-  	}
+
+	.sapSuiteRMCFont {
+		font-size: var(--sapFontHeader4Size);
+	}
 }
 
 .sapSuiteRMC.sapSuiteRMCLookM {
+
 	.sapSuiteRMCFont {
-	  	font-size: @sapMFontLargeSize;
+		font-size: var(--sapFontLargeSize);
 	}
 }
 
 .sapSuiteRMC.sapSuiteRMCLookS {
+
 	.sapSuiteRMCFont {
-	  	font-size: @sapMFontSmallSize;
+		font-size: var(--sapFontSmallSize);
 	}
 }
 
 .sapSuiteRMC.sapSuiteRMCLookXS {
+
 	.sapSuiteRMCFont {
-	  	font-size: @sapMFontSmallSize;
+		font-size: var(--sapFontSmallSize);
 	}
 }
 
 .sapSuiteRMCRing{
-	fill: @sapGroup_ContentBackground;
-	stroke: @sapContent_ForegroundBorderColor;
+	fill: var(--sapGroup_ContentBackground);
+	stroke: var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteStrokeSemanticColor(sapSuiteRMCPath);
@@ -149,5 +153,5 @@ html.sapUiMedia-Std-Phone .sapSuiteRMC.sapSuiteRMCSizeAuto,
 
 /* PATH COLORS */
 .sapSuiteRMCRemainingCircle {
-	stroke: @sapContent_ForegroundColor;
+	stroke: var(--sapContent_ForegroundColor);
 }

package/src/sap/suite/ui/microchart/themes/base/StackedBarMicroChart.less

@@ -1,39 +1,39 @@
-/* ============================================================= */
-/* CSS for control sap.suite.ui.microcharts/StackedBarMicroChart */
-/* Base Theme                                                    */
-/* ============================================================= */
+/* ============================================================== */
+/* CSS for control sap.suite.ui.microcharts/StackedBarMicroChart  */
+/* Base theme                                                     */
+/* ============================================================== */
 
 .sapSuiteStackedMC {
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 	outline: none;
 	display: flex;
 	align-items: center;
 
-  	.sapSuiteStackedMCContainer {
-	  display: flex;
-	  align-items: center;
-	  position: relative;
-	  height: 100%;
-	  width: 100%;
-	  min-width: 2rem;
-	  max-width: 20rem;
-	  height:fit-content;
-	  max-height: 3.5rem;
-	  border: 1px solid @sapGroup_ContentBackground;
-	  outline: 1px solid @sapContent_ForegroundBorderColor;
+	.sapSuiteStackedMCContainer {
+		display: flex;
+		align-items: center;
+		position: relative;
+		height: 100%;
+		width: 100%;
+		min-width: 2rem;
+		max-width: 20rem;
+		height:fit-content;
+		max-height: 3.5rem;
+		border: 1px solid var(--sapGroup_ContentBackground);
+		outline: 1px solid var(--sapContent_ForegroundBorderColor);
 	}
 
 	.sapSuiteStackedMCBar {
-	  position: relative;
-	  height: 1rem;
-	  -moz-box-sizing: border-box;
-	  min-width: 0.25rem;
+		position: relative;
+		height: 1rem;
+		-moz-box-sizing: border-box;
+		min-width: 0.25rem;
 
 		&:not(:last-child) {
 			border-right: 1px solid @sapUiChartDataPointBGBorderColor;
 		}
 		&.sapSuiteStackedMCBarZeroValue {
-			background-color: @sapChart_Neutral !important;
+			background-color: var(--sapChart_Neutral) !important;
 		}
 	}
 }
@@ -65,25 +65,27 @@ html.sap-desktop .sapSuiteStackedMC:focus:not([tabindex]),
 html.sapUiMedia-Std-Desktop .sapSuiteStackedMC.sapSuiteStackedMCSizeAuto,
 html.sapUiMedia-Std-Tablet .sapSuiteStackedMC.sapSuiteStackedMCSizeAuto,
 .sapSuiteStackedMC.sapSuiteStackedMCSizeM {
-  width: 10.5rem;
-  height: 3.5rem;
+	width: 10.5rem;
+	height: 3.5rem;
 }
 
 html.sapUiMedia-Std-Phone .sapSuiteStackedMC.sapSuiteStackedMCSizeAuto,
 .sapSuiteStackedMC.sapSuiteStackedMCSizeS{
-  width: 8.25rem;
-  height: 3.5rem;
+	width: 8.25rem;
+	height: 3.5rem;
 }
 
 .sapSuiteStackedMC.sapSuiteStackedMCSizeXS {
-  width: 6rem;
-  height: 1.5rem;
-  justify-content: center;
-  .sapSuiteStackedMCContainer {
-	.sapSuiteStackedMCBar {
-		height: 1.125rem;
+	width: 6rem;
+	height: 1.5rem;
+	justify-content: center;
+
+	.sapSuiteStackedMCContainer {
+
+		.sapSuiteStackedMCBar {
+			height: 1.125rem;
+		}
 	}
-  }
 }
 
 .sapSuiteStackedMC.sapSuiteStackedMCSizeXS:focus {
@@ -100,20 +102,21 @@ html.sapUiMedia-Std-Phone .sapSuiteStackedMC.sapSuiteStackedMCSizeAuto,
 }
 
 .sapSuiteStackedMCSmallLook {
-  .sapSuiteStackedMCBar {
-	height: 0.75rem;
-  }
 
-  .sapSuiteStackedMCBarLabel {
-	display: none;
-  }
+	.sapSuiteStackedMCBar {
+		height: 0.75rem;
+	}
+
+	.sapSuiteStackedMCBarLabel {
+		display: none;
+	}
 }
 
 html.sap-desktop .sapSuiteStackedMC:focus {
-    outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-  	outline-offset: 1px;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: 1px;
 }
 
 .sapSuiteBackgroundSemanticColor(sapSuiteStackedMCBarSemanticColor);
 
-.sapSuiteChartTextSemanticColor(sapSuiteStackedMCBarLabel);
+.sapSuiteChartTextSemanticColor(sapSuiteStackedMCBarLabel);

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

@@ -1,6 +1,6 @@
 /*!
  * SAPUI5
- * (c) Copyright 2025 SAP SE. All rights reserved.
+ * (c) Copyright 2026 SAP SE. All rights reserved.
  */
 
 @import "../../../../../../sap/ui/core/themes/base/base.less";

package/src/sap/suite/ui/microchart/themes/sap_belize/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * SAPUI5
- * (c) Copyright 2025 SAP SE. All rights reserved.
+ * (c) Copyright 2026 SAP SE. All rights reserved.
  */
 
 /* ============================================================================ */

package/src/sap/suite/ui/microchart/themes/sap_belize_base/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * SAPUI5
- * (c) Copyright 2025 SAP SE. All rights reserved.
+ * (c) Copyright 2026 SAP SE. All rights reserved.
  */
 
 @import "../../../../../../sap/ui/core/themes/base/base.less";

package/src/sap/suite/ui/microchart/themes/sap_belize_hcb/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * SAPUI5
- * (c) Copyright 2025 SAP SE. All rights reserved.
+ * (c) Copyright 2026 SAP SE. All rights reserved.
  */
 
 /* ============================================================================ */

package/src/sap/suite/ui/microchart/themes/sap_belize_hcw/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * SAPUI5
- * (c) Copyright 2025 SAP SE. All rights reserved.
+ * (c) Copyright 2026 SAP SE. All rights reserved.
  */
 
 /* ============================================================================ */

package/src/sap/suite/ui/microchart/themes/sap_belize_plus/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * SAPUI5
- * (c) Copyright 2025 SAP SE. All rights reserved.
+ * (c) Copyright 2026 SAP SE. All rights reserved.
  */
 
 @import "../sap_belize/library.source.less";

package/src/sap/suite/ui/microchart/themes/sap_bluecrystal/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * SAPUI5
- * (c) Copyright 2025 SAP SE. All rights reserved.
+ * (c) Copyright 2026 SAP SE. All rights reserved.
  */
 
 /* ============================================================================== */

package/src/sap/suite/ui/microchart/themes/sap_bluecrystal_base/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * SAPUI5
- * (c) Copyright 2025 SAP SE. All rights reserved.
+ * (c) Copyright 2026 SAP SE. All rights reserved.
  */
 
 @import "../../../../../../sap/ui/core/themes/base/base.less";

package/src/sap/suite/ui/microchart/themes/sap_fiori_3/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * SAPUI5
- * (c) Copyright 2025 SAP SE. All rights reserved.
+ * (c) Copyright 2026 SAP SE. All rights reserved.
  */
 
 @import "../base/library.source.less";

package/src/sap/suite/ui/microchart/themes/sap_fiori_3_dark/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * SAPUI5
- * (c) Copyright 2025 SAP SE. All rights reserved.
+ * (c) Copyright 2026 SAP SE. All rights reserved.
  */
 
 @import "../base/library.source.less";

package/src/sap/suite/ui/microchart/themes/sap_fiori_3_hcb/AreaMicroChart.less

@@ -1,17 +1,17 @@
-/* ====================================================== */
-/* CSS for control sap.suite.ui.microchart/AreaMicroChart */
-/* Fiori 3 High Contrast Black Theme                      */
-/* ====================================================== */
+/* ======================================================= */
+/* CSS for control sap.suite.ui.microchart/AreaMicroChart  */
+/* Quartz High Contrast Black theme                        */
+/* ======================================================= */
 
 .sapSuiteAMCTarget {
 	outline-width: 7px;
 }
 
 html.sap-desktop .sapSuiteAMC:focus {
-  outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 .sapSuiteAMCChart.sapSuiteAMCSemanticColorNeutral,
 .sapSuiteAMCTarget.sapSuiteAMCSemanticColorNeutral {
-	text-shadow: @sapContent_TextShadow;
+	text-shadow: var(--sapContent_TextShadow);
 }

package/src/sap/suite/ui/microchart/themes/sap_fiori_3_hcb/BulletMicroChart.less

@@ -1,10 +1,10 @@
-/* ======================================================== */
-/* CSS for control sap.suite.ui.microchart/BulletMicroChart */
-/* Fiori 3 High Contrast Black Theme                        */
-/* ======================================================== */
+/* ========================================================= */
+/* CSS for control sap.suite.ui.microchart/BulletMicroChart  */
+/* Quartz High Contrast Black theme                          */
+/* ========================================================= */
 
 html.sap-desktop .sapSuiteBMCContent:focus {
-  outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+  outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 .sapSuiteBMCTargetValue {
@@ -35,4 +35,4 @@ html[dir=rtl] .sapSuiteBMCForecastBarValue {
 .sapSuiteBMCBarValueMarker.sapSuiteBMCModeTypeDelta {
 	border-left: 1px @sapUiHcStandardBackground solid;
 	border-right: 1px @sapUiHcStandardBackground solid;
-}
+}

package/src/sap/suite/ui/microchart/themes/sap_fiori_3_hcb/ColumnMicroChart.less

@@ -1,14 +1,14 @@
-/* ======================================================== */
-/* CSS for control sap.suite.ui.microchart/ColumnMicroChart */
-/* Fiori 3 High Contrast Black Theme                        */
-/* ======================================================== */
+/* ========================================================= */
+/* CSS for control sap.suite.ui.microchart/ColumnMicroChart  */
+/* Quartz High Contrast Black theme                          */
+/* ========================================================= */
 
 html.sap-desktop .sapSuiteClMC:focus,
 .sapSuiteClMC:focus {
-    outline:@sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 html.sap-desktop .sapSuiteClMCBar[tabindex]:focus .sapSuiteClMCInnerBar,
 .sapSuiteClMCBar[tabindex]:focus .sapSuiteClMCInnerBar {
-  	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-}
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+}

package/src/sap/suite/ui/microchart/themes/sap_fiori_3_hcb/ComparisonMicroChart.less

@@ -1,7 +1,7 @@
-/* ============================================================ */
-/* CSS for control sap.suite.ui.microchart/ComparisonMicroChart */
-/* Fiori 3 High Contrast Black Theme                            */
-/* ============================================================ */
+/* ============================================================= */
+/* CSS for control sap.suite.ui.microchart/ComparisonMicroChart  */
+/* Quartz High Contrast Black theme                              */
+/* ============================================================= */
 
 .sapSuiteCpMCChartBar > div {
 	height: 0.25rem;
@@ -14,7 +14,7 @@
 }
 
 html.sap-desktop .sapSuiteCpMCChartContent[tabindex]:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 .sapSuiteCpMCChartBarValue {

package/src/sap/suite/ui/microchart/themes/sap_fiori_3_hcb/DeltaMicroChart.less

@@ -1,12 +1,12 @@
-/* =============================================================== */
-/* CSS for control sap.suite.ui.microchart/DeltaMicroChart.control */
-/* Fiori 3 High Contrast Black Theme                               */
-/* =============================================================== */
+/* ================================================================ */
+/* CSS for control sap.suite.ui.microchart/DeltaMicroChart.control  */
+/* Quartz High Contrast Black theme                                 */
+/* ================================================================ */
 
 .sapSuiteDMC {
-	font-color: @sapUiHcStandardForeground;
+	color: @sapUiHcStandardForeground;
 }
 
 html.sap-desktop .sapSuiteDMC:focus {
-  outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-}
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+}

package/src/sap/suite/ui/microchart/themes/sap_fiori_3_hcb/HarveyBallMicroChart.less

@@ -1,7 +1,7 @@
-/* ============================================================ */
-/* CSS for control sap.suite.ui.microchart/HarveyBallMicroChart */
-/* Fiori 3 High Contrast Black Theme                            */
-/* ============================================================ */
+/* ============================================================= */
+/* CSS for control sap.suite.ui.microchart/HarveyBallMicroChart  */
+/* Quartz High Contrast Black theme                              */
+/* ============================================================= */
 
 .sapSuiteHBMCBackgroundCircle {
 	stroke-width: 1.5;

package/src/sap/suite/ui/microchart/themes/sap_fiori_3_hcb/InteractiveBarChart.less

@@ -1,19 +1,22 @@
-/* =========================================================== */
-/* CSS for control sap.suite.ui.microchart/InteractiveBarChart */
-/* Fiori 3 High Contrast Black Theme                           */
-/* =========================================================== */
+/* ============================================================ */
+/* CSS for control sap.suite.ui.microchart/InteractiveBarChart  */
+/* Quartz High Contrast Black theme                             */
+/* ============================================================ */
 
 .sapSuiteIBCBar {
 	background-color: @sapUiHcStandardBackground;
 	border-style: solid;
-	border-width: 1px 0px 1px 0px;
+	border-width: 1px 0 1px 0;
 	border-color: @sapUiHcStandardForeground;
+
 	&.sapSuiteIBCBarNegative.sapSuiteIBCValueNegative {
 		border-left-width: 1px;
 	}
+
 	&.sapSuiteIBCBarPositive.sapSuiteIBCValuePositive {
 		border-right-width: 1px;
 	}
+
 	&.sapSuiteIBCBarValueNull {
 		border: none;
 	}
@@ -21,51 +24,51 @@
 
 /* hover */
 .sapSuiteIBCBarInteractionArea:hover {
-	background-color: @sapHighlightColor !important;
-	border: 1px solid @sapUiContentContrastTextColor !important;
+	background-color: var(--sapHighlightColor) !important;
+	border: 1px solid var(--sapContent_ContrastTextColor) !important;
 }
 
 .sapSuiteIBCBarInteractionArea:hover .sapSuiteIBCBarLabelText,
 .sapSuiteIBCBarInteractionArea:hover .sapSuiteIBCBarValue.sapSuiteIBCBarValueOutside {
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 }
 
 .sapSuiteIBCBarSelected.sapSuiteIBCBarInteractionArea:hover .sapSuiteIBCBarLabelText,
 .sapSuiteIBCBarSelected.sapSuiteIBCBarInteractionArea:hover .sapSuiteIBCBarValue.sapSuiteIBCBarValueOutside {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
 .sapSuiteIBCBarSelected.sapSuiteIBCBarInteractionArea:hover {
-	background-color: @sapHighlightColor;
+	background-color: var(--sapHighlightColor);
 }
 
 .sapSuiteIBCBarSelected {
-	border: 1px solid @sapUiContentContrastTextColor;
-	background-color: @sapUiSelected;
+	border: 1px solid var(--sapContent_ContrastTextColor);
+	background-color: var(--sapSelectedColor);
 }
 
 html.sap-desktop .sapSuiteIBC:not(.sapSuiteIBCNonInteractive) .sapSuiteIBCBarInteractionArea:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: -2px;
 	border-color: transparent;
 }
 
-/* IE and Edge ignores outline-offset. Firefox stretches the outline */
-html[data-sap-ui-browser^="ie"].sap-desktop,
-html[data-sap-ui-browser^="ed"].sap-desktop,
+/* Firefox stretches the outline */
 html[data-sap-ui-browser^="ff"].sap-desktop {
+
 	.sapSuiteIBC:not(.sapSuiteIBCNonInteractive) .sapSuiteIBCBarInteractionArea:focus {
 		outline: none;
 		position: relative;
 	}
-	.sapSuiteIBC:not(.sapSuiteIBCNonInteractive) .sapSuiteIBCBarInteractionArea:focus:before {
-		content: " ";
+
+	.sapSuiteIBC:not(.sapSuiteIBCNonInteractive) .sapSuiteIBCBarInteractionArea:focus::before {
+		content: '';
 		box-sizing: border-box;
 		width: 100%;
 		height: 100%;
 		position: absolute;
-		left: 0px;
-		top: 0px;
+		left: 0;
+		top: 0;
 		border: 2px dashed @sapUiHcStandardForeground;
 		pointer-events: none;
 	}
@@ -77,4 +80,4 @@ html[data-sap-ui-browser^="ff"].sap-desktop {
 
 .sapSuiteIBCSemanticMarker {
 	border-right: 1px solid @sapUiHcStandardBackground;
-}
+}