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

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

@@ -1,7 +1,18 @@
-/* ============================================================ */
-/* CSS for control sap.suite.ui.microchart/InteractiveLineChart */
-/* Base Theme                                                   */
-/* ============================================================ */
+/* ============================================================= */
+/* CSS for control sap.suite.ui.microchart/InteractiveLineChart  */
+/* Base theme                                                    */
+/* ============================================================= */
+
+@_sap_suite_ui_microchart_InteractiveLineChart_LineColor: var(--sapHighlightColor);
+@_sap_suite_ui_microchart_InteractiveLineChart_SectionHoverBackground: fade(@sapUiHighlight, 20);
+@_sap_suite_ui_microchart_InteractiveLineChart_SectionHoverBorder: fade(@sapUiHighlight, 60);
+@_sap_suite_ui_microchart_InteractiveLineChart_SectionSelectedBackground: fade(@sapUiBrand, 20);
+@_sap_suite_ui_microchart_InteractiveLineChart_SectionSelectedHoverBackground: fade(@sapUiBrand, 40);
+@_sap_suite_ui_microchart_InteractiveLineChart_BottomLabelBorderColor: @sapUiChartDataLineColor;
+@_sap_suite_ui_microchart_InteractiveLineChart_DividerColor: @sapUiChartDataLineColor;
+@_sap_suite_ui_microchart_InteractiveLineChart_SelectedPointBorder: fade(@sapUiHighlight, 20);
+@_sap_suite_ui_microchart_InteractiveLineChart_HoverPointBorder: fade(@sapUiHighlight, 20);
+@_sap_suite_ui_microchart_InteractiveLineChart_SelectedHoverPointBorder: fade(@sapUiHighlight, 40);
 
 .sapSuiteILC {
 	height: 100%;
@@ -34,18 +45,19 @@
 	font-size: @sapMFontMediumSize;
 	position: absolute;
 	white-space: nowrap;
-
 	overflow: hidden;
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 }
 
 .sapSuiteILCNonInteractive :not(.sapSuiteILCDisabledOverlay) {
 	cursor: pointer;
 }
+
 .sapSuiteILCCanvasLayout {
 	top: 1.9375rem; /* 31px */
 	bottom: 3.9375rem; /* 63px */
 }
+
 .sapSuiteILCChartCanvas {
 	width: 100%;
 	position: absolute;
@@ -75,22 +87,25 @@
 	height: 0.5rem;
 	border-radius: 50%;
 	transform: translate(-50%, 50%);
-	border: 1px solid @sapUiGlobalBackgroundColor;
+	border: 1px solid var(--sapBackgroundColor);
 	background-clip: content-box;
 
 	&.sapSuiteICSemanticColorGood, &.sapSuiteICSemanticColorCritical, &.sapSuiteICSemanticColorError {
-		border: 2px solid @sapUiGlobalBackgroundColor;
+		border: 2px solid var(--sapBackgroundColor);
 		width: 0.625rem;
 		height: 0.625rem;
 	}
+
 	&.sapSuiteICSemanticColorGood {
-		background-color: @sapUiPositiveElement;
+		background-color: var(--sapPositiveElementColor);
 	}
+
 	&.sapSuiteICSemanticColorError {
-		background-color: @sapUiNegativeElement;
+		background-color: var(--sapNegativeElementColor);
 	}
+
 	&.sapSuiteICSemanticColorCritical {
-		background-color: @sapUiCriticalElement;
+		background-color: var(--sapCriticalElementColor);
 	}
 }
 
@@ -100,15 +115,18 @@
 	border: 1px solid transparent;
 	outline: none;
 }
+
 .sapUiSizeCompact .sapSuiteILCSection,
 .sapSuiteILCNonInteractive .sapSuiteILCSection {
-	border-left-width: 0px;
+	border-left-width: 0;
 }
 
 .sapSuiteILCSection:last-child {
-	border-right-width: 0px;
+	border-right-width: 0;
 }
-.sapSuiteILCInteractionArea, .sapSuiteILCBackgroundArea {
+
+.sapSuiteILCInteractionArea,
+.sapSuiteILCBackgroundArea {
 	bottom: -3.875rem;
 	top: -2rem;
 	width: 100%;
@@ -117,12 +135,6 @@
 	outline: none;
 }
 
-html[data-sap-ui-browser^="ie"].sap-desktop {
-	.sapSuiteILCInteractionArea, .sapSuiteILCBackgroundArea {
-		top: -1.999rem;
-	}
-}
-
 .sapSuiteILCBackgroundArea {
 	z-index: 0;
 }
@@ -132,32 +144,38 @@ html.sap-phone .sapSuiteILC:focus,
 html.sap-desktop .sapSuiteILC.sapSuiteILCNonInteractive .sapSuiteILCInteractionArea:focus {
 	outline: none;
 }
+
 .sapSuiteILCInteraction {
 	height: 100%;
 	width: 100%;
 	position: absolute;
 	overflow: hidden;
 }
+
 .sapSuiteILCTextElement {
 	position: absolute;
 	left: 50%;
 	font-size: @sapMFontMediumSize;
 }
+
 .sapSuiteILCSmallFont .sapSuiteILCTextElement {
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 }
 
 .sapSuiteILCShiftBelow {
 	transform: translate(-50%, 150%);
 }
+
 .sapSuiteILCShiftAbove {
 	transform: translate(-50%, -50%);
 }
+
 .sapSuiteILCToplabel {
 	max-width: ~"calc(100% - 2px)"; /* 1pixel left + 1pixel right */
 	white-space: nowrap;
 	box-sizing: border-box;
 }
+
 .sapSuiteILCBottomText {
 	max-width: 100%;
 	bottom: -3rem;
@@ -166,12 +184,14 @@ html.sap-desktop .sapSuiteILC.sapSuiteILCNonInteractive .sapSuiteILCInteractionA
 	text-overflow: ellipsis;
 	transform: translate(-50%, 50%);
 }
+
 .sapSuiteILCSelected .sapSuiteILCTextElement {
 	font-weight: bold;
 }
+
 .sapSuiteILCBottomLabelArea {
 	position: absolute;
-	bottom: 0px;
+	bottom: 0;
 	height: 1.875rem;
 	border-top-width: 1px;
 	border-top-style: solid;
@@ -179,15 +199,19 @@ html.sap-desktop .sapSuiteILC.sapSuiteILCNonInteractive .sapSuiteILCInteractionA
 	left: 0.125rem;
 	right: 0.125rem;
 }
+
 .sapSuiteILCBottomLabelAreaNoDivider {
 	border-top-style: none;
 }
+
 .sapSuiteILCDivider {
 	stroke-width: 1px;
 }
+
 .sapSuiteILCNaPoint, .sapSuiteILCNaLabel {
 	bottom: 1%;
 }
+
 .sapSuiteILCDisabledOverlay {
 	position: absolute;
 	z-index: 2;
@@ -196,20 +220,24 @@ html.sap-desktop .sapSuiteILC.sapSuiteILCNonInteractive .sapSuiteILCInteractionA
 	left: 0;
 	bottom: 0;
 }
+
 .sapSuiteILCExpandedLabels .sapSuiteILCBottomText {
 	visibility: hidden;
 	transform: translateY(50%);
 }
+
 .sapSuiteILCExpandedLabels .sapSuiteILCSection:first-child .sapSuiteILCBottomText, .sapSuiteILCExpandedLabels .sapSuiteILCSection:last-child .sapSuiteILCBottomText {
 	visibility: inherit;
 	max-width: none;
 }
+
 .sapSuiteILCExpandedLabels .sapSuiteILCSection:last-child .sapSuiteILCBottomText {
 	text-align: right;
 	left: auto;
 	z-index: -1;
 	right: 0.125rem;
 }
+
 .sapSuiteILCExpandedLabels .sapSuiteILCSection:first-child .sapSuiteILCBottomText {
 	text-align: left;
 	left: 0.125rem;
@@ -217,17 +245,6 @@ html.sap-desktop .sapSuiteILC.sapSuiteILCNonInteractive .sapSuiteILCInteractionA
 	right: auto;
 }
 
-@_sap_suite_ui_microchart_InteractiveLineChart_LineColor:						@sapUiHighlight	;
-@_sap_suite_ui_microchart_InteractiveLineChart_SectionHoverBackground:			fade(@sapUiHighlight, 20);
-@_sap_suite_ui_microchart_InteractiveLineChart_SectionHoverBorder:				fade(@sapUiHighlight, 60);
-@_sap_suite_ui_microchart_InteractiveLineChart_SectionSelectedBackground:		fade(@sapUiBrand, 20);
-@_sap_suite_ui_microchart_InteractiveLineChart_SectionSelectedHoverBackground:	fade(@sapUiBrand, 40);
-@_sap_suite_ui_microchart_InteractiveLineChart_BottomLabelBorderColor:			@sapUiChartDataLineColor;
-@_sap_suite_ui_microchart_InteractiveLineChart_DividerColor:					@sapUiChartDataLineColor;
-@_sap_suite_ui_microchart_InteractiveLineChart_SelectedPointBorder:				fade(@sapUiHighlight, 20);
-@_sap_suite_ui_microchart_InteractiveLineChart_HoverPointBorder:				fade(@sapUiHighlight, 20);
-@_sap_suite_ui_microchart_InteractiveLineChart_SelectedHoverPointBorder:		fade(@sapUiHighlight, 40);
-
 .sapSuiteILC {
 	border: 1px dotted transparent;
 }
@@ -237,6 +254,7 @@ html.sap-desktop .sapSuiteILC.sapSuiteILCNonInteractive .sapSuiteILCInteractionA
 }
 
 .sapSuiteILCPoint {
+
 	&.sapSuiteILCSelected {
 		border-color: @_sap_suite_ui_microchart_InteractiveLineChart_SelectedPointBorder;
 	}
@@ -247,30 +265,32 @@ html.sap-desktop .sapSuiteILC.sapSuiteILCNonInteractive .sapSuiteILCInteractionA
 }
 
 .sapSuiteILCTextElement {
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 }
 
 .sapSuiteILCSection.sapSuiteILCSelected .sapSuiteILCTextElement {
-	color: @sapUiContentForegroundTextColor;
+	color: var(--sapContent_ForegroundTextColor);
 }
 
 html.sap-desktop .sapSuiteILC.sapSuiteILCNonInteractive .sapSuiteILCInteractionArea:focus,
 html.sap-tablet .sapSuiteILC:not(.sapSuiteILCNonInteractive) .sapSuiteILCInteractionArea:focus,
 html.sap-phone .sapSuiteILC:not(.sapSuiteILCNonInteractive) .sapSuiteILCInteractionArea:focus {
-	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 html.sap-desktop .sapSuiteILC:not(.sapSuiteILCNonInteractive) .sapSuiteILCSection:hover {
+
 	.sapSuiteILCBackgroundArea {
 		background-color: @_sap_suite_ui_microchart_InteractiveLineChart_SectionHoverBackground;
 		border: 1px solid @_sap_suite_ui_microchart_InteractiveLineChart_SectionHoverBorder;
 
 		.sapSuiteILCTextElement {
-			color: @sapUiContentForegroundTextColor;
+			color: var(--sapContent_ForegroundTextColor);
 		}
 	}
+
 	.sapSuiteILCTextElement {
-		color: @sapUiContentForegroundTextColor;
+		color: var(--sapContent_ForegroundTextColor);
 	}
 
 	.sapSuiteILCPoint {
@@ -282,8 +302,6 @@ html.sap-desktop .sapSuiteILC:not(.sapSuiteILCNonInteractive) .sapSuiteILCSectio
 	}
 }
 
-
-
 .sapSuiteILCSection.sapSuiteILCSelected .sapSuiteILCBackgroundArea {
 	background-color: @_sap_suite_ui_microchart_InteractiveLineChart_SectionSelectedBackground;
 }
@@ -297,13 +315,13 @@ html.sap-desktop .sapSuiteILC:not(.sapSuiteILCNonInteractive) .sapSuiteILCSectio
 }
 
 html.sap-desktop .sapSuiteILC:not(.sapSuiteILCNonInteractive) .sapSuiteILCInteractionArea:focus {
-	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 html.sap-desktop .sapSuiteILC:focus {
-	border-color: @sapUiContentFocusColor;
+	border-color: var(--sapContent_FocusColor);
 }
 
 .sapSuiteILCDivider {
 	stroke: @_sap_suite_ui_microchart_InteractiveLineChart_DividerColor;
-}
+}

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

@@ -1,7 +1,7 @@
-/* ==================================================================== */
-/* CSS for control sap.suite.ui.microchart/LineMicroChart               */
-/* Base Theme                                                           */
-/* ==================================================================== */
+/* ======================================================= */
+/* CSS for control sap.suite.ui.microchart/LineMicroChart  */
+/* Base theme                                              */
+/* ======================================================= */
 
 .sapSuiteLMC {
 	height: inherit;
@@ -19,8 +19,8 @@ html.sap-desktop .sapSuiteLMC:focus:not([tabindex]),
 }
 
 html.sap-desktop .sapSuiteLMC:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-  	outline-offset: 1px;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: 1px;
 }
 
 .sapSuiteLMCContentWrapper {
@@ -34,7 +34,7 @@ html.sap-desktop .sapSuiteLMC:focus {
 .sapSuiteLMCSvgCanvas {
 	position: relative;
 	width: 100%;
-	// margin to take up for size of the emphasized points (5.5px each side)
+	/* margin to take up for size of the emphasized points (5.5px each side) */
 	margin: 0.344rem;
 }
 
@@ -43,7 +43,7 @@ html.sap-desktop .sapSuiteLMC:focus {
 .sapSuiteLMCNoLabels .sapSuiteLMCLabel,
 .sapSuiteLMCNoLabels .sapSuiteLMCThresholdLabel,
 .sapSuiteLMCNoThresholdLabel .sapSuiteLMCThresholdLabel{
-  display: none;
+	display: none;
 }
 
 .sapSuiteLMCSvgElement {
@@ -88,34 +88,11 @@ html[dir=rtl] {
 	justify-content: space-between;
 }
 
-// for IE only, IE doesn't support text-align start/end
-// TODO can be removed when IE finally gets dropped
-html[data-sap-ui-browser^="ie"] {
-  .sapSuiteLMCLeftTopLabel,
-  .sapSuiteLMCLeftBottomLabel {
-	text-align: left;
-  }
-  .sapSuiteLMCRightTopLabel,
-  .sapSuiteLMCRightBottomLabel {
-	text-align: right;
-  }
-}
-
-html[dir=rtl][data-sap-ui-browser^="ie"] {
-  .sapSuiteLMCLeftTopLabel,
-  .sapSuiteLMCLeftBottomLabel {
-	text-align: right;
-  }
-  .sapSuiteLMCRightTopLabel,
-  .sapSuiteLMCRightBottomLabel {
-	text-align: left;
-  }
-}
-
 .sapSuiteLMCLeftTopLabel,
 .sapSuiteLMCLeftBottomLabel {
 	text-align: start;
 }
+
 .sapSuiteLMCRightTopLabel,
 .sapSuiteLMCRightBottomLabel {
 	text-align: end;
@@ -124,7 +101,7 @@ html[dir=rtl][data-sap-ui-browser^="ie"] {
 .sapSuiteLMCLabel {
 	font-size: @sapMFontMediumSize;
 	font-weight: normal;
-	color: @sapChart_Data_TextColor;
+	color: var(--sapChart_Data_TextColor);
 	width: 50%;
 	white-space: nowrap;
 	overflow: hidden;
@@ -133,8 +110,8 @@ html[dir=rtl][data-sap-ui-browser^="ie"] {
 
 .sapSuiteLMCThresholdLabelWrapper {
 	position: relative;
-	height: ~"calc(100% - 0.344rem)"; // to compensate for the sapSuiteLMCSvgCanvas margin
-	top: 0.172rem; // half of the margin
+	height: ~"calc(100% - 0.344rem)"; /* to compensate for the sapSuiteLMCSvgCanvas margin */
+	top: 0.172rem; /* half of the margin */
 	flex: 0 0 auto;
 	max-width: 50%;
 }
@@ -144,7 +121,7 @@ html[dir=rtl][data-sap-ui-browser^="ie"] {
 	border-color: @sapUiChartPaletteSemanticNeutralLight1;
 	border-style: solid;
 	border-width: 1px;
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 	font-size: 0.6875rem;
 	line-height: 0.6875rem;
 	height: 0.6875rem;
@@ -160,9 +137,10 @@ html[dir=rtl][data-sap-ui-browser^="ie"] {
 }
 
 .sapSuiteLMCLineThreshold {
-	stroke: @sapChart_LineColor_3;
+	stroke: var(--sapChart_LineColor_3);
 	stroke-width: 1px;
 }
+
 .sapSuiteLMCLine {
 	stroke-width: 0.125rem;
 }
@@ -192,11 +170,9 @@ html[dir=rtl][data-sap-ui-browser^="ie"] {
 	.sapSuiteBackgroundSemanticColor(sapSuiteLMCPoint);
 }
 
-// Line Colors
+/* Line Colors */
 .sapSuiteStrokeSemanticColor(sapSuiteLMCLine);
 
-
-
 /* Line Patterns */
 .sapSuiteLMCLineDashed {
 	stroke-dasharray: 5, 3;
@@ -209,13 +185,15 @@ html[dir=rtl][data-sap-ui-browser^="ie"] {
 
 /* Label Colors */
 .sapSuiteLMCLabelCritical {
-	color: @sapCriticalTextColor;
+	color: var(--sapCriticalTextColor);
 }
+
 .sapSuiteLMCLabelGood {
-	color: @sapPositiveTextColor;
+	color: var(--sapPositiveTextColor);
 }
+
 .sapSuiteLMCLabelError {
-	color: @sapNegativeTextColor;
+	color: var(--sapNegativeTextColor);
 }
 
 /* SIZES */
@@ -243,84 +221,99 @@ html.sapUiMedia-Std-Phone .sapSuiteLMC.sapSuiteLMCSizeAuto,
 }
 
 .sapSuiteLMC.sapSuiteLMCSizeXS {
-  height: 1.5rem;
-  width: 6rem;
-  .sapSuiteLMCVerticalAlignmentContainer {
-	height: initial;
-  }
+	height: 1.5rem;
+	width: 6rem;
+
+	.sapSuiteLMCVerticalAlignmentContainer {
+		height: initial;
+	}
 }
 
-// different possible looks that are changed base on the current height of the container
+/* different possible looks that are changed base on the current height of the container */
 .sapSuiteLMC.sapSuiteLMCLookM {
-  .sapSuiteLMCLabel {
-	font-size: @sapMFontSmallSize;
-  }
+
+	.sapSuiteLMCLabel {
+		font-size: var(--sapFontSmallSize);
+	}
 }
 
 .sapSuiteLMC.sapSuiteLMCLookS {
-  .sapSuiteLMCLabel {
-	font-size: @sapMFontSmallSize;
-  }
+
+	.sapSuiteLMCLabel {
+		font-size: var(--sapFontSmallSize);
+	}
 }
 
 .sapSuiteLMC.sapSuiteLMCLookXS {
-  .sapSuiteLMCLabel,
-  .sapSuiteLMCThresholdLabel {
-	display: none;
-  }
 
-  .sapSuiteLMCVerticalAlignmentContainer {
-	max-width: 12rem;
-  }
+	.sapSuiteLMCLabel,
+	.sapSuiteLMCThresholdLabel {
+		display: none;
+	}
 
-  .sapSuiteLMCPoint {
-	display: none;
-  }
+	.sapSuiteLMCVerticalAlignmentContainer {
+		max-width: 12rem;
+	}
 
-  .sapSuiteLMCSvgCanvas {
-	margin: 0;
-  }
+	.sapSuiteLMCPoint {
+		display: none;
+	}
+
+	.sapSuiteLMCSvgCanvas {
+		margin: 0;
+	}
 }
 
-// auto-create background color class with all different semantic colors
+/* auto-create background color class with all different semantic colors */
 .sapSuiteBackgroundSemanticColor(sapSuiteLMCBackground);
 
-// auto-create border-color class with all different semantic colors
+/* auto-create border-color class with all different semantic colors */
 .sapSuiteStrokeSemanticColor(sapSuiteLMCStroke);
 
 .sapSuiteLMCBorderSequence1 {
-	border-color: @sapChart_Sequence_1;
+	border-color: var(--sapChart_Sequence_1);
 }
+
 .sapSuiteLMCBorderSequence2 {
-	border-color: @sapChart_Sequence_2;
+	border-color: var(--sapChart_Sequence_2);
 }
+
 .sapSuiteLMCBorderSequence3 {
-	border-color: @sapChart_Sequence_3;
+	border-color: var(--sapChart_Sequence_3);
 }
+
 .sapSuiteLMCBorderSequence4 {
-	border-color: @sapChart_Sequence_4;
+	border-color: var(--sapChart_Sequence_4);
 }
+
 .sapSuiteLMCBorderSequence5 {
-	border-color: @sapChart_Sequence_5;
+	border-color: var(--sapChart_Sequence_5);
 }
+
 .sapSuiteLMCBorderSequence6 {
-	border-color: @sapChart_Sequence_6;
+	border-color: var(--sapChart_Sequence_6);
 }
+
 .sapSuiteLMCBorderSequence7 {
-	border-color: @sapChart_Sequence_7;
+	border-color: var(--sapChart_Sequence_7);
 }
+
 .sapSuiteLMCBorderSequence8 {
-	border-color: @sapChart_Sequence_8;
+	border-color: var(--sapChart_Sequence_8);
 }
+
 .sapSuiteLMCBorderSequence9 {
-	border-color: @sapChart_Sequence_9;
+	border-color: var(--sapChart_Sequence_9);
 }
+
 .sapSuiteLMCBorderSequence10 {
-	border-color: @sapChart_Sequence_10;
+	border-color: var(--sapChart_Sequence_10);
 }
+
 .sapSuiteLMCBorderSequence11 {
-	border-color: @sapChart_Sequence_11;
+	border-color: var(--sapChart_Sequence_11);
 }
+
 .sapSuiteLMCBorderSequence12 {
-	border-color: @sapChart_Sequence_12;
+	border-color: var(--sapChart_Sequence_12);
 }