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

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

@@ -1,7 +1,13 @@
-/* =========================================================== */
-/* CSS for control sap.suite.ui.microchart/InteractiveBarChart */
-/* Base Theme                                                  */
-/* =========================================================== */
+/* ============================================================ */
+/* CSS for control sap.suite.ui.microchart/InteractiveBarChart  */
+/* Base theme                                                   */
+/* ============================================================ */
+
+@_sap_suite_ui_microchart_InteractiveBarChart_BarBackground: var(--sapHighlightColor);
+@_sap_suite_ui_microchart_InteractiveBarChart_BarHoverBackground: fade(@sapUiHighlight, 20);
+@_sap_suite_ui_microchart_InteractiveBarChart_BarSelectedBackground: fade(@sapUiHighlight, 20);
+@_sap_suite_ui_microchart_InteractiveBarChart_BarSelectedHoverBackground: fade(@sapUiHighlight, 40);
+@_sap_suite_ui_microchart_InteractiveBarChart_BarHoverBorder: fade(@sapUiHighlight, 60);
 
 .sapSuiteIBC {
 	height: 100%;
@@ -76,7 +82,7 @@
 
 html.sap-tablet .sapSuiteIBC:not(.sapSuiteIBCNonInteractive) .sapSuiteIBCBarInteractionArea:focus,
 html.sap-phone .sapSuiteIBC:not(.sapSuiteIBCNonInteractive) .sapSuiteIBCBarInteractionArea:focus {
-	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 html.sap-tablet .sapSuiteIBC:focus,
@@ -94,18 +100,19 @@ html.sap-phone .sapSuiteIBC:focus {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	text-align: left;
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-weight: normal;
 	font-size: @sapMFontMediumSize;
 	margin-right: 0.375rem;
 	margin-left: 0.375rem;
 }
+
 html[dir="rtl"] .sapSuiteIBCBarLabelText {
 	text-align: right;
 }
 
 .sapSuiteIBCBarValue {
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-weight: normal;
 	font-size: @sapMFontMediumSize;
 	position: absolute;
@@ -114,11 +121,11 @@ html[dir="rtl"] .sapSuiteIBCBarLabelText {
 }
 
 .sapSuiteIBCSmallFont .sapSuiteIBCBarValue {
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 }
 
 .sapSuiteIBCSmallFont .sapSuiteIBCBarLabelText {
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 }
 
 .sapSuiteIBCBarPositive .sapSuiteIBCBarValue {
@@ -159,9 +166,11 @@ html[dir="rtl"] .sapSuiteIBCBarLabelText {
 	z-index: 0;
 }
 
-.sapSuiteIBCFullWidth {
-	.sapSuiteIBCBarInteractionArea:first-child, .sapSuiteIBCDisabledOverlay  + .sapSuiteIBCBarInteractionArea  {
-		.sapSuiteIBCDivider  {
+.sapSuiteIBCFullWidth {
+
+	.sapSuiteIBCBarInteractionArea:first-child, .sapSuiteIBCDisabledOverlay + .sapSuiteIBCBarInteractionArea {
+
+		.sapSuiteIBCDivider {
 			top: -0.75rem;
 			height: 3.875rem;
 		}
@@ -201,7 +210,7 @@ html[dir="rtl"] .sapSuiteIBCBarLabelText {
 .sapSuiteIBCFullWidth .sapSuiteIBCBarLabelText {
 	margin-left: 0.375rem + 0.25rem; /* area padding left + padding from divider (design) */
 	line-height: 0.75rem + 0.125rem + 0.125rem; /* font-size + padding-top + padding-bottom (design) */
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 }
 
 .sapSuiteIBCFullWidth .sapSuiteIBCBar {
@@ -228,41 +237,34 @@ html[dir="rtl"] .sapSuiteIBCBarLabelText {
 	bottom: -1px;
 
 	&.sapSuiteIBCSemanticGood {
-		background-color: @sapUiPositiveElement;
+		background-color: var(--sapPositiveElementColor);
 	}
 	&.sapSuiteIBCSemanticError {
-		background-color: @sapUiNegativeElement;
+		background-color: var(--sapNegativeElementColor);
 	}
 	&.sapSuiteIBCSemanticCritical {
-		background-color: @sapUiCriticalElement;
+		background-color: var(--sapCriticalElementColor);
 	}
 }
 
-
-@_sap_suite_ui_microchart_InteractiveBarChart_BarBackground:				@sapUiHighlight;
-@_sap_suite_ui_microchart_InteractiveBarChart_BarHoverBackground: 			fade(@sapUiHighlight, 20);
-@_sap_suite_ui_microchart_InteractiveBarChart_BarSelectedBackground: 		fade(@sapUiHighlight, 20);
-@_sap_suite_ui_microchart_InteractiveBarChart_BarSelectedHoverBackground:	fade(@sapUiHighlight, 40);
-@_sap_suite_ui_microchart_InteractiveBarChart_BarHoverBorder:				fade(@sapUiHighlight, 60);
-
-
 .sapSuiteIBCBar {
 	background-color: @_sap_suite_ui_microchart_InteractiveBarChart_BarBackground;
 }
 
 .sapSuiteIBCBarLabelText {
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 }
 
 html.sap-desktop .sapSuiteIBC.sapSuiteIBCNonInteractive:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 html.sap-desktop .sapSuiteIBC:not(.sapSuiteIBCNonInteractive) .sapSuiteIBCBarInteractionArea:hover {
 	background-color: @_sap_suite_ui_microchart_InteractiveBarChart_BarHoverBackground;
 	border: 1px solid @_sap_suite_ui_microchart_InteractiveBarChart_BarHoverBorder;
+
 	.sapSuiteIBCBarLabelText {
-		color: @sapUiContentForegroundTextColor;
+		color: var(--sapContent_ForegroundTextColor);
 	}
 }
 
@@ -275,21 +277,21 @@ html.sap-desktop .sapSuiteIBC:not(.sapSuiteIBCNonInteractive) .sapSuiteIBCBarSel
 }
 
 .sapSuiteIBCBarSelected .sapSuiteIBCBarLabelText{
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
 .sapSuiteIBCBarValue.sapSuiteIBCBarValueOutside {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
 .sapSuiteIBCBarValue {
-	color: @sapUiContentContrastTextColor;
+	color: var(--sapContent_ContrastTextColor);
 }
 
 html.sap-desktop .sapSuiteIBC:not(.sapSuiteIBCNonInteractive) .sapSuiteIBCBarInteractionArea:focus {
-	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 .sapSuiteIBCDivider {
-	background-color: @sapUiBaseText;
-}
+	background-color: var(--sapTextColor);
+}

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

@@ -1,7 +1,15 @@
-/* ===================================================================== */
-/* CSS for control sap.suite.ui.microchart/InteractiveDonutChart.control */
-/* Base Theme                                                            */
-/* ===================================================================== */
+/* ============================================================== */
+/* CSS for control sap.suite.ui.microchart/InteractiveDonutChart  */
+/* Base theme                                                     */
+/* ============================================================== */
+
+@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentHoverBackground: fade(@sapUiHighlight, 20);
+@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentSelectedBackground: fade(@sapUiHighlight, 40);
+@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentSelectedHoverBackground: fade(@sapUiHighlight, 60);
+@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentBorderHover: fade(@sapUiHighlight, 40);
+@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentBorderHoverSelected: fade(@sapUiHighlight, 80);
+@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentBorder: var(--sapHighlightColor);
+@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentFillColor: var(--sapHighlightColor);
 
 .sapSuiteIDC {
 	position: relative;
@@ -56,7 +64,7 @@ svg.sapSuiteIDCChartSVG {
 
 .sapSuiteIDCLegendSegmentSelected {
 	font-weight: bold;
-	color: @sapUiContentForegroundTextColor;
+	color: var(--sapContent_ForegroundTextColor);
 }
 
 html.sap-tablet .sapSuiteIDC:focus,
@@ -74,18 +82,17 @@ html.sap-phone .sapSuiteIDC:focus {
 }
 
 .sapSuiteIDCLegendLabelValue {
-	width: ~"calc(100% - 1.125rem - 0.25rem - 0.5rem)"; /*escape calc in order to not use less-function (deduct marker width and marker margins)*/
+	width: ~"calc(100% - 1.125rem - 0.25rem - 0.5rem)"; /* escape calc in order to not use less-function (deduct marker width and marker margins) */
 	float: left;
-
-	color: @sapUiContentLabelColor;
-	font-family: @sapUiFontFamily;
+	color: var(--sapContent_LabelColor);
+	font-family: var(--sapFontFamily);
 	font-size: @sapMFontMediumSize;
 	cursor: pointer;
 
-	//sapSuiteIDCLegendLabelValue inside a selected or hovered-selected legend entry
+	/* sapSuiteIDCLegendLabelValue inside a selected or hovered-selected legend entry */
 	.sapSuiteIDCLegendSegmentSelected &,
 	.sapSuiteIDCLegendSegmentSelected.sapSuiteIDCLegendSegmentHover & {
-		color: @sapUiContentForegroundTextColor;
+		color: var(--sapContent_ForegroundTextColor);
 	}
 }
 
@@ -96,13 +103,15 @@ html.sap-phone .sapSuiteIDC:focus {
 	width: 0.1875rem;
 
 	&.sapSuiteICSemanticColorGood {
-		background-color: @sapUiPositiveElement;
+		background-color: var(--sapPositiveElementColor);
 	}
+
 	&.sapSuiteICSemanticColorError {
-		background-color: @sapUiNegativeElement;
+		background-color: var(--sapNegativeElementColor);
 	}
+
 	&.sapSuiteICSemanticColorCritical {
-		background-color: @sapUiCriticalElement;
+		background-color: var(--sapCriticalElementColor);
 	}
 }
 
@@ -135,12 +144,16 @@ html.sap-phone .sapSuiteIDC:focus {
 }
 
 .sapSuiteIDCSmallFont {
-	.sapSuiteIDCLegendLabel, .sapSuiteIDCLegendValue {
-		font-size: @sapMFontSmallSize;
+
+	.sapSuiteIDCLegendLabel,
+	.sapSuiteIDCLegendValue {
+		font-size: var(--sapFontSmallSize);
 	}
+
 	.sapSuiteIDCLegendSegment {
 		margin-bottom: 1px;
 	}
+
 	.sapSuiteIDCLegendMarker {
 		width: 0.625rem;
 		height: 0.625rem;
@@ -154,73 +167,81 @@ html.sap-phone .sapSuiteIDC:focus {
 
 /* SMALL-LEGEND-PADDING */
 .sapSuiteIDCSmallLegendPadding {
+
 	.sapSuiteIDCLegendMarker {
 		margin-left: 0.25rem;
 	}
+
 	.sapSuiteIDCLegendLabel, .sapSuiteIDCLegendValue {
-		font-size: @sapMFontSmallSize;
+		font-size: var(--sapFontSmallSize);
 	}
+
 	.sapSuiteIDCLegendLabelValue {
-		width: ~"calc(100% - 1.125rem - 0.25rem - 0.25rem)"; /*escape calc in order to not use less-function (deduct marker width and marker margins)*/
+		width: ~"calc(100% - 1.125rem - 0.25rem - 0.25rem)"; /* escape calc in order to not use less-function (deduct marker width and marker margins) */
 	}
 }
 
 /* FULL-WIDTH */
 .sapSuiteIDCFullWidth {
+
 	.sapSuiteIDCChart {
 		width: 0%;
 		padding: 0;
 	}
+
 	.sapSuiteIDCLegend {
 		width: 100%;
 	}
+
 	.sapSuiteIDCLegendMarker {
 		visibility: hidden;
 		width: 0px;
 		margin: 0px;
 	}
+
 	.sapSuiteIDCLegendLabelValue {
 		width: 100%;
 	}
+
 	.sapSuiteIDCLegendLabel {
 		padding-left: 0.5rem;
 	}
+
 	.sapSuiteIDCLegendValue {
 		padding-right: 0.5rem;
 		padding-left: 0.5rem;
 	}
-	.sapSuiteIDCLegendLabel, .sapSuiteIDCLegendValue {
+
+	.sapSuiteIDCLegendLabel,
+	.sapSuiteIDCLegendValue {
 		font-size: @sapMFontMediumSize;
 	}
 }
 
 .sapSuiteIDCFullWidth.sapSuiteIDCFullWidthSmallFont {
-	.sapSuiteIDCLegendLabel, .sapSuiteIDCLegendValue {
-		font-size: @sapMFontSmallSize;
+
+	.sapSuiteIDCLegendLabel,
+	.sapSuiteIDCLegendValue {
+		font-size: var(--sapFontSmallSize);
 	}
+
 	.sapSuiteIDCLegendLabel {
 		padding-left: 0.25rem;
 	}
-	sapSuiteIDCLegendValue {
+
+	.sapSuiteIDCLegendValue {
 		padding-right: 0.25rem;
 	}
 }
 
 /* COMPACT */
 .sapUiSizeCompact {
+
 	.sapSuiteIDCLegendSegment {
 		max-height: 2.25rem;
 	}
 }
 
-@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentHoverBackground: 	    fade(@sapUiHighlight, 20);
-@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentSelectedBackground: 		fade(@sapUiHighlight, 40);
-@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentSelectedHoverBackground:	fade(@sapUiHighlight, 60);
-@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentBorderHover:		        fade(@sapUiHighlight, 40);
-@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentBorderHoverSelected:		fade(@sapUiHighlight, 80);
-@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentBorder:					@sapUiHighlight;
-@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentFillColor:				@sapUiHighlight;
-
 /* GENERAL */
 .sapSuiteIDC {
 	border: 1px dotted transparent;
@@ -228,11 +249,11 @@ html.sap-phone .sapSuiteIDC:focus {
 
 /* FOCUS */
 html.sap-desktop .sapSuiteIDC:focus {
-	border-color: @sapUiContentFocusColor;
+	border-color: var(--sapContent_FocusColor);
 }
 
 html.sap-desktop .sapSuiteIDCLegendSegment:focus {
-	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 html.sap-tablet .sapSuiteIDCLegendSegmentSelected,
@@ -243,14 +264,16 @@ html.sap-desktop .sapSuiteIDCLegendSegmentSelected:not(:focus) {
 
 /* LEGEND SEGMENTS */
 html.sap-desktop .sapSuiteIDC:not(.sapSuiteIDCNonInteractive) {
+
 	.sapSuiteIDCLegendSegmentHover {
 		background-color: @_sap_suite_ui_microchart_InteractiveDonutChart_SegmentHoverBackground;
 		border: 1px solid @_sap_suite_ui_microchart_InteractiveDonutChart_SegmentBorderHover;
 
 		.sapSuiteIDCLegendLabelValue {
-			color: @sapUiContentForegroundTextColor;
+			color: var(--sapContent_ForegroundTextColor);
 		}
 	}
+
 	.sapSuiteIDCLegendSegmentSelected.sapSuiteIDCLegendSegmentHover {
 		background-color: @_sap_suite_ui_microchart_InteractiveDonutChart_SegmentSelectedHoverBackground;
 		border: 1px solid @_sap_suite_ui_microchart_InteractiveDonutChart_SegmentBorderHover;
@@ -266,31 +289,35 @@ html.sap-desktop .sapSuiteIDC:not(.sapSuiteIDCNonInteractive) {
 }
 
 /* SVG STYLE */
-.sapSuiteIDCChartSegment { /*normal*/
+.sapSuiteIDCChartSegment { /* normal */
 	stroke: @_sap_suite_ui_microchart_InteractiveDonutChart_SegmentBorder;
 	stroke-width: 1px;
 }
 
 /* DONUT SEGMENTS */
-.sapSuiteIDCChartSegmentHighlight { /*hover*/
+.sapSuiteIDCChartSegmentHighlight { /* hover */
 	stroke-opacity: 0.3;
 }
-.sapSuiteIDCChartSegmentSelected{ /*selected*/
+
+.sapSuiteIDCChartSegmentSelected{ /* selected */
 	stroke-opacity: 0.7;
 }
+
 .sapSuiteIDCChartSegmentHighlight.sapSuiteIDCChartSegmentSelected { /*hover on selected*/
 	stroke-opacity: 0.4;
 }
 
 /* DONUT GHOST SEGMENTS */
-.sapSuiteIDCChartSegmentGhostHighlight { /*hover*/
+.sapSuiteIDCChartSegmentGhostHighlight { /* hover */
 	fill: @_sap_suite_ui_microchart_InteractiveDonutChart_SegmentHoverBackground;
 	stroke: @_sap_suite_ui_microchart_InteractiveDonutChart_SegmentBorderHover;
 }
-.sapSuiteIDCChartSegmentGhostSelected{ /*selected*/
+
+.sapSuiteIDCChartSegmentGhostSelected{ /* selected */
 	fill: @_sap_suite_ui_microchart_InteractiveDonutChart_SegmentSelectedBackground;
 }
-.sapSuiteIDCChartSegmentGhostHighlight.sapSuiteIDCChartSegmentGhostSelected { /*hover on selected*/
+
+.sapSuiteIDCChartSegmentGhostHighlight.sapSuiteIDCChartSegmentGhostSelected { /* hover on selected */
 	stroke:@_sap_suite_ui_microchart_InteractiveDonutChart_SegmentBorderHoverSelected;
 	fill: @_sap_suite_ui_microchart_InteractiveDonutChart_SegmentSelectedHoverBackground;
-}
+}