@openui5/themelib_sap_horizon 1.134.0 → 1.136.0

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

@@ -10,57 +10,57 @@
 .sapMValueStateHeaderRoot {
 	padding: 0.5rem 0.5rem 0.5rem 1.875rem;
 	line-height: 1rem;
-	border-bottom: 2px solid @sapUiFieldBorderColor;
+	border-bottom: 2px solid var(--sapField_BorderColor);
 }
 
-.sapMValueStateHeaderSuccess:before {
-	font-family: SAP-icons;
-	content: "\e1c1";
+.sapMValueStateHeaderSuccess::before {
+	font-family: var(--sapContent_IconFontFamily);
+	content: '\e1c1';
 	position: absolute;
 	top: 0.5rem;
-	left: 0rem;
+	left: 0;
 	vertical-align: middle;
 	font-size: 1rem;
-	color: @sapPositiveElementColor;
+	color: var(--sapPositiveElementColor);
 	padding-left: 0.5rem;
 	padding-right: 0.375rem;
 }
 
-.sapMValueStateHeaderError:before {
-	font-family: SAP-icons;
-	content: "\e1ec";
+.sapMValueStateHeaderError::before {
+	font-family: var(--sapContent_IconFontFamily);
+	content: '\e1ec';
 	position: absolute;
 	top: 0.5rem;
-	left: 0rem;
+	left: 0;
 	vertical-align: middle;
 	font-size: 1rem;
-	color: @sapNegativeElementColor;
+	color: var(--sapNegativeElementColor);
 	padding-left: 0.5rem;
 	padding-right: 0.375rem;
 }
 
-.sapMValueStateHeaderWarning:before {
-	font-family: SAP-icons;
-	content: "\e053";
+.sapMValueStateHeaderWarning::before {
+	font-family: var(--sapContent_IconFontFamily);
+	content: '\e053';
 	position: absolute;
 	top: 0.5rem;
-	left: 0rem;
+	left: 0;
 	vertical-align: middle;
 	font-size: 1rem;
-	color: @sapCriticalElementColor;
+	color: var(--sapCriticalElementColor);
 	padding-left: 0.5rem;
 	padding-right: 0.375rem;
 }
 
-.sapMValueStateHeaderInformation:before {
-	font-family: SAP-icons;
-	content: "\e289";
+.sapMValueStateHeaderInformation::before {
+	font-family: var(--sapContent_IconFontFamily);
+	content: '\e289';
 	position: absolute;
 	top: 0.5rem;
-	left: 0rem;
+	left: 0;
 	vertical-align: middle;
 	font-size: 1rem;
-	color: @sapInformativeElementColor;
+	color: var(--sapInformativeElementColor);
 	padding-left: 0.5rem;
 	padding-right: 0.375rem;
 }

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

@@ -6,8 +6,8 @@
 .sapMValueStateMessageError,
 .sapMValueStateMessageWarning,
 .sapMValueStateMessageInformation {
-	border: @sapUiFieldBorderWidth solid @sapUiFieldBorderColor;
-	color: @sapUiBaseText;
+	border: var(--sapField_BorderWidth) solid var(--sapField_BorderColor);
+	color: var(--sapTextColor);
 }
 
 .sapMValueStateMessage {
@@ -15,41 +15,41 @@
 	padding: 0.5rem 0.5rem 0.5rem 1.875rem;
 }
 
-.sapMValueStateMessageError:before {
-	font-family: SAP-icons;
-	content: "\e1ec";
+.sapMValueStateMessageError::before {
+	font-family: var(--sapContent_IconFontFamily);
+	content: '\e1ec';
 	position: absolute;
 	top: 0.5rem;
-	left: 0rem;
+	left: 0;
 	vertical-align: middle;
 	font-size: 1rem;
-	color: @sapNegativeElementColor;
+	color: var(--sapNegativeElementColor);
 	padding-left: 0.5rem;
 	padding-right: 0.375rem;
 }
 
-.sapMValueStateMessageWarning:before {
-	font-family: SAP-icons;
-	content: "\e053";
+.sapMValueStateMessageWarning::before {
+	font-family: var(--sapContent_IconFontFamily);
+	content: '\e053';
 	position: absolute;
 	top: 0.5rem;
-	left: 0rem;
+	left: 0;
 	vertical-align: middle;
 	font-size: 1rem;
-	color: @sapCriticalElementColor;
+	color: var(--sapCriticalElementColor);
 	padding-left: 0.5rem;
 	padding-right: 0.375rem;
 }
 
-.sapMValueStateMessageInformation:before {
-	font-family: SAP-icons;
-	content: "\e289";
+.sapMValueStateMessageInformation::before {
+	font-family: var(--sapContent_IconFontFamily);
+	content: '\e289';
 	position: absolute;
 	top: 0.5rem;
-	left: 0rem;
+	left: 0;
 	vertical-align: middle;
 	font-size: 1rem;
-	color: @sapInformativeElementColor;
+	color: var(--sapInformativeElementColor);
 	padding-left: 0.5rem;
 	padding-right: 0.375rem;
 }

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

@@ -4,20 +4,21 @@
 /* ================================== */
 
 .sapMWizard {
+
 	.sapMWizardStepContainer {
 		margin-top: @_sap_m_Wizard_NavHeight;
 	}
 
 	&.sapMWizardBgSolid .sapMWizardStepContainer {
-		background-color: @sapUiBaseBG;
+		background-color: var(--sapBackgroundColor);
 	}
 
 	&.sapMWizardBgList .sapMWizardStepContainer {
-		background-color: @sapUiBaseBG;
+		background-color: var(--sapBackgroundColor);
 	}
 
 	&.sapMWizardBgTransparent .sapMWizardStepContainer {
-		background-color: @sapUiBaseBG;
+		background-color: var(--sapBackgroundColor);
 	}
 }
 
@@ -40,6 +41,5 @@
 html.sap-phone .sapMWizard .sapMWizardNextButtonVisible {
 	left: 2rem;
 	bottom: 3.5rem;
-	-webkit-transform: none;
 	transform: none;
 }

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

@@ -9,28 +9,28 @@
 .sapMWizardProgressNav {
 	position: absolute;
 	z-index: 1;
-	box-shadow: @sapUiContentHeaderShadow;
+	box-shadow: var(--sapContent_HeaderShadow);
 }
 
 .sapMWizardProgressNavStep:hover .sapMWizardProgressNavStepCircle {
-	background-color: @sapUiObjectHeaderBackground;
-	color: @sapUiBaseText;
+	background-color: var(--sapObjectHeader_Background);
+	color: var(--sapTextColor);
 }
 
-.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"]:hover .sapMWizardProgressNavStepCircle {
-	background-color: @sapUiHighlight;
-	color: @sapUiContentContrastIconColor;
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current='true']:hover .sapMWizardProgressNavStepCircle {
+	background-color: var(--sapHighlightColor);
+	color: var(--sapContent_ContrastIconColor);
 }
 
-.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] .sapMWizardProgressNavStepTitle,
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current='true'] .sapMWizardProgressNavStepTitle,
 .sapMWizardProgressNavStep:hover .sapMWizardProgressNavStepTitle {
-	color: @sapTextColor;
+	color: var(--sapTextColor);
 }
 
-.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] .sapMWizardProgressNavStepCircle::after {
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current='true'] .sapMWizardProgressNavStepCircle::after {
 	height: @_sap_m_WizardProgressNavigator_StepUnderlineHeight;
-	background: @sapUiBaseText;
-	content: "";
+	background: var(--sapTextColor);
+	content: '';
 	display: block;
 	position: relative;
 	width: 100%;
@@ -39,56 +39,58 @@
 	bottom: -0.625rem;
 }
 
-.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] .sapMWizardProgressNavStepContainer::after {
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current='true'] .sapMWizardProgressNavStepContainer::after {
 	height: 0;
 }
 
-.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] {
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current='true'] {
+
 	& .sapMWizardProgressNavStepCircle {
-		background: @sapUiSelected;
-		color: @sapUiBaseText;
+		background: var(--sapSelectedColor);
+		color: var(--sapTextColor);
 	}
 }
 
 .sapMWizardProgressNavStepCircle {
-	background: @sapUiObjectHeaderBackground;
-	border-color: @sapUiObjectHeaderBorderColor;
-	color: @sapUiBaseText;
+	background: var(--sapObjectHeader_Background);
+	border-color: var(--sapObjectHeader_BorderColor);
+	color: var(--sapTextColor);
 }
 
 .sapMWizardProgressNavStepTitle {
-	color: @sapTextColor;
+	color: var(--sapTextColor);
 }
 
 .sapMWizardProgressNavStep::after {
-	border-bottom-color: @sapUiContentSelectedForegroundColor;
+	border-bottom-color: var(--sapContent_Selected_ForegroundColor);
 }
 
 .sapMWizard .sapMWizardStepContainer {
-	background: @sapUiGroupContentBackground;
+	background: var(--sapGroup_ContentBackground);
 }
 
 .sapMWizardProgressNavStepTitleOptional,
 .sapMWizardProgressNavStepLabelOptional {
-	color: @sapUiFieldPlaceholderTextColor;
+	color: var(--sapField_PlaceholderTextColor);
 }
 
-.sapMWizardProgressNavStep[data-sap-ui-wpn-step-active="true"] {
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-active='true'] {
+
 	/* all steps after the active one have inactive style */
 	& ~ .sapMWizardProgressNavStep .sapMWizardProgressNavStepCircle {
-		border-color: @sapUiListBorderColor;
-		background: @sapUiObjectHeaderBackground;
-		color: @sapUiBaseText;
+		border-color: var(--sapList_BorderColor);
+		background: var(--sapObjectHeader_Background);
+		color: var(--sapTextColor);
 	}
 
 	& ~ .sapMWizardProgressNavStep .sapMWizardProgressNavStepTitle {
-		color: @sapUiContentLabelColor;
+		color: var(--sapContent_LabelColor);
 	}
 
 	/* all separators after (and including) the active step have inactive style */
 	&::after,
 	& ~ .sapMWizardProgressNavStep::after {
-		border-bottom-color: @sapUiListBorderColor;
+		border-bottom-color: var(--sapList_BorderColor);
 	}
 }
 
@@ -96,9 +98,10 @@
 	display: block;
 }
 
-.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open-prev="true"][data-sap-ui-wpn-step-open="false"][data-sap-ui-wpn-step-current="true"] {
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open-prev='true'][data-sap-ui-wpn-step-open='false'][data-sap-ui-wpn-step-current='true'] {
+
 	.sapMWizardProgressNavStepCircle {
-		background: @sapUiActive;
-		border-color: @sapUiObjectHeaderBorderColor;
+		background: var(--sapActiveColor);
+		border-color: var(--sapObjectHeader_BorderColor);
 	}
 }

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

@@ -1,6 +1,11 @@
+/* ================================= */
+/* CSS for control sap.m/WizardStep  */
+/* Horizon High Contrast Black theme */
+/* ================================= */
+
 .sapMWizardStep {
-	background-color: @sapUiGroupContentBackground;
-	border-radius: @sapUiElementBorderCornerRadius;
+	background-color: var(--sapGroup_ContentBackground);
+	border-radius: var(--sapElement_BorderCornerRadius);
 	padding: 1rem;
 	margin-bottom: 1rem;
 }

package/src/sap/m/themes/sap_horizon_hcb/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/m/themes/sap_horizon_hcw/IconTabBar.less

@@ -7,7 +7,6 @@
 /* Variables overriding */
 /* ========================================================================== */
 
-@_sap_m_IconTabBar_TextColor: var(--sapContent_LabelColor);
 @_sap_m_IconTabBar_TextShadow: none;
 @_sap_m_IconTabBar_HeaderFocusBorderTopOffset: -1px;
 @_sap_m_IconTabBar_HeaderFocusBorderBottomOffset: -1px;
@@ -18,7 +17,6 @@
 /* ==================== Cozy size ==================== */
 
 /* Content arrow */
-@_sap_m_IconTabBar_ContentArrowBorderWidth: 0.313rem;
 @_sap_m_IconTabBar_ContentArrowHeight: 0.875rem;
 
 /* Inline mode */
@@ -131,14 +129,12 @@
 /* Variables */
 /* ========================================================================== */
 
-@_sap_m_IconTabBar_TextHoverColor: darken(@sapUiGroupTitleTextColor, 10);
-@_sap_m_IconTabBar_SelectedTextColor: var(--sapContent_LabelColor);
+@_sap_m_IconTabBar_SelectedTextColor: var(--sapTab_Selected_Background);
 @_sap_m_IconTabBar_SelectedTextHoverColor: darken(@sapUiSelected, 10);
 @_sap_m_IconTabBar_ArrowScroll_AfterHeight: 1px;
 
 /* =========== Shell =========== */
 @_sap_m_IconTabBar_ShellHeaderShadow: var(--sapShell_Shadow);
-@_sap_m_IconTabBar_ShellContentArrowHeight: 0.313rem;
 @_sap_m_IconTabBar_ShellOverflowBorderColor: var(--sapButton_BorderColor);
 @_sap_m_IconTabBar_ShellOverflowHoverBorderColor: var(--sapButton_Hover_BorderColor);
 @_sap_m_IconTabBar_ShellOverflowPressedBorderColor: var(--sapButton_Active_BorderColor);
@@ -243,7 +239,6 @@
 }
 
 .sapMITBContentArrow {
-	border-bottom: none;
 	position: relative;
 
 	/* creates border bottom with rounded top corners */
@@ -253,7 +248,6 @@
 		bottom: 0;
 		left: 0;
 		right: 0;
-		height: @_sap_m_IconTabBar_ContentArrowBorderWidth;
 		border-radius: 0.125rem 0.125rem 0 0;
 	}
 }
@@ -299,17 +293,21 @@
 }
 
 .sapMITBFilterIcon {
-	border: 1px solid var(--sapGroup_TitleTextColor);
+	border: 0.125rem solid var(--sapTab_ForegroundColor);
 }
 
 .sapMITBFilterDefault {
 	color: var(--sapContent_ContrastIconColor);
 }
 
+.sapMITBTab .sapMITBFilterDefault {
+	background-color: var(--sapTab_Background);
+}
+
 .sapMITBSelected {
 
 	.sapMITBContentArrow::after {
-		background: var(--sapList_SelectionBorderColor);
+		background: var(--sapTab_ForegroundColor);
 	}
 
 	.sapMITBFilterDefault,
@@ -317,8 +315,8 @@
 	.sapMITBFilterPositive,
 	.sapMITBFilterNegative,
 	.sapMITBFilterCritical {
-		background: var(--sapSelectedColor);
-		color: var(--sapContent_ContrastIconColor);
+		background: var(--sapTab_Positive_Selected_Background);
+		color: var( --sapTab_Positive_Selected_IconColor);
 	}
 }
 

package/src/sap/m/themes/sap_horizon_hcw/Label.less

@@ -6,7 +6,15 @@
 .sapMTB-Info-CTX > .sapMLabel {
 	font-style: italic;
 
-	& > .sapMLabelTextWrapper {
+	.sapMLabelTextWrapper {
 		padding-right: 5px;
 	}
+}
+
+/* ========================================================== */
+/* Checkbox overrides */
+/* ========================================================== */
+
+.sapMCb .sapMLabel {
+	color: var(--sapField_TextColor);
 }

package/src/sap/m/themes/sap_horizon_hcw/MessageStrip.less

@@ -3,11 +3,6 @@
 /* Horizon High Contrast White theme   */
 /* =================================== */
 
-.sapMMsgStrip {
-	border-radius: var(--sapPopover_BorderCornerRadius);
-	border-width: 0.125rem;
-}
-
 .sapMMsgStripCloseButton {
 	top: -0.4375rem;
 }

package/src/sap/m/themes/sap_horizon_hcw/SegmentedButton.less

@@ -51,14 +51,14 @@ html.sap-desktop .sapMSegBBtnFocusable:hover .sapMSegBBtnInner {
 html.sap-desktop {
 
 	.sapMSegBBtnFocusable:focus .sapMSegBBtnInner {
-		outline: 1px dotted;
-		outline-offset: -3px;
+		outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle);
+		outline-offset: -0.25rem;
 		outline-color: var(--sapContent_FocusColor);
 	}
 
 	.sapMSegBBtnFocusable.sapMSegBBtnSel:focus .sapMSegBBtnInner {
-		outline: 1px dotted;
-		outline-offset: -3px;
+		outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle);
+		outline-offset: -0.25rem;
 		outline-color: var(--sapContent_ContrastFocusColor);
 	}
 }

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

@@ -22,7 +22,6 @@
 /* Bulleted indicator of multiple tiles*/
 .sapMSTBulleted .sapMSTIndicator {
 	border: solid 0.0625rem var(--sapTile_OverlayForegroundColor);
-	opacity: 0.6;
 	box-shadow: 0 0 0.125rem var(--sapContent_ShadowColor);
 	margin: 0 0.094rem;
 }

package/src/sap/m/themes/sap_horizon_hcw/TabContainer.less

@@ -24,4 +24,8 @@
 	.sapMTabStrip {
 		height: 3.25rem;
 	}
+}
+
+.sapMTabContIcon.sapUiIcon{
+	color: var(--sapContent_IconColor);
 }

package/src/sap/m/themes/sap_horizon_hcw/TileContent.less

@@ -3,10 +3,10 @@
 /* Horizon High Contrast White theme  */
 /* ================================== */
 
-@_sap_m_TileContent_NewsFooterTextColor: @sapUiTileTextColor;
+@_sap_m_TileContent_NewsFooterTextColor: var(--sapTile_TextColor);
 
 .sapMST .sapMTileCnt.News {
-	margin-top: 0.25rem; // bigger margin because there's no border in .sapMST
+	margin-top: 0.25rem; /* bigger margin because there's no border in .sapMST */
 }
 
 .sapMTileCnt.News .sapMTileCntFtrTxt {

package/src/sap/m/themes/sap_horizon_hcw/TimePicker.less

@@ -3,6 +3,6 @@
 /* Horizon High Contrast White theme  */
 /* ================================== */
 
-@_sap_m_TimePicker_ItemColor: @sapUiLegendWorkingBackground;
-@_sap_m_TimePicker_ItemHoverColor: @sapUiListHoverBackground;
-@_sap_m_TimePicker_ItemBorderColor: @sapUiListBackground;
+@_sap_m_TimePicker_ItemColor: var(--sapLegend_WorkingBackground);
+@_sap_m_TimePicker_ItemHoverColor: var(--sapList_Hover_Background);
+@_sap_m_TimePicker_ItemBorderColor: var(--sapList_Background);