@openui5/themelib_sap_horizon 1.132.1 → 1.134.0

package/src/sap/m/themes/sap_horizon_hcb/ObjectStatus.less

@@ -90,6 +90,17 @@
 	line-height: 0.875rem;
 }
 
+.sapMObjStatus.sapMLnkLargeReactiveArea:not(.sapMObjectStatusLarge):not(.sapMObjStatusInverted) {
+	.sapMObjStatusTitle,
+	.sapMObjStatusIcon .sapUiIcon,
+	.sapMObjStatusText {
+		line-height: 1.5rem;
+	}
+	.sapMObjStatusIcon {
+		height: 1.5rem;
+	}
+}
+
 .sapMObjectStatusLarge:not(.sapMObjStatusInverted) {
 
 	.sapMObjStatusTitle,
@@ -415,154 +426,154 @@
 
 /* Second set of inverted indication colors regular state */
 .sapMObjStatusInverted.sapMObjStatusIndication11 .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_1_Background);
-	border-color: var(--sapIndicationColor_1_BorderColor);
+	background-color: var(--sapIndicationColor_1b_Background);
+	border-color: var(--sapIndicationColor_1b_BorderColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication11 .sapMObjStatusText,
 .sapMObjStatusInverted.sapMObjStatusIndication11 .sapMObjStatusIcon {
 	text-shadow: none;
-	color: var(--sapIndicationColor_1_TextColor);
+	color: var(--sapIndicationColor_1b_TextColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication12 .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_2_Background);
-	border-color: var(--sapIndicationColor_2_BorderColor);
+	background-color: var(--sapIndicationColor_2b_Background);
+	border-color: var(--sapIndicationColor_2b_BorderColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication12 .sapMObjStatusText,
 .sapMObjStatusInverted.sapMObjStatusIndication12 .sapMObjStatusIcon {
 	text-shadow: none;
-	color: var(--sapIndicationColor_2_TextColor);
+	color: var(--sapIndicationColor_2b_TextColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication13 .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_3_Background);
-	border-color: var(--sapIndicationColor_3_BorderColor);
+	background-color: var(--sapIndicationColor_3b_Background);
+	border-color: var(--sapIndicationColor_3b_BorderColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication13 .sapMObjStatusText,
 .sapMObjStatusInverted.sapMObjStatusIndication13 .sapMObjStatusIcon {
 	text-shadow: none;
-	color: var(--sapIndicationColor_3_TextColor);
+	color: var(--sapIndicationColor_3b_TextColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication14 .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_4_Background);
-	border-color: var(--sapIndicationColor_4_BorderColor);
+	background-color: var(--sapIndicationColor_4b_Background);
+	border-color: var(--sapIndicationColor_4b_BorderColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication14 .sapMObjStatusText,
 .sapMObjStatusInverted.sapMObjStatusIndication14 .sapMObjStatusIcon {
 	text-shadow: none;
-	color: var(--sapIndicationColor_4_TextColor);
+	color: var(--sapIndicationColor_4b_TextColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication15 .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_5_Background);
-	border-color: var(--sapIndicationColor_5_BorderColor);
+	background-color: var(--sapIndicationColor_5b_Background);
+	border-color: var(--sapIndicationColor_5b_BorderColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication15 .sapMObjStatusText,
 .sapMObjStatusInverted.sapMObjStatusIndication15 .sapMObjStatusIcon {
 	text-shadow: none;
-	color: var(--sapIndicationColor_5_TextColor);
+	color: var(--sapIndicationColor_5b_TextColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication16 .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_6_Background);
-	border-color: var(--sapIndicationColor_6_BorderColor);
+	background-color: var(--sapIndicationColor_6b_Background);
+	border-color: var(--sapIndicationColor_6b_BorderColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication16 .sapMObjStatusText,
 .sapMObjStatusInverted.sapMObjStatusIndication16 .sapMObjStatusIcon {
 	text-shadow: none;
-	color: var(--sapIndicationColor_6_TextColor);
+	color: var(--sapIndicationColor_6b_TextColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication17 .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_7_Background);
-	border-color: var(--sapIndicationColor_7_BorderColor);
+	background-color: var(--sapIndicationColor_7b_Background);
+	border-color: var(--sapIndicationColor_7b_BorderColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication17 .sapMObjStatusText,
 .sapMObjStatusInverted.sapMObjStatusIndication17 .sapMObjStatusIcon {
 	text-shadow: none;
-	color: var(--sapIndicationColor_7_TextColor);
+	color: var(--sapIndicationColor_7b_TextColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication18 .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_8_Background);
-	border-color: var(--sapIndicationColor_8_BorderColor);
+	background-color: var(--sapIndicationColor_8b_Background);
+	border-color: var(--sapIndicationColor_8b_BorderColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication18 .sapMObjStatusText,
 .sapMObjStatusInverted.sapMObjStatusIndication18 .sapMObjStatusIcon {
 	text-shadow: none;
-	color: var(--sapIndicationColor_8_TextColor);
+	color: var(--sapIndicationColor_8b_TextColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication19 .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_9_Background);
-	border-color: var(--sapIndicationColor_9_BorderColor);
+	background-color: var(--sapIndicationColor_9b_Background);
+	border-color: var(--sapIndicationColor_9b_BorderColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication19 .sapMObjStatusText,
 .sapMObjStatusInverted.sapMObjStatusIndication19 .sapMObjStatusIcon {
 	text-shadow: none;
-	color: var(--sapIndicationColor_9_TextColor);
+	color: var(--sapIndicationColor_9b_TextColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication20 .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_10_Background);
-	border-color: var(--sapIndicationColor_10_BorderColor);
+	background-color: var(--sapIndicationColor_10b_Background);
+	border-color: var(--sapIndicationColor_10b_BorderColor);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication20 .sapMObjStatusText,
 .sapMObjStatusInverted.sapMObjStatusIndication20 .sapMObjStatusIcon {
 	text-shadow: none;
-	color: var(--sapIndicationColor_10_TextColor);
+	color: var(--sapIndicationColor_10b_TextColor);
 }
 
 /* Second set of inverted indication colors hovered state */
 .sapMObjStatusInverted.sapMObjStatusIndication11 .sapMObjStatusLink:hover > .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_1_Hover_Background);
+	background-color: var(--sapIndicationColor_1b_Hover_Background);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication12 .sapMObjStatusLink:hover > .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_2_Hover_Background);
+	background-color: var(--sapIndicationColor_2b_Hover_Background);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication13 .sapMObjStatusLink:hover > .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_3_Hover_Background);
+	background-color: var(--sapIndicationColor_3b_Hover_Background);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication14 .sapMObjStatusLink:hover > .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_4_Hover_Background);
+	background-color: var(--sapIndicationColor_4b_Hover_Background);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication15 .sapMObjStatusLink:hover > .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_5_Hover_Background);
+	background-color: var(--sapIndicationColor_5b_Hover_Background);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication16 .sapMObjStatusLink:hover > .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_6_Hover_Background);
+	background-color: var(--sapIndicationColor_6b_Hover_Background);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication17 .sapMObjStatusLink:hover > .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_7_Hover_Background);
+	background-color: var(--sapIndicationColor_7b_Hover_Background);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication18 .sapMObjStatusLink:hover > .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_8_Hover_Background);
+	background-color: var(--sapIndicationColor_8b_Hover_Background);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication19 .sapMObjStatusLink:hover > .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_9_Hover_Background);
+	background-color: var(--sapIndicationColor_9b_Hover_Background);
 }
 
 .sapMObjStatusInverted.sapMObjStatusIndication20 .sapMObjStatusLink:hover > .sapMObjStatusWrapper {
-	background-color: var(--sapIndicationColor_10_Hover_Background);
+	background-color: var(--sapIndicationColor_10b_Hover_Background);
 }
 
 html.sap-desktop .sapMObjStatusActive:focus .sapMObjStatusLink::after {

package/src/sap/m/themes/sap_horizon_hcb/Panel.less

@@ -25,12 +25,12 @@
 .sapMPanelWrappingDiv,
 /* do not want border if expanded and if only header text */
 .sapMPanelWrappingDivTb {
-	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	border-bottom: @sapGroup_TitleBorderWidth solid @sapUiGroupTitleBorderColor;
 }
 
 .sapMPanelWrappingDiv.sapMPanelWrappingDivExpanded,
 .sapMPanelWrappingDivTb.sapMPanelWrappingDivTbExpanded {
-	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	border-bottom: @sapGroup_TitleBorderWidth solid @sapUiGroupTitleBorderColor;
 }
 
 .sapMPanelWrappingDivTb .sapMTB.sapMTBStandard {
@@ -38,7 +38,7 @@
 }
 
 .sapMPanelContent:not(.sapMPanelBGTransparent) {
-	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	border-bottom: @sapGroup_TitleBorderWidth solid @sapUiGroupTitleBorderColor;
 }
 
 .sapMPanelContent {

package/src/sap/m/themes/sap_horizon_hcb/Popover.less

@@ -3,6 +3,8 @@
 /* Horizon High Contrast Black theme  */
 /* ================================== */
 
+@_sap_m_Popover_ThickShadowSize: 0.125rem;
+
 .sapMPopoverArr::after {
 	background: var(--sapGroup_ContentBackground);
 	box-shadow: var(--sapContent_Shadow2);

package/src/sap/m/themes/sap_horizon_hcb/ProgressIndicator.less

@@ -235,7 +235,7 @@
 
 /* Condensed */
 .sapUiSizeCondensed .sapUiTableDataCell .sapMPI:not(.sapMPIDisplayOnly) {
-	padding: 0.4375rem 0;
+	padding: 0.375rem 1.25rem 0.375rem 0;
 	margin: 0;
 }
 

package/src/sap/m/themes/sap_horizon_hcb/Select.less

@@ -3,36 +3,34 @@
 /* Horizon High Contrast Black theme  */
 /* ================================== */
 
-/* ------------------------------ */
 /* field                          */
-/* ------------------------------ */
 
 .sapMSlt.sapMSltIconOnly {
 	border-radius: 0.365rem;
 }
 
 .sapMSlt {
-	height: @sapUiElementHeight;
+	height: var(--sapElement_Height);
 }
 
 .sapUiSizeCompact .sapMSlt {
-	height: @sapUiElementCompactHeight;
+	height: var(--sapElement_Compact_Height);
 }
 
-/* arrow styles*/
+/* arrow styles */
 
 .sapMSlt > .sapMSltArrow {
 	line-height: 2.125rem;
 }
 
 .sapMSltArrow {
-    width: 2.25rem;
-    height: 2.25rem;
+	width: 2.25rem;
+	height: 2.25rem;
 }
 
 .sapUiSizeCompact .sapMSltArrow {
-    width: 2rem;
-    height: 1.625rem;
+	width: 2rem;
+	height: 1.625rem;
 }
 
 /* hover and focus */
@@ -42,25 +40,25 @@
 }
 
 .sapMSlt.sapMSltDefault.sapMSltFocused:not(.sapMSltIconOnly):not(.sapMSltPressed) {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentContrastFocusColor;
-	outline-offset:  calc(-2.5 * @sapUiContentFocusWidth);
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
+	outline-offset: ~"calc(-2.5 * var(--sapContent_FocusWidth))";
 }
 
 html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltInformation),
 .sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltInformation):hover {
-	border-color: @sapUiFieldHoverBorderColor;
+	border-color: var(--sapField_Hover_BorderColor);
 }
 
 /* FIX: In FF bottom outline-offset is not working as expected when Select is in sap.m.Bar and is left-aligned */
 
-html[data-sap-ui-browser^="ff"] .sapMBar .sapMSlt.sapMSltFocused {
+html[data-sap-ui-browser^='ff'] .sapMBar .sapMSlt.sapMSltFocused {
 	line-height: 0;
 }
 
 /* icon only hover and focus */
 
 .sapMSlt.sapMSltIconOnly.sapMSltHoverable:hover {
-	background: @sapUiButtonLiteHoverBackground;
+	background: var(--sapButton_Lite_Hover_Background);
 
 	&.sapMSltFocused:not(.sapMSltPressed) {
 		border-color: transparent;
@@ -91,11 +89,11 @@ html[data-sap-ui-browser^="ff"] .sapMBar .sapMSlt.sapMSltFocused {
 }
 
 .sapMSltInformation {
-	border-color: @sapUiFieldWarningColor;
+	border-color: var(--sapField_WarningColor);
 }
 
 .sapMSltLabelState, .sapMSltArrowState {
-    line-height: initial;
+	line-height: initial;
 }
 
 .sapUiSizeCompact .sapMSltLabelState,
@@ -109,26 +107,25 @@ html[data-sap-ui-browser^="ff"] .sapMBar .sapMSlt.sapMSltFocused {
 	opacity: 0.5;
 }
 
-/* ------------------------------ */
 /* picker                         */
-/* ------------------------------ */
 @_sap_m_SltPicker_SubHeader_BoxShadow_Bottom: 0.125rem;
+
 div.sapMSltPicker {
 	border-radius: 0.125rem;
 
 	.sapMBar {
-		box-shadow: inset 0 -@_sap_m_SltPicker_SubHeader_BoxShadow_Bottom @sapUiPageHeaderBorderColor;
+		box-shadow: inset 0 -@_sap_m_SltPicker_SubHeader_BoxShadow_Bottom var(--sapPageHeader_BorderColor);
 	}
 
 	.sapMSltPickerValueState {
 		padding-left: 1.5rem;
-		box-shadow:inset 0 -0.125rem @sapUiPageHeaderBorderColor;
+		box-shadow:inset 0 -0.125rem var(--sapPageHeader_BorderColor);
 		line-height: 1rem;
 		padding-right: 0.5rem;
 		padding-left: 2rem;
 
 		&::before {
-			font-family: "SAP-icons";
+			font-family: var(--sapContent_IconFontFamily);
 			vertical-align: middle;
 			font-size: 1rem;
 			position: absolute;
@@ -155,23 +152,21 @@ div.sapMSltPicker {
 }
 
 .sapMSlt > .sapMSltArrow {
-	border-left: 0.0625rem solid @sapUiListSelectionBorderColor;
+	border-left: 0.0625rem solid var(--sapList_SelectionBorderColor);
 }
 
 /* pressed */
 
 .sapMSltPressed > .sapMSltArrow:hover {
-	background: @sapUiButtonLiteHoverBackground;
+	background: var(--sapButton_Lite_Hover_Background);
 }
 
-/* ====================================================== */
 /* Select inside a Bar: all contexts                      */
-/* ====================================================== */
 
 /* focus: Select IconOnly in all contexts get dotted outline */
 
 html.sap-desktop .sapMSltIconOnly.sapMSltFocused:not(.sapMSltExpanded) {
-	outline: 0.125rem dotted @sapUiContentFocusColor;
+	outline: 0.125rem dotted var(--sapContent_FocusColor);
 	outline-offset: -0.125rem;
 	border-color: transparent;
 }
@@ -182,15 +177,15 @@ html.sap-desktop .sapMHeader-CTX .sapMSltIconOnly:hover:not(.sapMSltPressed):not
 html.sap-desktop .sapMSubHeader-CTX .sapMSltIconOnly:hover:not(.sapMSltPressed):not(.sapMTSSlt),
 html.sap-desktop .sapMFooter-CTX .sapMSltIconOnly:hover:not(.sapMSltPressed):not(.sapMTSSlt),
 html.sap-desktop .sapMSltIconOnly:hover:not(.sapMSltPressed):not(.sapMTSSlt) {
-	color: @sapUiContentIconColor;
-	background-color: @sapUiButtonLiteHoverBackground;
+	color: var(--sapContent_IconColor);
+	background-color: var(--sapButton_Lite_Hover_Background);
 }
 
 .sapMSltHoverable:not(.sapMSltError):not(.sapMSltPressed):hover > .sapMSltArrow,
 .sapMSltPressed.sapMSltError > .sapMSltArrow {
-	background-color: @sapUiButtonLiteHoverBackground;
+	background-color: var(--sapButton_Lite_Hover_Background);
 }
 
 .sapMSltPressed:not(.sapMSltError) > .sapMSltArrow {
-	background: @sapUiListSelectionBackgroundColor;
+	background: var(--sapList_SelectionBackgroundColor);
 }

package/src/sap/m/themes/sap_horizon_hcb/SlideTile.less

@@ -12,7 +12,7 @@
 	top: 0;
 	right: 0;
 	bottom: 0;
-	border: 0.125rem dotted @sapUiContentFocusColor;
+	border: 0.125rem dotted var(--sapContent_FocusColor);
 }
 
 .sapMST:focus:not([tabindex]) {
@@ -21,28 +21,28 @@
 
 /* Bulleted indicator of multiple tiles*/
 .sapMSTBulleted .sapMSTIndicator {
-	border: solid 0.0625rem @sapTile_OverlayForegroundColor;
+	border: solid 0.0625rem var(--sapTile_OverlayForegroundColor);
 	opacity: 0.6;
-	box-shadow : 0 0 0.125rem @sapContent_ShadowColor;
+	box-shadow: 0 0 0.125rem var(--sapContent_ShadowColor);
 	margin: 0 0.094rem;
 }
 
 .sapMSTBulleted .sapMSTIndicator.sapMSTActive {
-	background: @sapTile_OverlayForegroundColor;
-	box-shadow: 0 0 0.063rem @sapContent_ShadowColor;
+	background: var(--sapTile_OverlayForegroundColor);
+	box-shadow: 0 0 0.063rem var(--sapContent_ShadowColor);
 }
 
 .sapMST .sapMSTIconDisplayArea {
-	background-color: @sapButton_Background;
-	border: 0.0625rem solid @sapButton_BorderColor;
+	background-color: var(--sapButton_Background);
+	border: 0.0625rem solid var(--sapButton_BorderColor);
 }
 
 .sapMST .sapMSTIconNestedArea .sapUiIcon{
-	color: @sapButton_IconColor !important;
+	color: var(--sapButton_IconColor) !important;
 }
 
 .sapMST .sapMSTIconClickTapArea:hover ~.sapMSTIconDisplayArea {
-	background-color: @sapButton_Active_Background;
+	background-color: var(--sapButton_Active_Background);
 }
 
 .sapMST .sapMGT {
@@ -51,41 +51,49 @@
 
 .sapMST:hover {
 	box-shadow: none;
-	.sapMSTFocusDiv{
+
+	.sapMSTFocusDiv {
 		outline: 0.1875rem solid;
 	}
 }
+
 .sapMST .sapMGT:active .sapMGTFocusDiv {
 	border: none;
 }
 
 .sapMST.sapMSTIconPressed .sapMSTIconClickTapArea:hover ~.sapMSTIconDisplayArea {
-	border-color: @sapButton_Active_BorderColor;
-	background-color: @sapButton_Active_Background;
+	border-color: var(--sapButton_Active_BorderColor);
+	background-color: var(--sapButton_Active_Background);
 }
 
-.sapMST.sapMSTIconPressed{
-	.sapMSTIconNestedArea{
-		.sapUiIcon{
-			color: @sapButton_Active_TextColor !important;
+.sapMST.sapMSTIconPressed {
+
+	.sapMSTIconNestedArea {
+
+		.sapUiIcon {
+			color: var(--sapButton_Active_TextColor) !important;
 		}
 	}
 }
 
-.sapMSTWrapper>.sapMGT{
-	&:not(.sapMGTStateDisabled):hover, &:not(.sapMGTStateDisabled):active {
+.sapMSTWrapper > .sapMGT {
+
+	&:not(.sapMGTStateDisabled):hover,
+	&:not(.sapMGTStateDisabled):active {
 		border: none !important;
 	}
 }
 
 .sapMST .sapMSTIconNestedArea {
+
 	.sapUiIcon {
 		top: 0.1rem;
 		right: 0.04rem
 	}
 }
 
-.sapMST:not(.sapMSTPauseIcon) .sapMSTIconNestedArea{
+.sapMST:not(.sapMSTPauseIcon) .sapMSTIconNestedArea {
+
 	.sapUiIcon {
 		top: 0.05rem;
 		left: 0.1rem;