@openui5/themelib_sap_horizon 1.131.1 → 1.132.0

package/src/sap/tnt/themes/sap_horizon/ToolHeader.less

@@ -19,7 +19,7 @@
 .sapTntToolHeader:not(.sapUshellShellToolHeader) {
 	&.sapMTB {
 		background-color: @sapUiShellColor;
-		padding: 0 1.25rem 0 0.75rem;
+		padding: 0 1rem 0 0.875rem;
 	}
 
 	&.sapMTBStandard {
@@ -28,10 +28,6 @@
 }
 
 .sapTntToolHeader {
-	&.sapMIBar.sapMTB .sapMBarChild ~ .sapMBarChild {
-		margin: 0 0 0 0.375rem;
-	}
-
 	&.sapMIBar.sapMTB .sapMBarChild.sapMTBSeparator {
 		background: none;
 		width: 0.75rem;
@@ -45,59 +41,70 @@
 .sapTntToolHeader {
 	.sapMBarChild:not(.sapMMenuBtn) {
 		&.sapMBtn {
-			padding: 0.125rem 0;
-			min-width: 2.5rem;
-		}
-
-		&.sapMBtn .sapMBtnTransparent,
-		&.sapMBtn .sapMBtnDefault,
-		&.sapMBtn .sapMBtnBack,
-		&.sapMBtn .sapMBtnUp {
-			color: @sapUiContentIconColor;
-			background-color: @sapUiButtonLiteBackground;
-			height: 2.5rem;
-
-			.sapUiIcon {
-				color: @sapUiContentIconColor;
-				line-height: 2.5rem;
+			.sapMBtnInner::after,
+			.sapMBtnIcon {
+				background: transparent;
+				color: @sapUiShellInteractiveTextColor;
 			}
-
 			.sapMBtnContent {
-				line-height: 2.5rem;
+				background: transparent;
+				color: @sapUiShellTextColor;
 			}
-		}
 
-		&.sapMBtn:focus .sapMBtnTransparent.sapMFocusable,
-		&.sapMBtn:focus .sapMBtnEmphasized.sapMFocusable,
-		&.sapMBtn:focus .sapMBtnDefault.sapMFocusable,
-		&.sapMBtn:focus .sapMBtnBack.sapMFocusable,
-		&.sapMBtn:focus .sapMBtnUp.sapMFocusable {
-			&::before {
-				outline: @sapUiContentFocusStyle @sapUiContentFocusWidth @sapUiContentFocusColor;
-				border: none !important;
+			&:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnActive {
+				background: @sapUiShellActiveBackground;
+				border-color: @sapUiShellActiveBackground;
 			}
-		}
-
-		&.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnTransparent,
-		&.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnDefault,
-		&.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnBack,
-		&.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnUp {
-			background: @sapUiButtonLiteHoverBackground;
-			color: @sapUiContentIconColor;
-			box-shadow: none;
-		}
-
-		&.sapMBtn:active:not(.sapMBtnDisabled) .sapMBtnTransparent,
-		&.sapMBtn:active:not(.sapMBtnDisabled) .sapMBtnDefault,
-		&.sapMBtn:active:not(.sapMBtnDisabled) .sapMBtnBack,
-		&.sapMBtn:active:not(.sapMBtnDisabled) .sapMBtnUp {
-			background:  @sapUiActive;
-			color: @sapUiContentIconColor;
-			box-shadow: none;
-		}
+			.sapMToggleBtnPressed:not(.sapMBtnDisabled) {
+				background-color: @sapUiShellHoverBackground;
+				.sapMBtnIcon {
+					color: @sapUiShellActiveTextColor;
+				}
+			}
+			&:hover:not(.sapMBtnDisabled) {
+				.sapMToggleBtnPressed:not(.sapMBtnActive), .sapMToggleBtnPressed:not(.sapMBtnDisabled):hover  {
+					background-color: @sapUiShellHoverBackground;
+					.sapMBtnIcon {
+						color: @sapUiShellActiveTextColor;
+					}
+				}
+				>span.sapMBtnInner.sapMBtnHoverable:not(.sapMToggleBtnPressed) {
+					&:not(.sapMBtnActive) {
+						background: @sapUiShellHoverBackground;
+						border: 1px solid @sapUiButtonLiteHoverBorderColor;
+					}
+					&.sapMBtnActive {
+						background: @sapUiShellActiveBackground;
+						color: @sapUiShellActiveTextColor;
+						border: 1px solid @sapUiButtonLiteActiveBorderColor;
+
+							.sapMBtnContent bdi {
+								color: @sapUiShellActiveTextColor;
+							}
+					}
+					&.sapMBtnActive:after,
+					&.sapMBtnActive >.sapMBtnIcon {
+						color: @sapUiShellActiveTextColor;
+					}
+					&:after,
+					>.sapMBtnIcon {
+						color: @sapUiShellInteractiveTextColor;
+					}
+					>.sapMBtnContent,
+					>.sapMBtnContent bdi
+					{
+						color: @sapUiShellTextColor;
+					}
+				}
 
-		&.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized) .sapUiIcon {
-			color: @sapUiContentIconColor;
+				&:active {
+					>.sapMBtnContent,
+					>.sapMBtnInner,
+					>.sapMBtnIcon {
+						color: @sapUiShellTextColor;
+					}
+				}
+			}
 		}
 	}
 }
@@ -136,6 +143,9 @@
 				}
 			}
 		}
+		.sapMSF {
+			padding: 0 0;
+		}
 	}
 }
 
@@ -146,9 +156,10 @@
 .sapTntToolHeader {
 	.sapMTitle {
 		text-shadow: none;
-		font-family: @sapUiFontBlackFamily;
-		font-size: 1.125rem;
+		font-family: @sapFontSemiboldFamily;
+		font-size: @sapFontHeader5Size;
 		line-height: 1.625rem;
+		color: @sapUiShellSubBrandTextColor;
 	}
 
 	.sapMText,
@@ -160,7 +171,7 @@
 	&.sapMIBar.sapMTB .sapMBarChild.sapMText,
 	&.sapMIBar.sapMTB .sapMBarChild.sapMLabel {
 		margin-top: 2px; // to align the text/label with the title
-		margin-left: 0.75rem;
+		margin-left: 0.5rem;
 	}
 }
 
@@ -178,114 +189,46 @@
 // ==========================================================================
 
 .sapTntToolHeader {
-	.sapMSF {
-		height: 2.5rem;
-		padding-top: 0px;
-
-		&:not(.sapMSFVal) .sapMSFS {
-			pointer-events: none;
-		}
-	}
-
-	.sapMSF .sapMSFF {
-		border-radius: 2rem;
-		height: 2.5rem;
+	.sapMSFF {
+		background: @sapUiFieldBackgroundStyle;
 		background-color: @sapUiShellInteractiveBackground;
+		box-shadow: @sapUiFieldShadow;
+		border: none;
+		color: @sapUiShellInteractiveTextColor;
+		border-radius: 1.125rem;
+		height: 2.25rem;
 
-		&:hover {
-			background: @sapUiShellHoverBackground;
-			box-shadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 16), 0 0.5rem 1rem 0 fade(@sapUiContentShadowColor, 16);
+		.sapMSFB {
+			width: 1.75rem;
+			height: 1.75rem;
+			line-height: 1.75rem;
+			font-size: 1rem;
+			text-align: center;
+			margin-top: 0.25rem;
+			padding: 0;
+			right: 0;
+			top: 0;
+			margin-right: 0.25rem;
 		}
 
-		.sapMSFI {
-			color: @sapUiShellTextColor;
+		.sapMSFB:hover {
+			background: @sapUiShellHoverBackground;
+			box-shadow: @sapUiButtonLiteHoverBorderColor;
+			border-radius: 1.125rem;
+			height: 1.75rem;
+			color: @sapUiShellInteractiveTextColor;
 		}
-	}
-
-	.sapMSF.sapMFocus .sapMSFF {
-		background: @sapUiShellActiveBackground;
-	}
-
-	.sapMSFB {
-		width: 2rem;
-		height: 2rem;
-		margin-top: 0.25rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.sapMSFB.sapMSFBA {
-		background: none;
-		box-shadow: none;
-	}
-
-	.sapMSFSSI {
-		display: inline;
-	}
-
-	.sapMSFF .sapMSFSSI:before {
-		content: "\e00d";
-		color: @sapUiContentNonInteractiveIconColor;
-		display: block;
-		font-style: normal;
-		width: 1rem;
-		height: 1rem;
-		font-family: 'SAP-icons';
-		margin-right: 0.375rem;
-		margin-top: 0.75rem;
-	}
-
-	.sapMSFS::after {
-		content: "\e1ed";
-	}
-
-	.sapMSFR::after,
-	.sapMSFS::after  {
-		display: block;
-		width: 1.25rem;
-		height: 1.25rem;
-		border-radius: 0.75rem;
-		font-size: 0.75rem;
-		line-height: 1.25rem;
-	}
 
-	.sapMSFS {
-		margin-right: 0.25rem;
-		border: none;
-	}
-
-	.sapMSFS:active,
-	.sapMSFS:hover,
-	.sapMSFR:active,
-	.sapMSFR:hover {
-		background: none;
-		box-shadow: none;
-		line-height: 1.25rem;
-	}
-
-	.sapMSFS:active::after,
-	.sapMSFS.sapMSFBA::after,
-	.sapMSFR:active::after {
-		background: @sapUiActive;
-		color: @sapUiContentIconColor;
-	}
-
-	.sapMSFS:hover::after,
-	.sapMSFR:hover::after {
-		background: @sapUiHover;
-		color: @sapUiContentIconColor;
-	}
-
-	.sapMSFVal.sapMFocus .sapMSFF {
-		box-shadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 16), 0 0.5rem 1rem 0 fade(@sapUiContentShadowColor, 16);
-
-		&::before {
-			display: none;
+		.sapMSFR {
+			margin-right: 0;
 		}
 
-		.sapMSFS.sapMSFB::after {
-			outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		.sapMSFB:active,
+		.sapMSFB.sapMSFBA {
+			background: @sapUiShellActiveBackground;
+			box-shadow: @sapUiContentSelectedShadow;
+			border-radius: 1.125rem;
+			color: @sapUiShellActiveTextColor;
 		}
 	}
 }
@@ -301,7 +244,7 @@
 		}
 
 		.sapMSFB {
-			margin-top: 0.1875rem;
+			margin-top: 0.125rem;
 			width: 1.625rem;
 			height: 1.625rem;
 		}
@@ -309,10 +252,6 @@
 		.sapMSFS {
 			margin-right: 0.1875rem;
 		}
-
-		.sapMSFF .sapMSFSSI:before {
-			margin-top: 0.5rem;
-		}
 	}
 }
 
@@ -339,7 +278,7 @@
 	&.sapMIBar.sapMTB {
 		.sapMBarChild.sapMImg:first-child,
 		.sapMBarChild.sapMBtn + .sapMBarChild.sapMImg:first-of-type {
-			margin-left: 0.75rem;
+			margin-left: 0.5rem;
 		}
 	}
 

package/src/sap/tnt/themes/sap_horizon/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/tnt/themes/sap_horizon_dark/ToolHeader.less

@@ -19,7 +19,7 @@
 .sapTntToolHeader:not(.sapUshellShellToolHeader) {
 	&.sapMTB {
 		background-color: @sapUiShellColor;
-		padding: 0 1.25rem 0 0.75rem;
+		padding: 0 1rem 0 0.875rem;
 	}
 
 	&.sapMTBStandard {
@@ -28,10 +28,6 @@
 }
 
 .sapTntToolHeader {
-	&.sapMIBar.sapMTB .sapMBarChild ~ .sapMBarChild {
-		margin: 0 0 0 0.375rem;
-	}
-
 	&.sapMIBar.sapMTB .sapMBarChild.sapMTBSeparator {
 		background: none;
 		width: 0.75rem;
@@ -45,59 +41,70 @@
 .sapTntToolHeader {
 	.sapMBarChild:not(.sapMMenuBtn) {
 		&.sapMBtn {
-			padding: 0.125rem 0;
-			min-width: 2.5rem;
-		}
-
-		&.sapMBtn .sapMBtnTransparent,
-		&.sapMBtn .sapMBtnDefault,
-		&.sapMBtn .sapMBtnBack,
-		&.sapMBtn .sapMBtnUp {
-			color: @sapUiContentIconColor;
-			background-color: @sapUiButtonLiteBackground;
-			height: 2.5rem;
-
-			.sapUiIcon {
-				color: @sapUiContentIconColor;
-				line-height: 2.5rem;
+			.sapMBtnInner::after,
+			.sapMBtnIcon {
+				background: transparent;
+				color: @sapUiShellInteractiveTextColor;
 			}
-
 			.sapMBtnContent {
-				line-height: 2.5rem;
+				background: transparent;
+				color: @sapUiShellTextColor;
 			}
-		}
 
-		&.sapMBtn:focus .sapMBtnTransparent.sapMFocusable,
-		&.sapMBtn:focus .sapMBtnEmphasized.sapMFocusable,
-		&.sapMBtn:focus .sapMBtnDefault.sapMFocusable,
-		&.sapMBtn:focus .sapMBtnBack.sapMFocusable,
-		&.sapMBtn:focus .sapMBtnUp.sapMFocusable {
-			&::before {
-				outline: @sapUiContentFocusStyle @sapUiContentFocusWidth @sapUiContentFocusColor;
-				border: none !important;
+			&:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnActive {
+				background: @sapUiShellActiveBackground;
+				border-color: @sapUiShellActiveBackground;
 			}
-		}
-
-		&.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnTransparent,
-		&.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnDefault,
-		&.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnBack,
-		&.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnUp {
-			background: @sapUiButtonLiteHoverBackground;
-			color: @sapUiContentIconColor;
-			box-shadow: none;
-		}
-
-		&.sapMBtn:active:not(.sapMBtnDisabled) .sapMBtnTransparent,
-		&.sapMBtn:active:not(.sapMBtnDisabled) .sapMBtnDefault,
-		&.sapMBtn:active:not(.sapMBtnDisabled) .sapMBtnBack,
-		&.sapMBtn:active:not(.sapMBtnDisabled) .sapMBtnUp {
-			background:  @sapUiActive;
-			color: @sapUiContentIconColor;
-			box-shadow: none;
-		}
+			.sapMToggleBtnPressed:not(.sapMBtnDisabled) {
+				background-color: @sapUiShellHoverBackground;
+				.sapMBtnIcon {
+					color: @sapUiShellActiveTextColor;
+				}
+			}
+			&:hover:not(.sapMBtnDisabled) {
+				.sapMToggleBtnPressed:not(.sapMBtnActive), .sapMToggleBtnPressed:not(.sapMBtnDisabled):hover  {
+					background-color: @sapUiShellHoverBackground;
+					.sapMBtnIcon {
+						color: @sapUiShellActiveTextColor;
+					}
+				}
+				>span.sapMBtnInner.sapMBtnHoverable:not(.sapMToggleBtnPressed) {
+					&:not(.sapMBtnActive) {
+						background: @sapUiShellHoverBackground;
+						border: 1px solid @sapUiButtonLiteHoverBorderColor;
+					}
+					&.sapMBtnActive {
+						background: @sapUiShellActiveBackground;
+						color: @sapUiShellActiveTextColor;
+						border: 1px solid @sapUiButtonLiteActiveBorderColor;
+
+							.sapMBtnContent bdi {
+								color: @sapUiShellActiveTextColor;
+							}
+					}
+					&.sapMBtnActive:after,
+					&.sapMBtnActive >.sapMBtnIcon {
+						color: @sapUiShellActiveTextColor;
+					}
+					&:after,
+					>.sapMBtnIcon {
+						color: @sapUiShellInteractiveTextColor;
+					}
+					>.sapMBtnContent,
+					>.sapMBtnContent bdi
+					{
+						color: @sapUiShellTextColor;
+					}
+				}
 
-		&.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized) .sapUiIcon {
-			color: @sapUiContentIconColor;
+				&:active {
+					>.sapMBtnContent,
+					>.sapMBtnInner,
+					>.sapMBtnIcon {
+						color: @sapUiShellTextColor;
+					}
+				}
+			}
 		}
 	}
 }
@@ -136,6 +143,10 @@
 				}
 			}
 		}
+
+		.sapMSF {
+			padding: 0 0;
+		}
 	}
 }
 
@@ -146,9 +157,10 @@
 .sapTntToolHeader {
 	.sapMTitle {
 		text-shadow: none;
-		font-family: @sapUiFontBlackFamily;
-		font-size: 1.125rem;
+		font-family: @sapFontSemiboldFamily;
+		font-size: @sapFontHeader5Size;
 		line-height: 1.625rem;
+		color: @sapUiShellSubBrandTextColor;
 	}
 
 	.sapMText,
@@ -160,7 +172,7 @@
 	&.sapMIBar.sapMTB .sapMBarChild.sapMText,
 	&.sapMIBar.sapMTB .sapMBarChild.sapMLabel {
 		margin-top: 2px; // to align the text/label with the title
-		margin-left: 0.75rem;
+		margin-left: 0.5rem;
 	}
 }
 
@@ -178,114 +190,47 @@
 // ==========================================================================
 
 .sapTntToolHeader {
-	.sapMSF {
-		height: 2.5rem;
-		padding-top: 0px;
-
-		&:not(.sapMSFVal) .sapMSFS {
-			pointer-events: none;
-		}
-	}
 
-	.sapMSF .sapMSFF {
-		border-radius: 2rem;
-		height: 2.5rem;
+	.sapMSFF {
+		background: @sapUiFieldBackgroundStyle;
 		background-color: @sapUiShellInteractiveBackground;
+		box-shadow: @sapUiFieldShadow;
+		border: none;
+		color: @sapUiShellInteractiveTextColor;
+		border-radius: 1.125rem;
+		height: 2.25rem;
 
-		&:hover {
-			background: @sapUiShellHoverBackground;
-			box-shadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 16), 0 0.5rem 1rem 0 fade(@sapUiContentShadowColor, 32), 0 0 0 0.0625rem fade(@sapUiFieldBorderColor, 16);
+		.sapMSFB {
+			width: 1.75rem;
+			height: 1.75rem;
+			line-height: 1.75rem;
+			font-size: 1rem;
+			text-align: center;
+			margin-top: 0.25rem;
+			padding: 0;
+			right: 0;
+			top: 0;
+			margin-right: 0.25rem;
 		}
 
-		.sapMSFI {
-			color: @sapUiShellTextColor;
+		.sapMSFB:hover {
+			background: @sapUiShellHoverBackground;
+			box-shadow: @sapUiButtonLiteHoverBorderColor;
+			border-radius: 1.125rem;
+			height: 1.75rem;
+			color: @sapUiShellInteractiveTextColor;
 		}
-	}
-
-	.sapMSF.sapMFocus .sapMSFF {
-		background: @sapUiShellActiveBackground;
-	}
-
-	.sapMSFB {
-		width: 2rem;
-		height: 2rem;
-		margin-top: 0.25rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.sapMSFB.sapMSFBA {
-		background: none;
-		box-shadow: none;
-	}
-
-	.sapMSFSSI {
-		display: inline;
-	}
-
-	.sapMSFF .sapMSFSSI:before {
-		content: "\e00d";
-		color: @sapUiContentNonInteractiveIconColor;
-		display: block;
-		font-style: normal;
-		width: 1rem;
-		height: 1rem;
-		font-family: 'SAP-icons';
-		margin-right: 0.375rem;
-		margin-top: 0.75rem;
-	}
-
-	.sapMSFS::after {
-		content: "\e1ed";
-	}
-
-	.sapMSFR::after,
-	.sapMSFS::after  {
-		display: block;
-		width: 1.25rem;
-		height: 1.25rem;
-		border-radius: 0.75rem;
-		font-size: 0.75rem;
-		line-height: 1.25rem;
-	}
 
-	.sapMSFS {
-		margin-right: 0.25rem;
-		border: none;
-	}
-
-	.sapMSFS:active,
-	.sapMSFS:hover,
-	.sapMSFR:active,
-	.sapMSFR:hover {
-		background: none;
-		box-shadow: none;
-		line-height: 1.25rem;
-	}
-
-	.sapMSFS:active::after,
-	.sapMSFS.sapMSFBA::after,
-	.sapMSFR:active::after {
-		background: @sapUiActive;
-		color: @sapUiContentIconColor;
-	}
-
-	.sapMSFS:hover::after,
-	.sapMSFR:hover::after {
-		background: @sapUiHover;
-		color: @sapUiContentIconColor;
-	}
-
-	.sapMSFVal.sapMFocus .sapMSFF {
-		box-shadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 16), 0 0.5rem 1rem 0 fade(@sapUiContentShadowColor, 32), 0 0 0 0.0625rem fade(@sapUiFieldBorderColor, 16);
-
-		&::before {
-			display: none;
+		.sapMSFR {
+			margin-right: 0;
 		}
 
-		.sapMSFS.sapMSFB::after {
-			outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		.sapMSFB:active,
+		.sapMSFB.sapMSFBA {
+			background: @sapUiShellActiveBackground;
+			box-shadow: @sapUiContentSelectedShadow;
+			border-radius: 1.125rem;
+			color: @sapUiShellActiveTextColor;
 		}
 	}
 }
@@ -301,7 +246,7 @@
 		}
 
 		.sapMSFB {
-			margin-top: 0.1875rem;
+			margin-top: 0.125rem;
 			width: 1.625rem;
 			height: 1.625rem;
 		}
@@ -309,10 +254,6 @@
 		.sapMSFS {
 			margin-right: 0.1875rem;
 		}
-
-		.sapMSFF .sapMSFSSI:before {
-			margin-top: 0.5rem;
-		}
 	}
 }
 
@@ -339,7 +280,7 @@
 	&.sapMIBar.sapMTB {
 		.sapMBarChild.sapMImg:first-child,
 		.sapMBarChild.sapMBtn + .sapMBarChild.sapMImg:first-of-type {
-			margin-left: 0.75rem;
+			margin-left: 0.5rem;
 		}
 	}
 

package/src/sap/tnt/themes/sap_horizon_dark/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.
  */