@openui5/themelib_sap_horizon 1.131.0 → 1.132.0

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

@@ -7,7 +7,9 @@
 	height: 2.75rem;
 	vertical-align: top;
 	position: relative;
+
 	.sapMSegBBtn {
+
 		.sapMSegBBtnInner {
 			font-size: @sapMFontMediumSize;
 			height: 2.25rem;
@@ -16,13 +18,14 @@
 			padding-right: 0.5625rem;
 			text-align: center;
 			text-shadow: none;
-			color: @sapUiButtonTextColor;
-			border-top: 1px solid @sapUiButtonBorderColor;
-			border-left: 1px solid @sapUiButtonBorderColor;
-			border-bottom: 1px solid @sapUiButtonBorderColor;
+			color: var(--sapButton_TextColor);
+			border-top: 1px solid var(--sapButton_BorderColor);
+			border-left: 1px solid var(--sapButton_BorderColor);
+			border-bottom: 1px solid var(--sapButton_BorderColor);
 			border-right: 1px solid transparent;
-			background-color: @sapUiButtonBackground;
+			background-color: var(--sapButton_Background);
 		}
+
 		&:not(.sapMSegBBtnMixed) .sapMImg {
 			padding-left: 0.5625rem;
 			padding-right: 0.5625rem;
@@ -41,33 +44,37 @@
 }
 
 html.sap-desktop .sapMSegBBtnFocusable:hover .sapMSegBBtnInner {
-	background: @sapUiButtonHoverBackground;
+	background: var(--sapButton_Hover_Background);
 }
 
 /* Custom focus outline: */
 html.sap-desktop {
+
 	.sapMSegBBtnFocusable:focus .sapMSegBBtnInner {
 		outline: 1px dotted;
 		outline-offset: -3px;
-		outline-color: @sapUiContentFocusColor;
+		outline-color: var(--sapContent_FocusColor);
 	}
 
 	.sapMSegBBtnFocusable.sapMSegBBtnSel:focus .sapMSegBBtnInner {
 		outline: 1px dotted;
 		outline-offset: -3px;
-		outline-color: @sapUiContentContrastFocusColor;
+		outline-color: var(--sapContent_ContrastFocusColor);
 	}
 }
 
 .sapMSegB.sapMSegBIcons {
+
 	.sapMSegBBtn:not(.sapMSegBBtnMixed) .sapMSegBBtnInner {
 		padding: 0;
 	}
+
 	.sapMSegBBtn.sapMSegBBtnMixed .sapMImg {
 		height: 2.125rem;
 		width: auto;
 		padding-right: 0.375rem;
 	}
+
 	.sapMSegBBtn.sapMSegBBtnMixed .sapUiIcon {
 		padding-left: 0;
 		padding-right: 0.375rem;
@@ -76,56 +83,66 @@ html.sap-desktop {
 }
 
 .sapMSegBBtn.sapMSegBBtnFocusable:active:hover {
+
 	.sapMSegBBtnInner {
-		background: @sapButton_Active_Background;
-		color: @sapUiButtonSelectedTextColor;
-		border-color: @sapUiButtonSelectedBorderColor;
+		background: var(--sapButton_Active_Background);
+		color: var(--sapButton_Selected_TextColor);
+		border-color: var(--sapButton_Selected_BorderColor);
 	}
+
 	.sapUiIcon {
-		color: @sapUiButtonSelectedTextColor;
+		color: var(--sapButton_Selected_TextColor);
 	}
 }
 
 .sapMSegBBtn.sapMSegBBtnSel {
+
 	.sapMSegBBtnInner {
-		background: @sapUiButtonSelectedBackground;
-		color: @sapUiButtonSelectedTextColor;
-		border-color: @sapUiButtonSelectedBorderColor;
+		background: var(--sapButton_Selected_Background);
+		color: var(--sapButton_Selected_TextColor);
+		border-color: var(--sapButton_Selected_BorderColor);
 	}
+
 	.sapUiIcon {
-		color: @sapUiButtonSelectedTextColor;
+		color: var(--sapButton_Selected_TextColor);
 	}
 }
 
 .sapMSegBBtn.sapMSegBBtnSel:hover {
+
 	.sapMSegBBtnInner {
-		border-color: @sapUiButtonSelectedHoverBorderColor;
+		border-color: var(--sapButton_Selected_Hover_BorderColor);
 	}
 }
 
 .sapMSegBBtnFocusable.sapMBtnActive {
+
 	.sapMSegBBtnInner {
-		background: @sapUiButtonSelectedBackground;
-		color: @sapUiButtonSelectedTextColor;
+		background: var(--sapButton_Selected_Background);
+		color: var(--sapButton_Selected_TextColor);
 	}
-	.sapUiIcon{
-		color: @sapUiButtonSelectedTextColor;
+
+	.sapUiIcon {
+		color: var(--sapButton_Selected_TextColor);
 	}
 }
 
 html.sap-desktop .sapMSegBBtn.sapMSegBBtnFocusable.sapMSegBBtnSel:hover .sapMSegBBtnInner,
 html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
-	background: @sapUiButtonSelectedHoverBackground;
+	background: var(--sapButton_Selected_Hover_Background);
 }
 
 .sapMSegBBtn.sapMSegBBtnFocusable.sapMSegBBtnSel {
+
 	.sapMSegBBtnInner {
-		border-right: 1px solid @sapUiButtonSelectedBorderColor;
+		border-right: 1px solid var(--sapButton_Selected_BorderColor);
 	}
+
 	.sapMSegBBtnInner:hover {
-		border-right: 1px solid @sapUiButtonSelectedHoverBorderColor;
+		border-right: 1px solid var(--sapButton_Selected_Hover_BorderColor);
 	}
-	// Hide next button left border
+
+	/* Hide next button left border */
 	+ .sapMSegBBtn .sapMSegBBtnInner {
 		border-left: 1px solid transparent;
 	}
@@ -143,15 +160,16 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
 	font-size: 1rem;
 	line-height: 2.125rem;
 	margin-right: 0;
-	color: @sapUiButtonIconColor;
+	color: var(--sapButton_IconColor);
 	vertical-align: top;
 	text-align: center;
 }
+
 .sapMSegBBtn.sapMSegBBtnMixed .sapUiIcon {
 	padding-right: 0.375rem;
 }
 
-.sapMSegBBtn .sapMBtnIcon:before {
+.sapMSegBBtn .sapMBtnIcon::before {
 	width: 1rem;
 	text-align: center;
 	display: inline-block;
@@ -162,6 +180,7 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
 }
 
 .sapMSegBIcons:not(.sapMSegBBtnMixed) {
+
 	.sapMImg,
 	.sapUiIcon {
 		padding-left: 0.5625rem;
@@ -170,6 +189,7 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
 }
 /* Compact size */
 .sapUiSizeCompact {
+
 	.sapMSegBBtn .sapMSegBBtnInner {
 		height: 1.625rem;
 		line-height: 1.5rem;
@@ -200,19 +220,25 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
 		vertical-align: top;
 	}
 	.sapMSegB {
+
 		.sapMBtnIconLeft {
 			margin-left: 0;
 		}
 	}
+
 	.sapMSegBIcons:not(.sapMSegBBtnMixed) {
+
 		.sapMImg,
 		.sapUiIcon {
 			padding-left: 0.4375rem;
 			padding-right: 0.4375rem;
 		}
 	}
+
 	.sapMSegBIcons {
+
 		.sapMSegBBtn.sapMSegBBtnMixed {
+
 			.sapUiIcon,
 			.sapMImg {
 				padding-left: 0;
@@ -228,7 +254,7 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
 }
 
 .sapMSegBBtn.sapMSegBtnLastVisibleButton .sapMSegBBtnInner {
-	border-right: 1px solid @sapUiButtonBorderColor;
+	border-right: 1px solid var(--sapButton_BorderColor);
 	border-top-right-radius: 0.375rem;
 	border-bottom-right-radius: 0.375rem;
 }

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

@@ -5,33 +5,33 @@
 
 @_sap_m_SelectListItem_Height: 2.5rem;
 @_sap_m_SelectListItem_CompactHeight: 2rem;
-@_sap_m_SelectListItemBelizeFocus_Height: 0.375rem; // 2 borders * 0.125rem + 2 offsets (top and bottom) * 0.0625rem
+@_sap_m_SelectListItemBelizeFocus_Height: 0.375rem; /* 2 borders * 0.125rem + 2 offsets (top and bottom) * 0.0625rem */
 
 /* selected */
 .sapMSelectListItemBaseSelected {
-	background: @sapUiListSelectionBackgroundColor;
-	border-bottom: 0.0625rem solid @sapUiListSelectionBorderColor;
+	background: var(--sapList_SelectionBackgroundColor);
+	border-bottom: 0.0625rem solid var(--sapList_SelectionBorderColor);
 }
 
 .sapMSelectListItemBaseHoverable:hover {
-	border-bottom: 0.0625rem solid @sapUiListBorderColor;
+	border-bottom: 0.0625rem solid var(--sapList_BorderColor);
 }
 
 .sapMSelectListItemBaseSelected.sapMSelectListItemBaseHoverable:hover {
-	border-bottom: 0.0625rem solid @sapUiListSelectionBorderColor;
+	border-bottom: 0.0625rem solid var(--sapList_SelectionBorderColor);
 }
 
 .sapMSltPicker-CTX .sapMSelectListItemBaseSelected,
 .sapMComboBoxBasePicker-CTX .sapMSelectListItemBaseSelected,
 /* focus */
 html.sap-desktop .sapMSelectListItemBase:focus {
-	outline: @sapUiContentFocusStyle;
+	outline: var(--sapContent_FocusStyle);
 	outline-offset: -0.1875rem;
-	outline-width: @sapUiContentFocusWidth;
+	outline-width: var(--sapContent_FocusWidth);
 }
 
 .sapMSelectListItemBase.sapMSelectListItemBasePressed .sapMSelectListItemIcon {
-	color: @sapUiContentContrastIconColor;
+	color: var(--sapContent_ContrastIconColor);
 }
 
 /* disabled */
@@ -40,6 +40,6 @@ html.sap-desktop .sapMSelectListItemBase:focus {
 }
 
 .sapMSelectListItemBase {
-	font-size: @sapFontSize;
-	color: @sapUiListTextColor;
+	font-size: var(--sapFontSize);
+	color: var(--sapList_TextColor);
 }

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

@@ -5,12 +5,13 @@
 
 /* background color class for Shell header */
 .sapMShellBackgroundColorOnlyIfDefault {
-	background-color: @sapUiGlobalBackgroundColor;
+	background-color: var(--sapBackgroundColor);
 }
 
 html.sap-desktop {
+
 	.sapMShellCentralBox {
-		box-shadow: 0 0 2.5rem 0.125rem @sapUiContentShadowColor;
+		box-shadow: 0 0 2.5rem 0.125rem var(--sapContent_ShadowColor);
 		border-right: 1px solid @sapUiHcReducedAltForeground;
 		border-left: 1px solid @sapUiHcReducedAltForeground;
 	}
@@ -21,10 +22,13 @@ html.sap-desktop {
 }
 
 @media (min-width: @_sap_m_Shell_AppWidthLimit) {
+
 	html.sap-desktop {
+
 		.sapMShellAppWidthLimited {
+
 			.sapMShellCentralBox {
-				background-color: @sapUiBaseBG;
+				background-color: var(--sapBackgroundColor);
 			}
 		}
 	}

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

@@ -4,13 +4,12 @@
 /* ================================================= */
 
 .sapUiSizeCompact .sapMSinglePCGrid {
-	& .sapUiCalItem
-	{
+
+	& .sapUiCalItem {
 		text-align: left;
 	}
 
-	& .sapUiCalDayName
-	{
+	& .sapUiCalDayName {
 		text-align: right;
 	}
 }
@@ -20,19 +19,22 @@
 }
 
 html.sap-desktop {
+
 	.sapMSinglePCBlockersRow > .sapMSinglePCBlockersColumns > .sapMSinglePCBlockersColumn:focus::after,
 	.sapMSinglePCGridContent .sapMSinglePCColumns .sapMSinglePCRow:focus::after {
-		border: 0.125rem dotted @sapUiContentFocusColor;
+		border: 0.125rem dotted var(--sapContent_FocusColor);
 	}
 }
 
 .sapMSinglePC {
-	.sapMSinglePCRow, .sapMSinglePCBlockersColumn {
-		border-color: @sapUiListBorderColor;
+
+	.sapMSinglePCRow,
+	.sapMSinglePCBlockersColumn {
+		border-color: var(--sapList_BorderColor);
 	}
 
 	.sapMSinglePCColumnToday .sapMSinglePCRow::before {
-		border-color: @sapUiLegendCurrentDateTime;
+		border-color: var(--sapLegend_CurrentDateTime);
 	}
 
 	.sapMSinglePCColumnHeader .sapUiCalItem.sapUiCalItemNow {
@@ -40,7 +42,7 @@ html.sap-desktop {
 	}
 
 	.sapMSinglePCNowMarker {
-		color: @sapUiLegendCurrentDateTime;
+		color: var(--sapLegend_CurrentDateTime);
 	}
 
 	.sapMSinglePCColumnWeekend,
@@ -48,36 +50,43 @@ html.sap-desktop {
 	.sapMSinglePCBlockersRow,
 	.sapMSinglePCNonWorkingPeriod,
 	.sapMSinglePCRowHeaders {
-		background-color: @sapUiListAlternatingBackground;
+		background-color: var(--sapList_AlternatingBackground);
 	}
 
 	.sapMPCHeadNavToolbar.sapMTB-Transparent-CTX.sapMTB {
-		background-color: @sapUiListBackground;
+		background-color: var(--sapList_Background);
 	}
 
 	.sapMSinglePCAppointmentWrap.sapUiCalendarRowApps {
+
 		.sapUiCalendarAppSel{
-			border: 0.0625rem solid @sapUiListSelectionBorderColor;
+			border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+
 			.sapUiCalendarAppCont {
 				border: none;
 			}
 		}
+
 		&:focus {
-			.sapUiCalendarAppCont:after {
-				border: 0.125rem dotted @sapUiContentContrastFocusColor;
+
+			.sapUiCalendarAppCont::after {
+				border: 0.125rem dotted var(--sapContent_ContrastFocusColor);
 			}
-			.sapUiCalendarAppSel > .sapUiCalendarAppCont:after {
-				border: 0.125rem dotted @sapUiContentContrastFocusColor;
+
+			.sapUiCalendarAppSel > .sapUiCalendarAppCont::after {
+				border: 0.125rem dotted var(--sapContent_ContrastFocusColor);
 			}
 		}
 	}
 
-	.sapUiCalItem:focus{
+	.sapUiCalItem:focus {
 		outline: none;
 	}
 
 	.sapMSinglePCColumnHeader {
+
 		.sapUiCalItem.sapUiCalItemNow {
+
 			.sapUiCalSpecialDate {
 				position: absolute;
 				left: 0;
@@ -92,6 +101,7 @@ html.sap-desktop {
 	}
 
 	.sapMSinglePCAppointmentWrap.sapUiCalendarRowApps {
+
 		.sapUiCalendarApp {
 			border-top-left-radius: 0;
 			border-bottom-left-radius: 0;
@@ -100,6 +110,7 @@ html.sap-desktop {
 }
 
 .sapUiCalendarRowVisFilled .sapMSinglePCAppointmentWrap {
+
 	.sapUiCalendarApp,
 	.sapUiCalendarApp:hover:not(:active) {
 		background-color: transparent;
@@ -107,17 +118,22 @@ html.sap-desktop {
 }
 
 .sapUiSizeCompact .sapMSinglePC {
+
 	.sapMSinglePCColumnHeader {
+
 		.sapUiCalItem.sapUiCalItemNow {
 			outline: 0.0625rem solid white;
 			box-shadow: inset white;
+
 			&.sapUiCalItemSel {
 				outline: 0.0625rem solid black;
 				box-shadow: inset black;
 			}
+
 			&.sapUiCalItemSel:hover {
-				background-color: @sapUiActive;
+				background-color: var(--sapActiveColor);
 			}
+
 			&.sapUiCalItemSel .sapUiCalItemText,
 			.sapUiCalItemText {
 				box-shadow: none;
@@ -125,6 +141,7 @@ html.sap-desktop {
 				line-height: 1.75rem;
 			}
 		}
+
 		.sapUiCalItem.sapUiCalItemSel:not(.sapUiCalItemSelBetween) > .sapUiCalItemText,
 		.sapUiCalItem.sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetween):focus > .sapUiCalItemText {
 			border: 0.0625rem solid transparent;
@@ -132,6 +149,7 @@ html.sap-desktop {
 
 		.sapUiCalItem.sapUiCalItemSel {
 			border: 0.0625rem solid black;
+
 			.sapUiCalItemText {
 				line-height: 1.825rem;
 			}
@@ -142,6 +160,7 @@ html.sap-desktop {
 		}
 
 		.sapUiCalItem {
+
 			.sapUiCalItemText,
 			.sapUiCalDayName {
 				padding-left: 0.125rem;
@@ -162,7 +181,8 @@ html.sap-desktop {
 
 .sapMSinglePCBlockers,
 .sapMSinglePCAppointments {
+
 	&.sapUiCalendarRowVisFilled > .sapUiCalendarRowApps:hover > .sapUiCalendarApp:not(.sapUiCalendarAppSel) > .sapUiCalendarAppCont {
-		background-color: @sapUiListHoverBackground;
+		background-color: var(--sapList_Hover_Background);
 	}
 }

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

@@ -2,6 +2,7 @@
 /* CSS for control sap.m/SinglePlanningCalendarMonthGrid  */
 /* Horizon High Contrast White theme                      */
 /* ====================================================== */
+
 .calendarSpecialDayTypeColorMixIn(@class, @color) {
 	.sapMSPCMonthGrid {
 		.@{class} .specialDateIndicator {

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

@@ -5,4 +5,10 @@
 
 .sapMSLIWithDescription .sapMSLIDescription {
 	padding-top: 0.75rem;
+}
+
+// This change and the usage of sapList_Background for the text color is just temporary.
+// Refer to DINC0336686 for more information
+.sapMSLIInfo.sapMSLIInfoStateInverted {
+	color: var(--sapList_Background);
 }

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

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-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/shared.less

@@ -6,8 +6,9 @@
 
 .sapMBadge,
 .sapMBadge[class*=sapMBadgeAccentColor] {
-	.sapMBadgeIndicator:after {
-		background-color: @sapUiContentBadgeBackground ;
-		border-color: @sapUiGroupContentBorderColor;
+
+	.sapMBadgeIndicator::after {
+		background-color: var(--sapContent_BadgeBackground);
+		border-color: var(--sapGroup_ContentBorderColor);
 	}
 }