@openui5/themelib_sap_horizon 1.99.1 → 1.102.0

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

@@ -0,0 +1,652 @@
+/* =================================== */
+/* CSS for control sap.tnt/ToolHeader  */
+/* Evening Horizon theme               */
+/* =================================== */
+
+@_sap_tnt_ToolHeader_Height: 2.75rem;
+@_sap_tnt_ToolHeader_IconHeight: 0.75rem;
+@_sap_tnt_ToolHeader_DisabledOpacity: @sapUiContentDisabledOpacity;
+@_sap_tnt_ToolHeader_ArrowHeight: 0.125rem;
+@_sap_tnt_ToolHeader_ArrowMargin: 0 -0.25rem;
+@_sap_tnt_ToolHeader_Padding: 0 0.75rem;
+@_sap_tnt_ToolHeader_ArrowMarginBottom: 0.25rem;
+
+.sapTntToolHeader {
+	&.sapMTB {
+		background-color: @sapUiShellColor;
+	}
+
+	&.sapMTBStandard {
+		border-bottom: none;
+	}
+}
+
+// ==========================================================================
+// sap.m.Button overriding
+// ==========================================================================
+
+.sapTntToolHeader {
+	.sapMBtn .sapMBtnTransparent,
+	.sapMBtn .sapMBtnDefault,
+	.sapMBtn .sapMBtnBack,
+	.sapMBtn .sapMBtnUp {
+		color: @sapUiShellInteractiveTextColor;
+		background-color: transparent;
+		border-color: transparent;
+
+		.sapUiIcon {
+			color: @sapUiShellInteractiveTextColor;
+		}
+	}
+
+	.sapMBtn .sapMBtnEmphasized {
+		color: @sapUiShellTextColor;
+		background: transparent;
+		border-color: transparent;
+
+		.sapUiIcon {
+			color: @sapUiShellInteractiveTextColor;
+		}
+	}
+
+	.sapMBtn:focus .sapMBtnTransparent.sapMFocusable,
+	.sapMBtn:focus .sapMBtnEmphasized.sapMFocusable,
+	.sapMBtn:focus .sapMBtnDefault.sapMFocusable,
+	.sapMBtn:focus .sapMBtnBack.sapMFocusable,
+	.sapMBtn:focus .sapMBtnUp.sapMFocusable {
+		outline-color: @_sap_tnt_ToolHeader_BorderColor;
+	}
+
+	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnTransparent,
+	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnDefault,
+	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnBack,
+	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnUp {
+		background: @sapUiShellHoverBackground;
+		border-color: transparent;
+	}
+
+	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnEmphasized {
+		color: @sapUiShellTextColor;
+		background: @sapUiShellHoverBackground;
+		border-color: transparent;
+		.sapUiIcon {
+			color: @sapUiShellInteractiveTextColor;
+		}
+	}
+
+	.sapMBtn:not(.sapMBtnDisabled) .sapMBtnEmphasized.sapMBtnActive,
+	.sapMBtn:not(.sapMBtnDisabled) .sapMToggleBtnPressed {
+		background: @sapUiShellActiveBackground;
+		color: @sapUiShellActiveTextColor;
+		border-color: transparent;
+
+		&::after {
+			color: @sapUiShellActiveTextColor;
+			background: @sapUiShellActiveBackground;
+		}
+
+		.sapUiIcon {
+			color: @sapUiShellInteractiveTextColor;
+		}
+	}
+
+	.sapMBtn:not(.sapMBtnDisabled) .sapMBtnIconFirst.sapMBtnTransparent.sapMBtnActive,
+	.sapMBtn:not(.sapMBtnDisabled) .sapMBtnIconFirst.sapMBtnDefault.sapMBtnActive,
+	.sapMBtn:not(.sapMBtnDisabled) .sapMBtnIconFirst.sapMBtnBack.sapMBtnActive,
+	.sapMBtn:not(.sapMBtnDisabled) .sapMBtnIconFirst.sapMBtnUp.sapMBtnActive {
+		background: @sapUiShellActiveBackground;
+		color: @sapUiShellInteractiveTextColor;
+		border-color: transparent;
+
+		&::after {
+			color: @sapUiShellInteractiveTextColor;
+			background: @sapUiShellActiveBackground;
+		}
+
+		.sapUiIcon {
+			color: @sapUiShellInteractiveTextColor
+		}
+	}
+
+	.sapMBtn:not(.sapMBtnDisabled) .sapMFocusable.sapMBtnTransparent.sapMBtnActive,
+	.sapMBtn:not(.sapMBtnDisabled) .sapMFocusable.sapMBtnEmphasized.sapMBtnActive,
+	.sapMBtn:not(.sapMBtnDisabled) .sapMFocusable.sapMBtnDefault.sapMBtnActive,
+	.sapMBtn:not(.sapMBtnDisabled) .sapMFocusable.sapMBtnBack.sapMBtnActive,
+	.sapMBtn:not(.sapMBtnDisabled) .sapMFocusable.sapMBtnUp.sapMBtnActive {
+		outline-color: @_sap_tnt_ToolHeader_BorderColor;
+		background: @sapUiShellActiveBackground;
+	}
+
+	.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnTransparent:not(.sapMBtnActive):focus,
+	.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized:not(.sapMBtnActive):focus,
+	.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnDefault:not(.sapMBtnActive):focus,
+	.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnBack:not(.sapMBtnActive):focus,
+	.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnUp:not(.sapMBtnActive):focus {
+		outline-color: @_sap_tnt_ToolHeader_BorderColor;
+	}
+
+	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnHoverable.sapMBtnTransparent:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
+	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnHoverable.sapMBtnDefault:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
+	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnHoverable.sapMBtnBack:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
+	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnHoverable.sapMBtnUp:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
+		background: @sapUiShellHoverBackground;
+		border-color: transparent;
+		bdi {
+			color:@sapUiShellInteractiveTextColor
+		}
+	}
+
+	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnHoverable.sapMBtnEmphasized:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
+		background: @sapUiShellHoverBackground;
+		border-color: transparent;
+		bdi {
+			color: @sapUiShellTextColor;
+		}
+	}
+
+	.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnTransparent:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
+	.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
+	.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnDefault:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
+	.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnBack:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
+	.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnUp:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon {
+		color: @sapUiShellInteractiveTextColor;
+		border-color: transparent;
+	}
+
+	.sapMBtn.sapMBtnDisabled {
+		opacity: @_sap_tnt_ToolHeader_DisabledOpacity;
+	}
+
+	.sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnTransparent:not(.sapMToggleBtnPressed),
+	.sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnEmphasized:not(.sapMToggleBtnPressed),
+	.sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnDefault:not(.sapMToggleBtnPressed),
+	.sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnBack:not(.sapMToggleBtnPressed),
+	.sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnUp:not(.sapMToggleBtnPressed) {
+		border-color: transparent;
+	}
+ }
+
+html.sap-desktop .sapTntToolHeader .sapMFooter-CTX .sapMBtn:focus .sapMBtnFocusDiv,
+.sapTntToolHeader .sapMBtn:focus .sapMBtnFocusDiv {
+	border-color: @_sap_tnt_ToolHeader_BorderColor;
+}
+
+html.sap-desktop .sapTntToolHeader .sapMFooter-CTX .sapMBtn:focus > .sapMBtnEmphasized.sapMBtnActive > .sapMBtnFocusDiv,
+ html.sap-desktop .sapTntToolHeader .sapMBtn:focus > .sapMBtnEmphasized > .sapMBtnFocusDiv {
+	border-color: @_sap_tnt_ToolHeader_BorderColor;
+}
+
+// ==========================================================================
+// sap.m.MenuButton overriding
+// ==========================================================================
+
+.sapTntToolHeader {
+	.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
+		color: @sapUiShellInteractiveTextColor;
+	}
+
+	.sapMSB:focus .sapMSBInner::after {
+		border-color: @_sap_tnt_ToolHeader_BorderColor;
+	}
+
+	.sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled)  .sapMBtnInner.sapMBtnActive {
+		background: @sapUiShellActiveBackground;
+	}
+
+	.sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnActive::after {
+		color: @sapUiShellInteractiveTextColor;
+		background-color: transparent;
+	}
+
+	.sapMMenuBtn .sapMBtn:hover > .sapMBtnHoverable.sapMBtnEmphasized, .sapMMenuBtn span.sapMBtnInner.sapMBtnEmphasized {
+		border-left: transparent;
+	}
+
+	.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnActive.sapMBtnInner::after {
+		height: auto;
+	}
+}
+
+// ==========================================================================
+// sap.m.Text, sap.m.Title and sap.m.Label overriding
+// ==========================================================================
+
+.sapTntToolHeader {
+	.sapMText,
+	.sapMTitle,
+	.sapMLabel {
+		color: @sapUiShellTextColor;
+	}
+
+	.sapMTitle {
+		text-shadow: none;
+	}
+}
+
+// ==========================================================================
+// sap.ui.core.Icon overriding
+// ==========================================================================
+
+.sapTntToolHeader {
+	.sapUiIcon:not(.sapMITBInlineIcon) {
+		color: @sapUiShellTextColor;
+		outline-color: transparent;
+
+		&.sapUiIconPointer:focus {
+			outline-color: @sapUiContentContrastFocusColor;
+		}
+	}
+
+	// no backgrounds
+	.sapUiIcon:not(.sapMITBInlineIcon) {
+		&.sapUiIconColorCritical {
+			color: lighten(saturate(spin(@sapUiCriticalText, 8), 4), 21);
+		}
+
+		&.sapUiIconColorNegative {
+			color: lighten(@sapUiNegativeText, 40);
+		}
+
+		&.sapUiIconColorPositive {
+			color: lighten(desaturate(spin(@sapUiPositiveText, 335), 28), 50);
+		}
+
+		&.sapUiIconColorNeutral {
+			color: lighten(saturate(spin(@sapUiNeutralText, 350), 4), 41);
+		}
+	}
+
+	// backgrounds
+	.sapUiIcon:not(.sapMITBInlineIcon) {
+		&.sapUiIconBGColorContrast {
+			color: @sapUiShellTextColor;
+			background: transparent;
+		}
+
+		&.sapUiIconBGColorCritical {
+			color: @sapUiBaseText;
+			background: lighten(saturate(spin(@sapUiCriticalElement, 8), 4), 21);
+		}
+
+		&.sapUiIconBGColorNegative {
+			color: @sapUiBaseText;
+			background: lighten(@sapUiNegativeElement, 40);
+		}
+
+		&.sapUiIconBGColorNeutral {
+			color: @sapUiBaseText;
+			background: lighten(saturate(spin(@sapUiNeutralElement, 350), 4), 41);
+		}
+
+		&.sapUiIconBGColorPositive {
+			color: @sapUiBaseText;
+			background: lighten(desaturate(spin(@sapUiPositiveElement, 335), 28), 50);
+		}
+	}
+}
+
+// ==========================================================================
+// sap.m.Select overriding
+// ==========================================================================
+
+.sapTntToolHeader {
+	.sapMSlt,
+	.sapMSlt:hover {
+		background: transparent;
+		border-color: lighten(@sapUiShellBorderColor,30);
+		color: @sapUiShellTextColor;
+	}
+
+	.sapMSlt.sapMSltExpanded {
+		border-color: lighten(@sapUiShellBorderColor,30);
+	}
+
+	.sapMSltHoverable:not(.sapMSltPressed):hover > .sapMSltArrow {
+		background-color: transparent;
+		border-color: lighten(@sapUiShellBorderColor,30);
+	}
+
+	.sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover {
+		background: @sapUiShellHoverBackground;
+		border-color: lighten(@sapUiShellInteractiveBorderColor, 10);
+	}
+}
+html.sap-desktop .sapTntToolHeader .sapMSlt:not(.sapMSltExpanded):not(.sapMSltDisabled):not(.sapMSltState):focus {
+	outline-color: @_sap_tnt_ToolHeader_BorderColor;
+}
+
+html.sap-desktop .sapTntToolHeader .sapMSlt:not(.sapMSltExpanded):not(.sapMSltDisabled):not(.sapMSltState):focus::before {
+	outline-color: @_sap_tnt_ToolHeader_BorderColor;
+}
+
+.sapTntToolHeader {
+	.sapMSlt .sapUiIcon,
+	.sapMSlt .sapMSelectListItemText,
+	.sapMSlt .sapMSltArrow {
+		color: @sapUiShellTextColor;
+	}
+
+	.sapMSltPressed > .sapMSltArrow {
+		background: transparent;
+	}
+
+	.sapMSlt.sapMSltPressed:not(.sapMSltDisabled) {
+		background-color: @sapUiShellActiveBackground;
+
+		&.sapMSltExpanded {
+			background-color: @sapUiShellActiveBackground;
+		}
+	}
+
+	.sapMSltDisabled {
+		opacity: @_sap_tnt_ToolHeader_DisabledOpacity;
+	}
+}
+
+/* IconOnly */
+
+.sapTntToolHeader {
+	.sapMSltIconOnly.sapMSltHoverable:hover:not(.sapMSltState) {
+		background-color:  @sapUiShellHoverBackground;
+		border-color: transparent;
+	}
+
+	.sapMSltIconOnly.sapMSltExpanded.sapMSltPressed.sapMSltHoverable:hover {
+		background-color:  @sapUiShellHoverBackground;
+		border-color: transparent;
+	}
+
+	.sapMSltIconOnly.sapMSltHoverable .sapUiIcon {
+		color: @sapUiShellInteractiveTextColor;
+	}
+
+	.sapMSltIconOnly.sapMSltHoverable:active .sapUiIcon {
+		color: @sapUiShellActiveTextColor;
+	}
+
+	.sapMSltIconOnly.sapMSltExpanded.sapMSltPressed:not(.sapMSltDisabled) {
+		background-color: @sapUiShellActiveBackground;
+		.sapUiIcon {
+			color: @sapUiShellActiveTextColor;
+		}
+	}
+
+	.sapMSltIconOnly.sapMSltPressed.sapMSltHoverable:not(.sapMSltState):hover {
+		background-color: @sapUiShellActiveBackground;
+	}
+
+	.sapMSltPressed.sapMSltIconOnly:not(.sapMSltDisabled) {
+		background-color: @sapUiShellActiveBackground;
+		border-color: transparent;
+	}
+}
+
+// ==========================================================================
+// sap.m.SearchField overriding
+// ==========================================================================
+
+.sapTntToolHeader {
+	.sapMSF .sapMSFF {
+		background: transparent;
+		border-color: lighten(@sapUiShellBorderColor,30);
+		color: @sapUiShellInteractiveTextColor;
+	}
+
+	.sapMSFDisabled {
+		opacity: @_sap_tnt_ToolHeader_DisabledOpacity;
+	}
+
+	.sapMSF:not(.sapMSFDisabled) .sapMSFF:hover {
+		border-color: lighten(@sapUiShellInteractiveBorderColor, 10);
+	}
+
+	.sapMSFF>.sapMSFB,
+	.sapMSF.sapMFocus>.sapMSFF>.sapMSFB,
+	.sapMSFI::placeholder {
+		color: @sapUiShellInteractiveTextColor;
+	}
+
+	.sapMSFI,
+	.sapMSFB {
+		color: @sapUiShellTextColor;
+	}
+
+	.sapMSFB:hover {
+		background-color: @sapUiShellHoverBackground;
+	}
+
+	.sapMSFF>.sapMSFB:not(.sapMSFBF):active,
+	.sapMSFF>.sapMSFB.sapMSFBA {
+		background-color: @sapUiButtonLiteActiveBackground;
+		color: @sapUiShellInteractiveTextColor;
+	}
+
+	.sapMSFF > .sapMSFB:not(.sapMSFBF):active,
+	.sapMSFF > .sapMSFB.sapMSFBA {
+		background-color: @sapUiShellActiveBackground;
+		color: @sapUiShellActiveTextColor;
+	}
+
+	.sapMFocus > .sapMSFF > .sapMSFB {
+		color: @sapUiShellInteractiveTextColor;
+	}
+}
+
+html.sap-desktop .sapTntToolHeader .sapMFocus > .sapMSFF::before {
+	border-color: @sapUiContentContrastFocusColor;
+}
+
+// ==========================================================================
+// sap.m.IconTabHeader overriding
+// ==========================================================================
+
+.sapTntToolHeader {
+	.sapMITH {
+		height: 2.75rem;
+		background-color: transparent;
+	}
+
+    .sapMITH .sapMITBText {
+      color: @sapUiShellInteractiveTextColor;
+      text-shadow: none;
+    }
+	.sapMITH .sapMITBDisabled {
+		opacity: @_sap_tnt_ToolHeader_DisabledOpacity;
+	}
+
+	.sapMITH {
+		border-color: transparent;
+	}
+
+	.sapMITH {
+		.sapMITHStartOverflow,
+		.sapMITHEndOverflow {
+			.sapMITBItem {
+				background-color: transparent;
+				border: none;
+
+				&:hover {
+					background: @sapUiShellHoverBackground;
+				}
+
+				&:active {
+					background: @sapUiShellActiveBackground;
+					color: @sapUiShellActiveTextColor;
+				}
+
+				.sapMITBText {
+					color: @sapUiShellInteractiveTextColor;
+
+					.sapMITHShowSubItemsIcon .sapUiIcon {
+						color: @sapUiShellInteractiveTextColor;
+					}
+				}
+			}
+		}
+	}
+
+	.sapMITBHead .sapMITBFilter .sapMITBText + .sapMITBContentArrow {
+		height: 0.875rem;
+	}
+}
+
+/* Focus Colors*/
+
+html.sap-desktop .sapTntToolHeader {
+
+	/* Custom focus outline */
+	.sapMITBTextOnly .sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBText,
+	.sapMITBItem:not(.sapUiDnDDragging):focus.sapMITBAll {
+		&::after {
+			border-color: @_sap_tnt_ToolHeader_BorderColor;
+		}
+	}
+
+	.sapMITHStartOverflow,
+	.sapMITHEndOverflow {
+		.sapMITBItem:not(.sapUiDnDDragging) {
+			&:focus::after {
+				border-color: @_sap_tnt_ToolHeader_BorderColor;
+			}
+		}
+	}
+}
+
+// ==========================================================================
+// sap.m.ObjectStatus overriding
+// ==========================================================================
+
+.sapTntToolHeader {
+	.sapMObjStatus {
+		.sapMObjStatusText,
+		.sapMObjStatusIcon {
+			text-shadow: none;
+		}
+	}
+
+	.sapMObjStatus.sapMObjStatusError {
+		.sapMObjStatusText,
+		.sapMObjStatusIcon .sapUiIcon {
+			color: lighten(@sapUiNegativeText, 40);
+		}
+	}
+
+	.sapMObjStatus.sapMObjStatusInformation {
+		.sapMObjStatusText,
+		.sapMObjStatusIcon .sapUiIcon {
+			color: lighten(desaturate(spin(@sapUiInformativeElement, 357), 6), 34);
+		}
+	}
+
+	.sapMObjStatus.sapMObjStatusNone {
+		.sapMObjStatusText,
+		.sapMObjStatusIcon .sapUiIcon {
+			color: lighten(saturate(spin(@sapUiNeutralText, 350), 4), 41);
+		}
+	}
+
+	.sapMObjStatus.sapMObjStatusSuccess {
+		.sapMObjStatusText,
+		.sapMObjStatusIcon .sapUiIcon {
+			color: lighten(desaturate(spin(@sapUiPositiveText, 335), 28), 50);
+		}
+	}
+
+	.sapMObjStatus.sapMObjStatusWarning {
+		.sapMObjStatusText,
+		.sapMObjStatusIcon .sapUiIcon {
+			color: lighten(saturate(spin(@sapUiCriticalText, 8), 4), 21);
+		}
+	}
+
+	//Inverted
+
+	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusError {
+		.sapMObjStatusText,
+		.sapMObjStatusIcon,
+		.sapMObjStatusIcon .sapUiIcon {
+			background-color: lighten(@sapUiNegativeElement, 40);
+		}
+	}
+
+	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusInformation {
+		.sapMObjStatusText,
+		.sapMObjStatusIcon,
+		.sapMObjStatusIcon .sapUiIcon {
+			background-color: lighten(desaturate(spin(@sapUiInformativeElement, 357), 6), 34);
+		}
+	}
+
+	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusNone {
+		.sapMObjStatusText,
+		.sapMObjStatusIcon,
+		.sapMObjStatusIcon .sapUiIcon {
+			background-color: lighten(saturate(spin(@sapUiNeutralElement, 350), 4), 41);
+		}
+	}
+
+	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusSuccess {
+		.sapMObjStatusText,
+		.sapMObjStatusIcon,
+		.sapMObjStatusIcon .sapUiIcon {
+			background-color: lighten(desaturate(spin(@sapUiPositiveElement, 335), 28), 50);
+		}
+	}
+
+	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusWarning {
+		.sapMObjStatusText,
+		.sapMObjStatusIcon,
+		.sapMObjStatusIcon .sapUiIcon {
+			background-color: lighten(saturate(spin(@sapUiCriticalElement, 8), 4), 21);
+		}
+	}
+
+	.sapMObjStatus.sapMObjStatusInverted {
+		.sapMObjStatusIcon .sapUiIcon {
+			height: @_sap_tnt_ToolHeader_IconHeight;
+			vertical-align: text-top;
+		}
+		.sapMObjStatusText,
+		.sapMObjStatusIcon .sapUiIcon{
+
+			color: @sapUiBaseText;
+		}
+	}
+
+	.sapMObjStatus .sapMObjStatusTitle {
+		color: @sapUiShellActiveTextColor;
+	}
+}
+
+html.sap-desktop .sapTntToolHeader .sapMObjStatusActive:focus .sapMObjStatusLink::after {
+	outline-color: @_sap_tnt_ToolHeader_BorderColor;
+}
+
+// ==========================================================================
+// sap.m.Avatar / sap.f.Avatar overriding
+// ==========================================================================
+.sapTntToolHeader .sapFAvatarFocusable:focus {
+	outline-color: @sapUiContentContrastFocusColor;
+}
+
+// ==========================================================================
+// sap.m.Image overriding
+// ==========================================================================
+.sapTntToolHeader .sapMImgFocusable:focus {
+	outline-color: @sapUiContentContrastFocusColor;
+}
+
+// ==========================================================================
+// sap.f.Breadcrumbs overriding
+// ==========================================================================
+.sapTntToolHeader .sapMBreadcrumbs {
+	.sapMBreadcrumbsItem,
+	.sapMLnk,
+	.sapMSltIcon:before{
+		color: @sapUiShellInteractiveTextColor;
+	}
+
+	.sapMBreadcrumbsSeparator {
+		color: @sapUiShellTextColor;
+	}
+}

package/src/sap/tnt/themes/sap_horizon_dark/ToolPage.less

@@ -0,0 +1,7 @@
+/* ================================= */
+/* CSS for control sap.tnt/ToolPage  */
+/* Evening Horizon theme             */
+/* ================================= */
+
+@_sap_tnt_ToolPage_AsideWidthOnTablet : 3.5rem;
+@_sap_tnt_ToolPage_HeaderHeight : 2.75rem;

package/src/sap/tnt/themes/sap_horizon_dark/library.source.less

@@ -0,0 +1,15 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+@import "../base/library.source.less";
+@import "../../../../sap/ui/core/themes/sap_horizon_dark/base.less";
+@import "../../../../sap/ui/core/themes/sap_horizon_dark/global.less";
+
+@import "InfoLabel.less";
+@import "NavigationList.less";
+@import "SideNavigation.less";
+@import "ToolHeader.less";
+@import "ToolPage.less";