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

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

@@ -1,7 +1,7 @@
-/* =============================================================== */
-/* CSS for control sap.suite.ui.microchart/DeltaMicroChart.control */
-/* Base Theme                                                      */
-/* =============================================================== */
+/* ================================================================ */
+/* CSS for control sap.suite.ui.microchart/DeltaMicroChart.control  */
+/* Base theme                                                       */
+/* ================================================================ */
 
 .sapSuiteDMC {
 	outline: none;
@@ -27,11 +27,11 @@ html.sap-desktop .sapSuiteDMC:focus:not([tabindex]),
 }
 
 html.sap-desktop .sapSuiteDMC:focus {
-	outline:  @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-  	outline-offset: 1px;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: 1px;
 }
 
-// sizes
+/* sizes */
 .sapSuiteDMC.sapSuiteDMCSizeResponsive {
 	height: 100%;
 	width: 100%;
@@ -61,6 +61,7 @@ html.sapUiMedia-Std-Phone .sapSuiteDMC.sapSuiteDMCSizeAuto,
 }
 
 .sapSuiteDMC.sapSuiteDMCNoRightLabels{
+
 	.sapSuiteDMCLbls,
 	.sapSuiteDMCSpacerRight {
 		display: none;
@@ -73,6 +74,7 @@ html.sapUiMedia-Std-Phone .sapSuiteDMC.sapSuiteDMCSizeAuto,
 }
 
 .sapSuiteDMC:not(.sapSuiteDMCWideMode) {
+
 	.sapSuiteDMCSpacerLeft,
 	.sapSuiteDMCWideTitles {
 		display: none;
@@ -80,6 +82,7 @@ html.sapUiMedia-Std-Phone .sapSuiteDMC.sapSuiteDMCSizeAuto,
 }
 
 .sapSuiteDMC.sapSuiteDMCWideMode {
+
 	.sapSuiteDMCCnt .sapSuiteDMCLabel {
 		display: none;
 	}
@@ -91,7 +94,7 @@ html.sapUiMedia-Std-Phone .sapSuiteDMC.sapSuiteDMCSizeAuto,
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-size: @sapMFontMediumSize;
-	color: @sapChart_Data_TextColor
+	color: var(--sapChart_Data_TextColor);
 }
 
 .sapSuiteDMCLbls {
@@ -212,6 +215,7 @@ html[dir=rtl] .sapSuiteDMCTitle {
 
 .sapSuiteDMCBarInternal.sapSuiteDMCDirectionLeft {
 	margin-right: 2px;
+
 	.sapSuiteDMCBarSizeSmaller:not(.sapSuiteDMCBarDeltaMaxDelta) & {
 		margin-right: 1px;
 	}
@@ -219,6 +223,7 @@ html[dir=rtl] .sapSuiteDMCTitle {
 
 .sapSuiteDMCBarInternal.sapSuiteDMCDirectionRight {
 	margin-left: 2px;
+
 	.sapSuiteDMCBarSizeSmaller:not(.sapSuiteDMCBarDeltaMaxDelta) & {
 		margin-left: 1px;
 	}
@@ -287,6 +292,7 @@ html[dir=rtl] .sapSuiteDMCTitle {
 }
 
 .sapSuiteDMCBar.sapSuiteDMCBarUniqueNonzero .sapSuiteDMCBarInternal {
+
 	&.sapSuiteDMCDirectionRight,
 	&.sapSuiteDMCDirectionLeft {
 		margin-left: .125rem;
@@ -294,10 +300,11 @@ html[dir=rtl] .sapSuiteDMCTitle {
 	}
 }
 
-// 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 */
 .sapSuiteDMC.sapSuiteDMCLookM {
+
 	.sapSuiteDMCLabel {
-		font-size: @sapMFontSmallSize;
+		font-size: var(--sapFontSmallSize);
 	}
 
 	&.sapSuiteDMCWideMode .sapSuiteDMCChart,
@@ -312,8 +319,9 @@ html[dir=rtl] .sapSuiteDMCTitle {
 }
 
 .sapSuiteDMC.sapSuiteDMCLookS {
+
 	.sapSuiteDMCLabel {
-		font-size: @sapMFontSmallSize;
+		font-size: var(--sapFontSmallSize);
 	}
 
 	.sapSuiteDMCBar {
@@ -336,8 +344,9 @@ html[dir=rtl] .sapSuiteDMCTitle {
 }
 
 .sapSuiteDMC.sapSuiteDMCLookXS {
+
 	.sapSuiteDMCLabel {
-		font-size: @sapMFontSmallSize;
+		font-size: var(--sapFontSmallSize);
 	}
 
 	.sapSuiteDMCBar {
@@ -367,6 +376,7 @@ html[dir=rtl] .sapSuiteDMCTitle {
 }
 
 .sapSuiteDMC.sapSuiteDMCNoLabels {
+
 	.sapSuiteDMCLbls,
 	.sapSuiteDMCLabel,
 	.sapSuiteDMCSpacer {
@@ -379,19 +389,19 @@ html[dir=rtl] .sapSuiteDMCTitle {
 }
 
 .sapSuiteDMCDelta.sapSuiteDMCSemanticColorNeutral {
-	color: @sapNeutralTextColor;
+	color: var(--sapNeutralTextColor);
 }
 
 .sapSuiteDMCDelta.sapSuiteDMCSemanticColorGood {
-	color: @sapPositiveTextColor;
+	color: var(--sapPositiveTextColor);
 }
 
 .sapSuiteDMCDelta.sapSuiteDMCSemanticColorCritical {
-	color: @sapCriticalTextColor;
+	color: var(--sapCriticalTextColor);
 }
 
 .sapSuiteDMCDelta.sapSuiteDMCSemanticColorError {
-	color: @sapNegativeTextColor;
+	color: var(--sapNegativeTextColor);
 }
 
 .sapSuiteDMCBarDeltaInt {
@@ -399,10 +409,10 @@ html[dir=rtl] .sapSuiteDMCTitle {
 }
 
 .sapSuiteDMCBarDeltaStripe {
-	background-color: @sapChart_LineColor_3;
+	background-color: var(--sapChart_LineColor_3);
 }
 
 .sapSuiteDMCBarInternal {
-	background-color: @sapChart_Sequence_Neutral;
+	background-color: var(--sapChart_Sequence_Neutral);
 	height: 100%;
 }

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

@@ -1,311 +1,338 @@
-/* ============================================================ */
-/* CSS for control sap.suite.ui.microchart/HarveyBallMicroChart */
-/* Base Theme                                                   */
-/* ============================================================ */
+/* ============================================================= */
+/* CSS for control sap.suite.ui.microchart/HarveyBallMicroChart  */
+/* Base theme                                                    */
+/* ============================================================= */
 
 .sapSuiteHBMC {
-  outline: none;
-  position: relative;
-  display: flex;
-  align-items: center;
+	outline: none;
+	position: relative;
+	display: flex;
+	align-items: center;
 }
 
 html.sap-desktop .sapSuiteHBMC:focus:not([tabindex]),
 .sapSuiteHBMC:focus:not([tabindex]) {
-  outline: none;
+	outline: none;
 }
 
 html.sap-desktop .sapSuiteHBMC:focus {
-  outline:  @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-  outline-offset: 1px;
+	outline:  var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: 1px;
 }
 
 .sapSuiteHBMCVerticalAlignmentContainer {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  min-width: 4rem;
-  max-width: 20rem;
-  min-height: 1.125rem;
-  max-height: 5.875rem;
-  display: flex;
-  align-items: center;
+	width: 100%;
+	height: 100%;
+	position: relative;
+	min-width: 4rem;
+	max-width: 20rem;
+	min-height: 1.125rem;
+	max-height: 5.875rem;
+	display: flex;
+	align-items: center;
 }
 
 .sapSuiteHBMCChart {
-  height: 100%;
-  flex: 0 0 auto;
+	height: 100%;
+	flex: 0 0 auto;
 }
 
 .sapSuiteHBMCChart .sapSuiteHBMCChartSvg {
-  height: 100%;
-  width: auto;
+	height: 100%;
+	width: auto;
 }
 
 .sapSuiteHBMC .sapSuiteHBMCTextContainer {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  padding-left: 4%;
+	flex: 0 0 auto;
+	display: flex;
+	flex-direction: column;
+	padding-left: 4%;
 }
 
 .sapSuiteHBMCVerticalAlignmentContainer.sapSuiteHBMCAlignLeft {
-  justify-content: flex-start;
+	justify-content: flex-start;
 }
 
 .sapSuiteHBMCVerticalAlignmentContainer.sapSuiteHBMCAlignCenter {
-  justify-content: center;
+	justify-content: center;
 }
 
 .sapSuiteHBMCVerticalAlignmentContainer.sapSuiteHBMCAlignRight {
-  justify-content: flex-end;
+	justify-content: flex-end;
 }
 
 .sapSuiteHBMC .sapSuiteHBMCTextContainerHide {
-  display: none;
+	display: none;
 }
 
 .sapSuiteHBMC:focus:not([tabindex]) {
-  outline: none;
+	outline: none;
 }
 
 .sapSuiteHBMC.sapSuiteHBMCSizeResponsive {
-  height: 100%;
-  width: 100%;
+	height: 100%;
+	width: 100%;
 }
 
 .sapSuiteHBMC .sapSuiteHBMCValueContainer {
-  font-weight: bold;
+	font-weight: bold;
 }
 
 .sapSuiteHBMC.sapSuiteHBMCSizeL {
-  height: 5.875rem;
-  width: 12rem;
+	height: 5.875rem;
+	width: 12rem;
 }
 
 html.sap-desktop .sapSuiteHBMC.sapSuiteHBMCSizeAuto,
 html.sap-tablet .sapSuiteHBMC.sapSuiteHBMCSizeAuto,
 .sapSuiteHBMC.sapSuiteHBMCSizeM {
-  height: 4.5rem;
-  width: 10.5rem;
+	height: 4.5rem;
+	width: 10.5rem;
 }
 
 .sapSuiteHBMC.sapSuiteHBMCLookL,
 .sapSuiteHBMC.sapSuiteHBMCLookM {
-  & .sapSuiteHBMCValueContainer {
-	font-size: 1.25rem;
-	line-height: 1.25rem;
-	padding-bottom: 0.34375rem;
-	font-family: @sapUiFontHeaderFamily;
-  }
 
-  & .sapSuiteHBMCTotalContainer {
-	font-size: 1rem;
-	line-height: 1rem;
-	padding-top: 0.34375rem;
-  }
+	& .sapSuiteHBMCValueContainer {
+		font-size: 1.25rem;
+		line-height: 1.25rem;
+		padding-bottom: 0.34375rem;
+		font-family: var(--sapFontHeaderFamily);
+	}
+
+	& .sapSuiteHBMCTotalContainer {
+		font-size: 1rem;
+		line-height: 1rem;
+		padding-top: 0.34375rem;
+	}
 }
 
 html.sap-phone .sapSuiteHBMC.sapSuiteHBMCSizeAuto,
 .sapSuiteHBMC.sapSuiteHBMCSizeS {
-  height: 3.5rem;
-  width: 8.25rem;
+	height: 3.5rem;
+	width: 8.25rem;
 }
 
 .sapSuiteHBMC.sapSuiteHBMCLookS {
-  & .sapSuiteHBMCValueContainer {
-	font-size: 1rem;
-	line-height: 1rem;
-	padding-bottom: 0.28125rem;
-	font-family: @sapUiFontFamily;
-  }
 
-  & .sapSuiteHBMCTotalContainer {
-	font-size: 0.875rem;
-	line-height: 0.875rem;
-	padding-top: 0.28125rem;
-  }
+	& .sapSuiteHBMCValueContainer {
+		font-size: 1rem;
+		line-height: 1rem;
+		padding-bottom: 0.28125rem;
+		font-family: var(--sapFontFamily);
+	}
+
+	& .sapSuiteHBMCTotalContainer {
+		font-size: 0.875rem;
+		line-height: 0.875rem;
+		padding-top: 0.28125rem;
+	}
 }
 
 .sapSuiteHBMC.sapSuiteHBMCSizeXS {
-  height: 1.5rem;
-  width: 6rem;
+	height: 1.5rem;
+	width: 6rem;
 }
 
 .sapSuiteHBMC.sapSuiteHBMCLookXS {
-  & .sapSuiteHBMCBackgroundCircle {
-	visibility: hidden;
-  }
 
-  & .sapSuiteHBMCSegment {
-	stroke: none;
-  }
+	& .sapSuiteHBMCBackgroundCircle {
+		visibility: hidden;
+	}
 
-  & .sapSuiteHBMCValueContainer {
-	font-size: 0.875rem;
-	line-height: 0.875rem;
-	font-family: @sapUiFontFamily;
-  }
+	& .sapSuiteHBMCSegment {
+		stroke: none;
+	}
 
-  & .sapSuiteHBMCTotalContainer {
-	display: none;
-  }
+	& .sapSuiteHBMCValueContainer {
+		font-size: 0.875rem;
+		line-height: 0.875rem;
+		font-family: var(--sapFontFamily);
+	}
+
+	& .sapSuiteHBMCTotalContainer {
+		display: none;
+	}
 }
 
 .sapSuiteHBMCValue,
 .sapSuiteHBMCValueScale,
 .sapSuiteHBMCTotal,
 .sapSuiteHBMCTotalScale {
-  white-space: normal;
-  word-wrap: break-word;
+	white-space: normal;
+	word-wrap: break-word;
 }
 
 html[dir=ltr] .sapSuiteHBMCTotalScale,
 html[dir=ltr] .sapSuiteHBMCValueScale {
-  margin-left: 0.2rem;
+	margin-left: 0.2rem;
 }
 
 html[dir=rtl] .sapSuiteHBMCTotalScale,
 html[dir=rtl] .sapSuiteHBMCValueScale {
-  margin-right: 0.2rem;
+	margin-right: 0.2rem;
 }
 
 /* Containers CSS */
 .sapSuiteHBMCValueContainer {
-  flex: 0 1 auto;
-  color: @sapUiTileTextColor
+	flex: 0 1 auto;
+	color: var(--sapTile_TextColor)
 }
 
 .sapSuiteHBMCTotalContainer {
-  flex: 0 1 auto;
-  color: @sapChart_Data_TextColor;
+	flex: 0 1 auto;
+	color: var(--sapChart_Data_TextColor);
 }
 
 .sapSuiteHBMCSegment {
-  stroke-width: 0.125rem;
+	stroke-width: 0.125rem;
 }
 
 .sapSuiteHBMCBackgroundCircle {
-  fill: @sapContent_ForegroundColor;
-  stroke: @sapContent_ForegroundBorderColor;
+	fill: var(--sapContent_ForegroundColor);
+	stroke: var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteHBMCSemanticColorNeutral {
-  &.sapSuiteHBMCValueContainer {
-	color: @sapNeutralTextColor;
-  }
-  &.sapSuiteHBMCValueScale, &.sapSuiteHBMCValue {
-	color: @sapNeutralTextColor;
-  }
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorNeutral;
-  }
+
+	&.sapSuiteHBMCValueContainer {
+		color: var(--sapNeutralTextColor);
+	}
+
+	&.sapSuiteHBMCValueScale, &.sapSuiteHBMCValue {
+		color: var(--sapNeutralTextColor);
+	}
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorNeutral;
+	}
 }
 
 .sapSuiteHBMCSemanticColorGood {
-  &.sapSuiteHBMCValueContainer {
-	color: @sapPositiveTextColor;
-  }
-  &.sapSuiteHBMCValueScale, &.sapSuiteHBMCValue {
-	color: @sapPositiveTextColor;
-  }
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorGood;
-  }
+
+	&.sapSuiteHBMCValueContainer {
+		color: var(--sapPositiveTextColor);
+	}
+
+	&.sapSuiteHBMCValueScale, &.sapSuiteHBMCValue {
+		color: var(--sapPositiveTextColor);
+	}
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorGood;
+	}
 }
 
 .sapSuiteHBMCSemanticColorCritical {
-  &.sapSuiteHBMCValueContainer {
-	color: @sapCriticalTextColor;
-  }
-  &.sapSuiteHBMCValueScale, &.sapSuiteHBMCValue {
-	color: @sapCriticalTextColor;
-  }
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorCritical;
-  }
+
+	&.sapSuiteHBMCValueContainer {
+		color: var(--sapCriticalTextColor);
+	}
+
+	&.sapSuiteHBMCValueScale, &.sapSuiteHBMCValue {
+		color: var(--sapCriticalTextColor);
+	}
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorCritical;
+	}
 }
 
 .sapSuiteHBMCSemanticColorError {
-  &.sapSuiteHBMCValueContainer {
-	color: @sapNegativeTextColor;
-  }
-  &.sapSuiteHBMCValueScale, &.sapSuiteHBMCValue {
-	color: @sapNegativeTextColor;
-  }
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorError;
-  }
+
+	&.sapSuiteHBMCValueContainer {
+		color: var(--sapNegativeTextColor);
+	}
+
+	&.sapSuiteHBMCValueScale, &.sapSuiteHBMCValue {
+		color: var(--sapNegativeTextColor);
+	}
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorError;
+	}
 }
 
 .sapSuiteHBMCSemanticColorSequence1 {
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorSequence1;
-  }
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorSequence1;
+	}
 }
 
 .sapSuiteHBMCSemanticColorSequence2 {
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorSequence2;
-  }
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorSequence2;
+	}
 }
 
 .sapSuiteHBMCSemanticColorSequence3 {
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorSequence3;
-  }
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorSequence3;
+	}
 }
 
 .sapSuiteHBMCSemanticColorSequence4 {
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorSequence4;
-  }
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorSequence4;
+	}
 }
 
 .sapSuiteHBMCSemanticColorSequence5 {
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorSequence5;
-  }
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorSequence5;
+	}
 }
 
 .sapSuiteHBMCSemanticColorSequence6 {
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorSequence6;
-  }
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorSequence6;
+	}
 }
 
 .sapSuiteHBMCSemanticColorSequence7 {
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorSequence7;
-  }
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorSequence7;
+	}
 }
 
 .sapSuiteHBMCSemanticColorSequence8 {
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorSequence8;
-  }
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorSequence8;
+	}
 }
 
 .sapSuiteHBMCSemanticColorSequence9 {
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorSequence9;
-  }
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorSequence9;
+	}
 }
 
 .sapSuiteHBMCSemanticColorSequence10 {
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorSequence10;
-  }
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorSequence10;
+	}
 }
 
 .sapSuiteHBMCSemanticColorSequence11 {
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorSequence11;
-  }
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorSequence11;
+	}
 }
 
 .sapSuiteHBMCSemanticColorSequence12 {
-  &.sapSuiteHBMCSegment {
-	fill: @sapSuiteMCSemanticColorSequence12;
-  }
+
+	&.sapSuiteHBMCSegment {
+		fill: @sapSuiteMCSemanticColorSequence12;
+	}
 }