@openui5/themelib_sap_horizon 1.143.1 → 1.144.0

package/src/sap/ui/unified/themes/sap_horizon_hcb/ColorPicker.less

@@ -16,28 +16,35 @@
 }
 
 .sapUiColorPicker-ColorPickerMatrix.sapUnifiedColorPicker {
+
 	.sapUiColorPicker-ColorPickerAlphaSlider,
 	.sapUiColorPicker-ColorPickerSlider {
+
 		.sapMSliderHandle {
 			width: 1.0625rem;
 			top: -0.5rem;
-			border: 0.125rem solid @sapUiContentContrastShadowColor;
+			border: 0.125rem solid var(--sapContent_ContrastShadowColor);
 			background-color: transparent;
-			box-shadow: inset 0 0 0 0.125rem @sapUiContentForegroundColor;
+			box-shadow: inset 0 0 0 0.125rem var(--sapContent_ForegroundColor);
 		}
+
 		.sapMSliderProgress {
 				border: none;
 		}
+
 		.sapMSliderInner{
-			border: 0.125rem solid @sapUiContentContrastShadowColor;
+			border: 0.125rem solid var(--sapContent_ContrastShadowColor);
+
 			/* pressed */
 			&.sapMSliderPressed:not(.sapMSliderInnerDisabled ) > .sapMSliderHandle {
-				//override the blue border color when the handle is pressed
-				border-color: @sapUiContentContrastShadowColor;
+				/* override the blue border color when the handle is pressed */
+				border-color: var(--sapContent_ContrastShadowColor);
 			}
-			.sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
+
+			.sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus)::after {
 				content: none;
 			}
+
 			&::before {
 				content: none
 			}
@@ -46,15 +53,17 @@
 }
 
 .sapUiColorPicker-ColorPickerMatrix.sapUnifiedColorPicker {
+
 	.sapUiColorPicker-ColorPickerHexField,
 	.sapUiCPHexWrapper,
 	.sapUiCPComparisonWrapper {
+		margin-top: 0.5rem;
+		vertical-align: top;
+
 		.sapUiColorPicker-ColorPickerOldColor,
 		.sapUiColorPicker-ColorPickerNewColor {
 			height: 2.25rem;
 		}
-		margin-top: 0.5rem;
-		vertical-align: top;
 	}
 }
 
@@ -65,6 +74,7 @@
 }
 
 .sapUiColorPicker-Large {
+
 	.sapUiCPHSLVText {
 		padding-left: 2.125rem;
 	}
@@ -80,7 +90,13 @@
 	height: 2.3125rem;
 }
 
+.sapUnifiedColorPicker .sapMSliderInner:not(.sapMSliderInnerDisabled).sapMSliderPressed .sapMSliderHandle,
+.sapUnifiedColorPicker .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
+	top: -0.5rem;
+}
+
 .sapUiSizeCompact {
+
 	.sapUnifiedColorPicker:not(.sapUiCPPhone) .sapUiCPComparisonWrapper {
 		height: 1.5rem;
 		vertical-align: top;
@@ -94,31 +110,38 @@
 	.sapUiColorPicker-Simplified.sapUnifiedColorPicker.sapUiCPPhone .sapUiColorPicker-ColorPickerOldColor {
 		height: 2.065rem;
 	}
+
 	.sapUiColorPicker-Default.sapUnifiedColorPicker.sapUiCPPhone {
+
 		.sapUiColorPicker-ColorPickerNewColor,
 		.sapUiColorPicker-ColorPickerOldColor {
 			width: 2.5rem;
 			height: 1.5rem;
 		}
+
 		.sapMBtn {
 			width: 2.5rem;
 			margin-left: 1.1rem;
 		}
+
 		.sapUiColorPicker-ColorPickerSlider {
 			margin-bottom: 0.0625rem;
 		}
 	}
+
 	.sapUnifiedColorPicker {
+
 		.sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
 			top: -0.375rem;
 		}
+
 		.sapUiColorPicker-ColorPickerAlphaSlider,
 		.sapUiColorPicker-ColorPickerSlider {
+
 			.sapMSliderHandle {
 				top: -0.375rem;
 				height: 1.25rem;
 			}
-			
 		}
 	}
 }
@@ -132,19 +155,17 @@
 }
 
 .sapUiColorPicker-ColorPickerMatrix {
+
 	&.sapUnifiedColorPicker{
+
 		.sapUiColorPicker-ColorPickerCircle {
-			border: 0.125rem solid @sapUiFieldBorderColor;
+			border: 0.125rem solid var(--sapField_BorderColor);
 			border-radius: 6px;
-			&:after {
+
+			&::after {
 				width: 5px;
 				height: 5px;
 			}
 		}
 	}
-}
-
-
-
-
-
+}

package/src/sap/ui/unified/themes/sap_horizon_hcb/FileUploader.less

@@ -8,12 +8,57 @@
 	height: 2.75rem;
 }
 
-.sapUiSizeCompact {
+.sapUiFup {
+	.sapMInputBaseContentWrapper {
+		.sapUiFupBrowseIcon,
+		.sapUiFupClearIcon {
+			line-height: 1.25rem;
+			width: 2rem;
+		}
+
+		.sapMBtnInner {
+			border: none;
+			border-radius: 0;
+		}
+
+		.sapUiFupVisual .sapUiFupPlaceholder > div {
+			font-style: normal;
+		}
+	}
+
+	&.sapUiFupButtonOnly {
+		&.sapMInputBase:not(.sapMFocus) .sapMInputBaseContentWrapper:not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper):hover {
+			border-color: initial;
+		}
+	}
+}
 
+.sapUiSizeCompact {
 	.sapUiFup,
 	.sapUiFup.sapMBarChild {
 		height: 2rem;
 	}
+
+	.sapUiFup {
+		.sapMInputBaseContentWrapper {
+			height: var(--sapElement_Compact_Height);
+
+			.sapUiFupBrowseIcon,
+			.sapUiFupClearIcon {
+				height: 1.375rem;
+				line-height: 1.25rem;
+				width: 2rem;
+			}
+
+			.sapMBtn {
+				height: var(--sapElement_Compact_Height);
+
+				.sapMBtnContent {
+					line-height: 1.375rem;
+				}
+			}
+		}
+	}
 }
 
 /* increase outline offset */

package/src/sap/ui/unified/themes/sap_horizon_hcb/ShellHeader.less

@@ -11,20 +11,20 @@
 @_sap_ui_unified_ShellHeader_ButtonHeight: 40px;
 @_sap_ui_unified_ShellHeader_ButtonBorderWidth: 1px;
 
-.sapUiUfdShellHeadBegin .sapUiUfdShellHeadItm.sapUiUfdShellHeadItmSep:after {
-	border-left: @_sap_ui_unified_ShellHeader_ButtonBorderWidth solid @sapUiShellBorderColor;
+.sapUiUfdShellHeadBegin .sapUiUfdShellHeadItm.sapUiUfdShellHeadItmSep::after {
+	border-left: @_sap_ui_unified_ShellHeader_ButtonBorderWidth solid var(--sapShell_BorderColor);
 	right: -@_sap_ui_unified_ShellHeader_ButtonOuterSpace;
 	top: @_sap_ui_unified_ShellHeader_ButtonOuterSpace/2;
 }
 
-.sapUiUfdShellHeadUsrItm:before,
-.sapUiUfdShellHeadEnd .sapUiUfdShellHeadItm.sapUiUfdShellHeadItmSep:before {
-	border-right: @_sap_ui_unified_ShellHeader_ButtonBorderWidth solid @sapUiShellBorderColor;
+.sapUiUfdShellHeadUsrItm::before,
+.sapUiUfdShellHeadEnd .sapUiUfdShellHeadItm.sapUiUfdShellHeadItmSep::before {
+	border-right: @_sap_ui_unified_ShellHeader_ButtonBorderWidth solid var(--sapShell_BorderColor);
 	top: @_sap_ui_unified_ShellHeader_ButtonOuterSpace/2;
 }
 
 html.sapUiMedia-Std-Desktop .sapUiUfdShellHeadItm:hover > span {
-	background-color: @sapUiHighlight;
+	background-color: var(--sapHighlightColor);
 }
 
 .sapUiUfdShellHeadItm {
@@ -32,9 +32,9 @@ html.sapUiMedia-Std-Desktop .sapUiUfdShellHeadItm:hover > span {
 }
 
 .sapUiUfdShellHeadItm > span {
-	border: @_sap_ui_unified_ShellHeader_ButtonBorderWidth solid @sapUiShellBorderColor;
+	border: @_sap_ui_unified_ShellHeader_ButtonBorderWidth solid var(--sapShell_BorderColor);
 	border-radius: @_sap_ui_unified_ShellHeader_ButtonBorderRadius;
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 	height: @_sap_ui_unified_ShellHeader_ButtonHeight;
 	line-height: @_sap_ui_unified_ShellHeader_ButtonHeight - 2*@_sap_ui_unified_ShellHeader_ButtonOutlineWidth;
 	margin-right: 2*@_sap_ui_unified_ShellHeader_ButtonOuterSpace;
@@ -47,7 +47,7 @@ html.sapUiMedia-Std-Desktop .sapUiUfdShellHeadItm:hover > span {
 .sapUiUfdShellHeadUsrItmImg,
 .sapUiUfdShellHeadUsrItmName,
 .sapUiUfdShellHeadUsrItmExp {
-	border: @_sap_ui_unified_ShellHeader_ButtonBorderWidth solid @sapUiShellBorderColor;
+	border: @_sap_ui_unified_ShellHeader_ButtonBorderWidth solid var(--sapShell_BorderColor);
 	height: @_sap_ui_unified_ShellHeader_ButtonHeight;
 	line-height: @_sap_ui_unified_ShellHeader_ButtonHeight - 2*@_sap_ui_unified_ShellHeader_ButtonOutlineWidth;;
 	margin-top: 0;
@@ -110,12 +110,12 @@ html.sapUiMedia-Std-Phone .sapUiUfdShellHeadUsrItmImg {
 }
 
 html.sapUiMedia-Std-Phone .sapUiUfdShellHeadUsrItm:focus .sapUiUfdShellHeadUsrItmImg {
-	border-right: 2*@_sap_ui_unified_ShellHeader_ButtonBorderWidth dotted @sapUiContentFocusColor;
+	border-right: 2*@_sap_ui_unified_ShellHeader_ButtonBorderWidth dotted var(--sapContent_FocusColor);
 	padding-right: @_sap_ui_unified_ShellHeader_ButtonInnerSpace - @_sap_ui_unified_ShellHeader_ButtonBorderWidth;
 }
 
 .sapUiUfdShellHeadItm:focus > span {
-	border: 2*@_sap_ui_unified_ShellHeader_ButtonBorderWidth dotted @sapUiContentFocusColor;
+	border: 2*@_sap_ui_unified_ShellHeader_ButtonBorderWidth dotted var(--sapContent_FocusColor);
 	border-radius: 0;
 	padding: 0;
 }

package/src/sap/ui/unified/themes/sap_horizon_hcb/ShellLayout.less

@@ -9,7 +9,7 @@
 
 .sapUiUfdShellCurtain,
 .sapUiUfdShell .sapUiUfdShellHead {
-	background-color: @sapUiShellBackground;
+	background-color: var(--sapShell_Background);
 }
 
 .sapUiUfdShell .sapUiUfdShellBrand {

package/src/sap/ui/unified/themes/sap_horizon_hcb/ShellOverlay.less

@@ -9,22 +9,22 @@
 
 .sapUiUfdShellOvrlyCntnt,
 .sapUiUfdShellOvrlyHeadCntnt {
-	background-color: @sapUiShellBackground;
+	background-color: var(--sapShell_Background);
 }
 
 .sapUiUfdShellOvrlyHeadClose,
 .sapUiUfdShellOvrlyHeadClose:focus,
 .sapUiUfdShellOvrlyHeadClose:visited {
-	color: @sapUiButtonIconColor;
+	color: var(--sapButton_IconColor);
 }
 
 .sapUiUfdShellOvrlyHeadClose:active,
 .sapUiUfdShellOvrlyHeadClose:hover{
-	background-color: @sapUiButtonActiveBackground;
+	background-color: var(--sapButton_Active_Background);
 }
 
 .sapUiUfdShellOvrlyHeadClose {
-	border: 1px solid @sapUiButtonBorderColor;
+	border: 1px solid var(--sapButton_BorderColor);
 	border-radius: 6px;
 	line-height: 1;
 }
@@ -34,7 +34,7 @@
 }
 
 .sapUiUfdShellOvrlyHeadClose:focus {
-	border: 2px dotted @sapUiContentFocusColor;
+	border: 2px dotted var(--sapContent_FocusColor);
 	border-radius: 0;
 	padding: 9px;
 }
@@ -44,13 +44,13 @@
 }
 
 .sapUiUfdShellOvrlyAnim.sapUiUfdShellOvrly > div {
-	box-shadow: 0 0 40px 2px @sapUiContentShadowColor;
+	box-shadow: 0 0 40px 2px var(--sapContent_ShadowColor);
 }
 
 .sapUiUfdShellOvrlyHead,
 .sapUiUfdShellOvrlyCntnt > div {
 	border-width: 0 2px 1px 2px;
-	border-color: @sapUiGroupContentBorderColor;
+	border-color: var(--sapGroup_ContentBorderColor);
 	border-style: solid;
 }
 

package/src/sap/ui/unified/themes/sap_horizon_hcb/library.source.less

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