@openui5/themelib_sap_horizon 1.134.0 → 1.136.0

package/src/sap/m/themes/sap_horizon_dark/Title.less

@@ -1,7 +1,7 @@
-/* ======================================== */
-/* CSS for control sap.m/Title  			*/
-/* Evening Horizon theme               		*/
-/* ======================================== */
+/* =========================== */
+/* CSS for control sap.m/Title */
+/* Evening Horizon theme       */
+/* =========================== */
 
 .sapFFCL {
 
@@ -11,7 +11,9 @@
 	.sapFDynamicPage-Std-Phone {
 
 		.sapFDynamicPageTitleMain {
+
 			.sapFDynamicPageTitleMainInner {
+
 				.sapFDynamicPageTitleMainHeading {
 					align-self: auto;
 
@@ -19,8 +21,8 @@
 						margin-top: 0.6875rem;
 
 						.sapMTitle:not(.sapUICompVarMngmtTitle):not(.sapMVarMngmtTitle) {
-							font-size: @sapUiObjectHeaderTitleSnappedFontSize;
-							font-family: @sapUiObjectHeaderTitleFontFamily;
+							font-size: var(--sapObjectHeader_Title_SnappedFontSize);
+							font-family: var(--sapObjectHeader_Title_FontFamily);
 						}
 					}
 				}

package/src/sap/m/themes/sap_horizon_dark/Token.less

@@ -12,17 +12,17 @@
 .sapMToken {
 	padding-left: @_sap_m_Token_LeftPadding;
 	border-radius: 0.375rem;
-	color: @sapTextColor;
-	font-size: @sapFontSize;
+	color: var(--sapTextColor);
+	font-size: var(--sapFontSize);
 	overflow: visible;
 }
 
 .sapMTokenSelected,
 .sapMToken.sapMTokenReadOnly.sapMTokenSelected {
-	background: @sapUiButtonSelectedBackground;
-	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedBorderColor;
+	background: var(--sapButton_Selected_Background);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
 	border-radius: 0.375rem;
-	font-family: @sapFontSemiboldDuplexFamily;
+	font-family: var(--sapFontSemiboldDuplexFamily);
 }
 
 .sapMTokenIcon::before {
@@ -41,23 +41,23 @@
 	left: 0;
 	right: 0;
 	height: 2px;
-	background-color: @sapUiButtonSelectedBorderColor;
+	background-color: var(--sapButton_Selected_BorderColor);
 }
 
 html.sap-desktop .sapMToken:not(.sapMTokenSelected):not(.sapMTokenReadOnly):not(:focus):hover {
-	background: @sapUiButtonHoverBackground;
-	border: @sapUiButtonBorderWidth solid @sapUiButtonTokenBorderColor;
+	background: var(--sapButton_Hover_Background);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);
 	border-radius: 0.375rem;
 }
 
 html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
-	background: @sapUiButtonSelectedHoverBackground;
-	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedBorderColor;
+	background: var(--sapButton_Selected_Hover_Background);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
 }
 
 .sapMToken.sapMTokenReadOnly {
 	padding: 0.25rem 0.3125rem;
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 
 	.sapMTokenText {
 		line-height: 1rem;
@@ -65,13 +65,13 @@ html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
 }
 
 html.sap-desktop .sapMToken:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: 0.5rem;
 	outline-offset: 0.0625rem;
 }
 
 html.sap-desktop .sapMToken:not(.sapMTokenSelected):not(.sapMTokenReadOnly):focus:hover {
-	border: @sapUiButtonBorderWidth solid @sapUiButtonTokenBorderColor;
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);
 }
 
 html.sap-desktop .sapUiSizeCompact .sapMToken:focus,
@@ -99,7 +99,7 @@ html.sap-desktop .sapUiSizeCondensed .sapMToken:focus {
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
-	right: -@sapUiButtonBorderWidth;
+	right: ~"calc(var(--sapButton_BorderWidth) * -1)";
 }
 
 .sapUiSizeCompact .sapMTokenIcon {

package/src/sap/m/themes/sap_horizon_dark/Tokenizer.less

@@ -21,14 +21,14 @@
 }
 
 html.sap-desktop .sapMTokenizer:focus {
-	outline: 2px solid @sapContent_FocusColor;
+	outline: 2px solid var(--sapContent_FocusColor);
 	outline-offset: -0.125rem;
-	border-radius: @sapField_BorderCornerRadius;
+	border-radius: var(--sapField_BorderCornerRadius);
 }
 
 /* editable tokens in read-only tokenizer */
 .sapMTokenizer.sapMTokenizerReadonly .sapMToken {
-		color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 }
 
 .sapMTokenizer.sapMTokenizerReadonly .sapMToken.sapMTokenReadOnly {
@@ -36,50 +36,51 @@ html.sap-desktop .sapMTokenizer:focus {
 }
 
 .sapUiSizeCompact {
+
 	.sapMTokenizer {
 		padding-left: 0.25rem;
+
 		&.sapMTokenizerReadonly .sapMToken.sapMTokenReadOnly {
 			padding: 0.125rem 0.25rem;
 		}
+
 		.sapMToken {
 			margin-right: 0.25rem;
 		}
 	}
 }
 
-/* ------------------------------ */
-/* Disabled                       */
-/* ------------------------------ */
+/* Disabled */
+
+.sapMTokenizer.sapMTokenizerDisabled .sapMToken {
 
-.sapMTokenizer.sapMTokenizerDisabled .sapMToken  {
 	&:hover,
 	&:focus,
 	&.sapMTokenSelected,
 	&.sapMTokenSelected:focus,
 	&.sapMToken.sapMTokenSelected:hover,
 	&.sapMToken:not(.sapMTokenSelected):not(:focus):hover {
-		background: @sapButton_TokenBackground;
+		background: var(--sapButton_TokenBackground);
 		cursor: default;
-		color: @sapUiBaseText;
+		color: var(--sapTextColor);
 		outline: none;
-		border: 1px solid @sapButton_TokenBorderColor;
-		border-radius: @sapButton_BorderCornerRadius;
+		border: 1px solid var(--sapButton_TokenBorderColor);
+		border-radius: var(--sapButton_BorderCornerRadius);
 		box-shadow: none;
 	}
 
-	&:focus:after {
+	&:focus::after {
 		content: none;
 	}
 
 	.sapMTokenText,
 	.sapMTokenIcon {
-		color: @sapUiBaseText;
+		color: var(--sapTextColor);
 	}
 
 	.sapMTokenIcon {
 		cursor: default;
 	}
-
 }
 
 .sapMTokenizer.sapMTokenizerDisabled .sapMTokenizerIndicator {
@@ -88,5 +89,5 @@ html.sap-desktop .sapMTokenizer:focus {
 
 .sapMTokenizer.sapMTokenizerReadonly .sapMTokenizerIndicator,
 .sapMTokenizer .sapMTokenizerIndicator {
-	color: @sapLinkColor;
+	color: var(--sapLinkColor);
 }

package/src/sap/m/themes/sap_horizon_dark/Toolbar.less

@@ -4,7 +4,7 @@
 /* ============================== */
 
 html.sap-desktop .sapMTBActive.sapMTBFocused {
-	outline: 0.0625rem dotted @sapUiContentFocusColor;
+	outline: 0.0625rem dotted var(--sapContent_FocusColor);
 	outline-offset: -0.1875rem;
 }
 
@@ -20,30 +20,30 @@ html.sap-desktop .sapMTBActive.sapMTBFocused {
 
 /* Info Toolbar Context */
 .sapMTB-Info-CTX.sapMTB {
-	background: @sapUiInfobarNonInteractiveBackground;
-	color: @sapUiListTextColor;
+	background: var(--sapInfobar_NonInteractive_Background);
+	color: var(--sapList_TextColor);
 	height: 2rem;
 
 	> .sapUiIcon {
 		width: 1rem;
 		height: 1rem;
-		color: @sapUiListTextColor;
+		color: var(--sapList_TextColor);
 	}
 
 	> .sapUiIcon:focus {
-		color: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		color: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	}
 
 	&.sapMTBActive {
-		background: @sapUiInfobarBackground;
-		color: @sapUiInfobarTextColor;
+		background: var(--sapInfobar_Background);
+		color: var(--sapInfobar_TextColor);
 
 		&:active {
-			background: @sapUiInfobarActiveBackground;
+			background: var(--sapInfobar_Active_Background);
 		}
 
 		&:hover {
-			background: @sapUiInfobarHoverBackground;
+			background: var(--sapInfobar_Hover_Background);
 		}
 
 		.sapMText,
@@ -55,32 +55,30 @@ html.sap-desktop .sapMTBActive.sapMTBFocused {
 }
 
 html.sap-desktop .sapMTB-Info-CTX.sapMTBActive.sapMTBFocused {
-	outline-color: @sapUiContentContrastFocusColor;
+	outline-color: var(--sapContent_ContrastFocusColor);
 }
 
 .sapMTB.sapMTBStandard {
-	border-bottom: solid 0.0625rem @sapUiGroupTitleBorderColor;
+	border-bottom: solid 0.0625rem var(--sapGroup_TitleBorderColor);
 }
 
-// =====================================
-// solid toolbar context
-// =====================================
+/* solid toolbar context */
 .sapMTB-Solid-CTX.sapMTB {
-	background-color: @sapUiToolbarBackground;
+	background-color: var(--sapToolbar_Background);
 }
 
 html.sap-desktop .sapMTBActive.sapMTBFocused {
 	outline: none;
-	box-shadow: inset 0px 0px 0px @sapUiContentFocusWidth  @sapUiContentFocusColor;
+	box-shadow: inset 0 0 0 var(--sapContent_FocusWidth) var(--sapContent_FocusColor);
 }
 
 .sapMTB .sapMTBSeparator {
-	background: @sapUiToolbarSeparatorColor;
+	background: var(--sapToolbar_SeparatorColor);
 }
 
-// Styles suporting Table inside ObjectPageSubSection scenario
+/* Styles suporting Table inside ObjectPageSubSection scenario */
 .sapUxAPObjectPageLayout .sapUiTableOnObjectPageAdjustmentsForSection .sapMIBar.sapMTB.sapMTBHeader-CTX {
-	background: @sapUiGlobalBackgroundColor;
+	background: var(--sapBackgroundColor);
 	padding: 0;
 }
 

package/src/sap/m/themes/sap_horizon_dark/UploadCollection.less

@@ -7,5 +7,5 @@
 .sapMLIB.sapMUCListFirstItem,
 .sapMLIB.sapMUCListLastItem,
 .sapMLIB.sapMUCListItem {
-	border-bottom-color: @sapUiListBorderColor;
+	border-bottom-color: var(--sapList_BorderColor);
 }

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

@@ -8,54 +8,54 @@
 	line-height: 1rem;
 }
 
-.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_dark/ValueStateMessage.less

@@ -5,46 +5,46 @@
 
 .sapMValueStateMessage {
 	line-height: 1rem;
-	box-shadow: @sapUiContentShadow1;
-	border-radius: @sapGroup_BorderCornerRadius;
+	box-shadow: var(--sapContent_Shadow1);
+	border-radius: var(--sapGroup_BorderCornerRadius);
 	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_dark/Wizard.less

@@ -4,14 +4,16 @@
 /* ============================= */
 
 .sapMWizard {
+
 	.sapMWizardStepContainer {
 		margin-top: @_sap_m_Wizard_NavHeight;
 	}
 
 	&.sapMWizardBgSolid .sapMWizardStepContainer {
-		background-color: @sapUiShellBackground;
+		background-color: var(--sapShell_Background);
 	}
 }
+
 .sapMWizard .sapMWizardProgressNav {
 	box-shadow: @sapUiShadowHeader;
 }
@@ -31,6 +33,5 @@
 html.sap-phone .sapMWizard .sapMWizardNextButtonVisible {
 	left: 2rem;
 	bottom: 3.5rem;
-	-webkit-transform: none;
 	transform: none;
 }

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

@@ -9,31 +9,31 @@
 .sapMWizardProgressNav {
 	position: absolute;
 	z-index: 1;
-	box-shadow: @sapUiContentHeaderShadow;
+	box-shadow: var(--sapContent_HeaderShadow);
 }
 
 .sapMWizardProgressNavStep:hover .sapMWizardProgressNavStepCircle {
-	background-color: @sapUiObjectHeaderBackground;
-	color: @sapUiHighlight;
+	background-color: var(--sapObjectHeader_Background);
+	color: var(--sapHighlightColor);
 }
 
-.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:hover .sapMWizardProgressNavStepTitle {
-	color: @sapTextColor;
+	color: var(--sapTextColor);
 }
 
-.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] .sapMWizardProgressNavStepTitle {
-	color: @sapUiContentSelectedForegroundColor;
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current='true'] .sapMWizardProgressNavStepTitle {
+	color: var(--sapContent_Selected_ForegroundColor);
 }
 
-.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: @sapUiSelected;
-	content: "";
+	background: var(--sapSelectedColor);
+	content: '';
 	display: block;
 	position: relative;
 	width: 100%;
@@ -42,70 +42,74 @@
 	bottom: -0.75rem;
 }
 
-.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: @sapUiContentContrastTextColor;
+		background: var(--sapSelectedColor);
+		color: var(--sapContent_ContrastTextColor);
 	}
 }
 
 .sapMWizardProgressNavStepCircle {
-	background: @sapUiObjectHeaderBackground;
-	border-color: @sapUiSelected;
-	color: @sapUiSelected;
+	background: var(--sapObjectHeader_Background);
+	border-color: var(--sapSelectedColor);
+	color: var(--sapSelectedColor);
 }
 
 .sapMWizardProgressNavStepTitle {
-	color: @sapTextColor;
-	font-family: @sapUiFontBoldFamily;
+	color: var(--sapTextColor);
+	font-family: var(--sapFontBoldFamily);
 }
 
 .sapMWizardProgressNavStepTitle:hover {
-	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 {
-	color: @sapTextColor;
+	color: var(--sapTextColor);
 }
 
 .sapMWizardProgressNavStepLabelOptional {
 	margin-top: 0.125rem;
 }
 
-.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: @sapUiContentLabelColor;
+		border-color: var(--sapList_BorderColor);
+		background: var(--sapObjectHeader_Background);
+		color: var(--sapContent_LabelColor);
 	}
 
 	& ~ .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);
 	}
 }
 
-.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: @sapUiActive;
+		background: var(--sapActiveColor);
+		border-color: var(--sapActiveColor);
 	}
 }
 

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

@@ -4,8 +4,8 @@
 /* ================================= */
 
 .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_dark/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.
  */