@openui5/themelib_sap_horizon 1.100.0 → 1.101.0

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

@@ -11,43 +11,42 @@
 @_sap_m_InputBase_InnerPadding: 0 0.625rem;
 @_sap_m_InputBase_Height: 2.25rem;
 @_sap_m_InputBase_DisabledOpacity: @sapUiContentDisabledOpacity;
-@_sap_m_InputBase_IconLineHeight: 2rem;
-@_sap_m_InputBase_IconWidth: 2.125rem;
-@_sap_m_InputBase_Compact_IconWidth: 1.875rem;
+@_sap_m_InputBase_IconLineHeight: 2.25rem;
+@_sap_m_InputBase_IconWidth: 2.25rem;
+@_sap_m_InputBase_Compact_IconWidth: 2rem;
 @_sap_m_InputBase_IconMinWidth: 2rem;
 @_sap_m_InputBaseWrapper_Sum_Border: 0;
+@_sap_m_InputBase_FocusOffset: 0px;
+@_sap_m_InputBase_FocusBorderRadius: 0.25rem;
 
-.sapMInputBaseInner {
-	color: @sapUiFieldTextColor;
-}
-
+.sapMILI-CTX .sapMInputBaseContentWrapperError,
 .sapMInputBaseContentWrapper {
 	border: none;
-	border-radius: @sapUiFieldBorderCornerRadius;
-	background: @sapUiFieldBackground;
-	background-image: linear-gradient(0deg, @sapField_BorderColor 0, @sapField_BorderColor 100%);
-	background-size: 100% @sapField_BorderWidth;
-	background-repeat: repeat-x;
-	background-position: bottom;
 
 	&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) .sapMTokenizer .sapMToken {
 			margin-top: 0.1875rem;
 	}
 }
 .sapMInputBase:not(.sapMInputBaseReadonly) .sapMInputBaseIconContainer .sapMInputBaseIcon {
-	width: 2 * @sapContent_GridSize;
-	height: 2 * @sapContent_GridSize;
-	margin-right: 0.125 * @sapContent_GridSize;
-	margin-top: 0.125 * @sapContent_GridSize;
-	margin-bottom: 0.125 * @sapContent_GridSize;
-	border-radius: 0.125rem;
+	width: @_sap_m_InputBase_IconWidth;
+	height: 2.1875rem;
+	border-radius: @sapUiFieldBorderCornerRadius;
 }
 
-.sapUiSizeCompact .sapMInputBase:not(.sapMInputBaseReadonly) .sapMInputBaseIconContainer .sapMInputBaseIcon {
-	min-width: 1.75rem;
-	margin-top: 0.125 * @sapContent_GridSize;
-	width: 1.75 * @sapContent_GridSize;
-	height: 1.375 * @sapContent_GridSize;
+.sapMInputBase .sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) .sapMInputBaseIconContainer .sapMInputBaseIcon {
+	height: 2.125rem;
+}
+
+.sapUiSizeCompact .sapMInputBase {
+	&:not(.sapMInputBaseReadonly) .sapMInputBaseIconContainer .sapMInputBaseIcon {
+		width: @_sap_m_InputBase_Compact_IconWidth;
+		height: 1.5625rem;
+		line-height: 1.625rem;
+	}
+
+	.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) .sapMInputBaseIconContainer .sapMInputBaseIcon {
+		height: 1.5rem;
+	}
 }
 
 .sapMInputBase:not(.sapMInputBaseDisabled).sapMInputBaseIconPressed .sapMInputBaseIconContainer .sapMInputBaseIcon,
@@ -58,143 +57,65 @@
 
 .sapMInputBaseIconPressed .sapMInputBaseIcon::before,
 .sapMInputBaseIcon:active {
-	color: @sapButton_Active_TextColor;
+	color: @sapUiButtonSelectedTextColor;
 }
 
-.sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons .sapMInputBaseContentWrapper {
-	padding-left: 0.125 * @sapContent_GridSize;
+.sapMInputBaseIconPressed .sapMInputBaseContentWrapperSuccess .sapMInputBaseIconContainer .sapMInputBaseIcon::before,
+.sapMInputBaseContentWrapperSuccess .sapMInputBaseIconContainer .sapMInputBaseIcon:active {
+	color: @sapUiButtonAcceptSelectedTextColor;
 }
 
-.sapMInputBaseContentWrapperWarning {
-	background: @sapUiFieldWarningBackground;
-	background-image: linear-gradient(0deg, @sapField_WarningColor 0, @sapField_WarningColor 100%);
-	background-size: 100% @sapField_WarningBorderWidth;
-	background-repeat: repeat-x;
-	background-position: bottom;
+.sapMInputBaseIconPressed .sapMInputBaseContentWrapperError .sapMInputBaseIconContainer .sapMInputBaseIcon::before,
+.sapMInputBaseContentWrapperError .sapMInputBaseIconContainer .sapMInputBaseIcon:active {
+	color: @sapUiButtonRejectSelectedTextColor;
 }
 
-.sapMInputBaseContentWrapperSuccess {
-	background: @sapUiFieldSuccessBackground;
-	background-image: linear-gradient(0deg, @sapField_SuccessColor 0, @sapField_SuccessColor 100%);
-	background-size: 100% @sapField_SuccessBorderWidth;
-	background-repeat: repeat-x;
-	background-position: bottom;
-
+.sapMInputBaseIconPressed .sapMInputBaseContentWrapperWarning .sapMInputBaseIconContainer .sapMInputBaseIcon::before,
+.sapMInputBaseContentWrapperWarning .sapMInputBaseIconContainer .sapMInputBaseIcon:active {
+	color: @sapUiButtonAttentionSelectedTextColor;
 }
 
-.sapMInputBaseContentWrapperError {
-	background: @sapUiFieldInvalidBackground;
-	background-image: linear-gradient(0deg, @sapField_InvalidColor 0, @sapField_InvalidColor 100%);
-	background-size: 100% @sapField_InvalidBorderWidth;
-	background-repeat: repeat-x;
-	background-position: bottom;
-}
-
-.sapMInputBaseContentWrapperInformation {
-	background: @sapUiFieldInformationBackground;
-	background-image: linear-gradient(0deg, @sapField_InformationColor 0, @sapField_InformationColor 100%);
-	background-size: 100% @sapField_InformationBorderWidth;
-	background-repeat: repeat-x;
-	background-position: bottom;
+.sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons .sapMInputBaseContentWrapper {
+	padding-left: 0.125 * @sapContent_GridSize;
 }
 
 .sapMInputBaseReadonly .sapMInputBaseContentWrapper {
-	border-color: @sapField_ReadOnly_Background;
-	background-color: @sapField_ReadOnly_Background;
+	background: ~"0 100% / 0.375rem @{sapField_BorderWidth} repeat-x linear-gradient(90deg, @{sapField_ReadOnly_BorderColor} 0, @{sapField_ReadOnly_BorderColor} 0.25rem, transparent 0.25rem) border-box";
+	background-color: @sapUiFieldReadOnlyBackground;
 }
 
 .sapMInputBaseDisabled {
-	opacity: @sapContent_DisabledOpacity;
+	opacity: @sapUiContentDisabledOpacity;
 }
 
-.sapMFocus .sapMInputBaseContentWrapper {
+.sapMFocus.sapMInputBase .sapMInputBaseContentWrapper {
 	background-color: @sapField_Focus_Background;
 	outline: none;
 
-	&:not(.sapMInputBaseContentWrapperState) {
-		box-shadow: inset 0px 0px 0px 2px @sapField_Focus_BorderColor;
-	}
-
 	&.sapMInputBaseReadonlyWrapper {
 		background: @sapField_ReadOnly_Background;
 	}
 
-	&.sapMInputBaseContentWrapperSuccess {
-		box-shadow: inset 0px 0px 0px 2px @sapField_SuccessColor;
+	&.sapMInputBaseContentWrapperSuccess:before {
+		border-color: @sapUiFieldSuccessColor;
 	}
 
-	&.sapMInputBaseContentWrapperWarning {
-		box-shadow: inset 0px 0px 0px 2px @sapField_WarningColor;
+	&.sapMInputBaseContentWrapperWarning:before {
+		border-color: @sapUiFieldWarningColor;
 	}
 
-	&.sapMInputBaseContentWrapperError {
-		box-shadow: inset 0px 0px 0px 2px @sapField_InvalidColor;
+	&.sapMInputBaseContentWrapperError:before {
+		border-color: @sapUiFieldInvalidColor;
 	}
 
-	&.sapMInputBaseContentWrapperInformation {
-		box-shadow: inset 0px 0px 0px 2px @sapField_InformationColor;
+	&.sapMInputBaseContentWrapperInformation:before {
+		border-color: @sapUiFieldInformationColor;
 	}
 }
 
-.sapMInputBase:not(.sapMFocus) .sapMInputBaseContentWrapper:not(.sapMInputBaseDisabledWrapper):not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):hover {
-		box-shadow: @sapContent_Interaction_Shadow;
-		background: @sapField_Hover_Background;
-		background-image: linear-gradient(0deg, @sapField_BorderColor 0, @sapField_BorderColor 100%);
-		background-size: 100% @sapField_BorderWidth;
-		background-repeat: repeat-x;
-		background-position: bottom;
-}
-
 .sapMInputBase:not(.sapMFocus) .sapMInputBaseContentWrapperState:hover,
-.sapMInputBase:not(.sapMFocus).sapMInputBaseIconPressed .sapMInputBaseContentWrapperState{
-		background-color: @sapField_Hover_Background;
-
-		&.sapMInputBaseContentWrapperWarning:hover,
-		&.sapMInputBaseContentWrapperWarning {
-			box-shadow: @sapContent_Critical_Shadow;
-		}
-
-		&.sapMInputBaseContentWrapperSuccess:hover,
-		&.sapMInputBaseContentWrapperSuccess {
-			box-shadow: @sapContent_Positive_Shadow;
-		}
-
-		&.sapMInputBaseContentWrapperError:hover,
-		&.sapMInputBaseContentWrapperError {
-			box-shadow: @sapContent_Negative_Shadow;
-		}
-
-		&.sapMInputBaseContentWrapperInformation:hover,
-		&.sapMInputBaseContentWrapperInformation {
-			box-shadow: @sapContent_Informative_Shadow;
-		}
-	}
-
-.sapMInputBaseInner::-webkit-input-placeholder {
-	font-style: normal;
-}
-
-.sapMInputBaseInner::-moz-placeholder {
-	font-style: normal;
-}
-
-.sapMInputBaseReadonly:after {
-	line-height: 1.5rem;
-	font-family: SAP-icons;
-	content: "\e292";
-	position: absolute;
-	top: 0.375rem;
-	right: 0rem;
-	overflow: hidden;
-	vertical-align: middle;
-	font-size: 0.75rem;
-	color: @sapField_PlaceholderTextColor;
-	padding-left: 0.125rem;
-	padding-right: 0.75rem;
-}
-
-.sapUiSizeCompact .sapMInputBaseReadonly:after {
-	line-height: 0.875rem;
+.sapMInputBase:not(.sapMFocus).sapMInputBaseIconPressed .sapMInputBaseContentWrapperState {
+	background-color: @sapField_Hover_Background;
 }
 
 .sapMInputBaseReadonly:not(.sapMTextArea) .sapMInputBaseInner,
@@ -203,12 +124,14 @@
 	width: ~"calc(100% - 1.625rem)";
 }
 
-.sapUiSizeCondensed .sapUiTableDataCell .sapMInputBase .sapMInputBaseIcon {
-		min-width: 1.125rem;
-		height: 1.125rem;
-		width: 1.125rem;
-		line-height: 1.125rem;
-		margin-right: 0.125rem;
-		margin-top: 0.125rem;
-		margin-bottom: 0.125rem;
+.sapUiSizeCondensed {
+	.sapUiTableDataCell .sapMInputBase .sapMInputBaseIcon {
+		min-width: 1.375rem;
+		height: 1.3125rem;
+		width: 1.375rem;
+		line-height: 1.375rem;
+	}
+	.sapMInputBase .sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) .sapMInputBaseIconContainer .sapMInputBaseIcon {
+		height: 1.25rem;
+	}
 }

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

@@ -3,8 +3,6 @@
 /* Evening Horizon theme       */
 /* =========================== */
 
-@sapUiLinkSubtleColor: darken(@sapUiLink, 15);
-
 .sapMLnkDsbl {
 	opacity: @sapUiContentDisabledOpacity;
 	outline: none;
@@ -12,6 +10,10 @@
 	text-decoration: none;
 }
 
+.sapMLnkEmphasized {
+	font-family: @sapUiFontBoldFamily;
+}
+
 .sapMLIBActive .sapMLnk {
 	color: @sapUiListActiveTextColor;
 	text-decoration: underline;
@@ -19,7 +21,7 @@
 
 .sapMLnk.sapMLnkSubtle {
 	color: @sapUiLinkSubtleColor;
-	text-decoration: none;
+	text-decoration: underline;
 }
 
 .sapMLnkSubtle:focus {
@@ -27,16 +29,11 @@
 }
 
 .sapMLnk:not(.sapMLnkDsbl) {
-	text-shadow: @sapContent_TextShadow;
-}
-
-.sapMLnk:hover:not(.sapMLnkDsbl) {
-	color: @sapUiLinkHoverColor;
+	text-shadow: @sapUiContentTextShadow;
 }
 
-.sapMLnk:active:not(.sapMLnkDsbl),
-.sapMLnk:focus:not(.sapMLnkDsbl) {
-	color: @sapUiLinkActiveColor;
+html.sap-desktop .sapMLnk:hover:not(.sapMLnkDsbl).sapMLnkSubtle {
+	text-decoration: none;
 }
 
 /* align Link in Form with Label */
@@ -50,6 +47,13 @@
 }
 
 html.sap-desktop .sapMLnk:focus:not(.sapMLnkDsbl) {
-	border-radius: 0.25rem;
-	outline: 0.125rem solid @sapUiContentFocusColor;
+	border-radius: 0.125rem;
+	background-color: @sapUiContentFocusColor;
+	color: @sapUiContentContrastTextColor;
+	text-shadow: none;
+	outline: none;
+}
+
+html.sap-desktop .sapMLnk:focus:hover:not(.sapMLnkDsbl) {
+	text-decoration: none;
 }

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

@@ -4,14 +4,12 @@
 /* =================================== */
 
 .sapMMsgStrip {
-	//@sapUiElementBorderCornerRadius was used but currently it results in 12px
-	border-radius: @sapElement_BorderCornerRadius;
+	border-radius: @sapUiPopoverBorderCornerRadius;
 }
 
 .sapMMsgStripInformation {
 	background-color: @sapInformationBackground;
-	border-color: darken(@sapInformationBackground, 20);
-	color: @sapUiBaseText;
+	border-color: @sapUiMessageInformationBorderColor;
 
 	.sapMBtnTransparent,
 	.sapMBtn:hover>.sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
@@ -26,7 +24,7 @@
 }
 
 .sapMMsgStripError {
-	border-color: darken(@sapErrorBackground, 18);
+	border-color: @sapUiMessageErrorBorderColor;
 
 	.sapMBtnTransparent,
 	.sapMBtn:hover>.sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
@@ -35,9 +33,9 @@
 		border-color: @sapErrorBackground;
 	}
 }
- 
+
 .sapMMsgStripSuccess {
-	border-color: darken(saturate(@sapSuccessBackground, 20), 20);
+	border-color: @sapUiMessageSuccessBorderColor;
 
 	.sapMBtnTransparent,
 	.sapMBtn:hover>.sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
@@ -48,7 +46,7 @@
 }
 
 .sapMMsgStripWarning {
-	border-color: darken(@sapWarningBackground, 20);
+	border-color: @sapUiMessageWarningBorderColor;
 
 	.sapMBtnTransparent,
 	.sapMBtn:hover>.sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
@@ -57,7 +55,7 @@
 		border-color: @sapWarningBackground;
 	}
 }
- 
+
 .sapMMsgStripMessage>.sapMLnk {
 	padding-right: 0.25rem;
 	padding-left: 0.25rem;

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

@@ -9,27 +9,17 @@
 	position: relative;
 }
 
-.sapMObjectAttributeActive .sapMObjectAttributeText:focus::after {
-	pointer-events: none;
-	display: block;
-	content: "";
-	position: absolute;
-	top: 0;
-	left: -0.0625rem;
-	bottom: 0;
-	right: -0.0625rem;
-	border: 0.125rem solid @sapUiContentFocusColor;
-	border-radius: 0.25rem;
-}
-
-.sapMObjectAttributeActive .sapMObjectAttributeText:focus {
+.sapMObjectAttributeActive .sapMObjectAttributeText:active,
+.sapMObjectAttributeActive .sapMObjectAttributeText:hover {
 	text-decoration: none;
+	color: @sapUiLinkHoverColor;
 }
 
-.sapMObjectAttributeActive .sapMObjectAttributeText:active,
-.sapMObjectAttributeActive .sapMObjectAttributeText:hover {
-	text-decoration: underline;
-	color: @sapUiLinkHover;
+.sapMObjectAttributeActive .sapMObjectAttributeText:focus {
+	border-radius: 0.125rem;
+	background-color: @sapUiContentFocusColor;
+	color: @sapUiContentContrastTextColor;
+	text-shadow: none;
 }
 
 /*=========================================== */
@@ -40,7 +30,6 @@
 .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:hover,
 .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:focus {
 	text-decoration: underline;
-	color: @sapUiLinkHover;
 }
 
 /*=========================================== */
@@ -48,9 +37,13 @@
 /*=========================================== */
 
 .sapMOH .sapMObjectAttributeActive .sapMObjectAttributeText:active,
-.sapMOH .sapMObjectAttributeActive .sapMObjectAttributeText:hover {
+.sapMOH .sapMObjectAttributeActive .sapMObjectAttributeText:hover,
+.sapMOH .sapMObjectAttributeActive .sapMObjectAttributeText:focus {
 	text-decoration: underline;
-	color: @sapUiLinkHover;
+}
+
+.sapMOH .sapMObjectAttributeActive .sapMObjectAttributeText:focus:hover {
+	text-decoration: none;
 }
 
 .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText,

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

@@ -12,4 +12,23 @@ html.sap-phone {
 		border-radius: 0.25rem 0.25rem 0 0;
 	}
   }
+}
+
+.sapMOTAPopover.sapMPopover .sapMPopoverCont .sapMPopoverScroll {
+	max-width: 20rem;
+  }
+
+.sapUiSizeCompact .sapMTBSeparator.sapMTBSeparatorOverflowToolbar,
+.sapMTBSeparator.sapMTBSeparatorOverflowToolbar {
+	margin: 0.375rem 0.1875rem;
+	width: 100%;
+	background: @sapUiToolbarSeparatorColor;
+}
+
+.sapMOTAPopover.sapMPopover .sapMPopoverCont .sapMPopoverScroll {
+	padding: 0.25rem 0.5rem;
+}
+
+.sapUiSizeCompact .sapMOTAPopover.sapMPopover .sapMPopoverCont .sapMPopoverScroll {
+	padding: 0.1875rem 0.375rem;
 }

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

@@ -5,10 +5,25 @@
 
 .sapMPopoverArr:after {
 	background: @sapUiGroupContentBackground;
-	box-shadow: @sapUiShadowLevel2;
+	box-shadow: @sapUiContentShadow2;
 }
 
-.sapMPopoverWithBar > .sapMPopoverArr.sapMPopoverArrUp:after {
+.sapMPopoverWithBar > .sapMPopoverArr {
+	&.sapMPopoverArrUp:after,
+	&.sapMPopoverHeaderAlignArr:after {
+		background-color: @sapUiPageHeaderBackground;
+	}
+}
+
+.sapMPopoverWithFooter > .sapMPopoverArr.sapMPopoverFooterAlignArr:after {
+	background-color: @sapUiPageFooterBackground;
+}
+
+.sapMPopover .sapMIBar.sapMHeader-CTX {
+	background-color: @sapUiPageHeaderBackground;
+}
+
+.sapMPopover .sapMIBar.sapMSubHeader-CTX {
 	background-color: @sapUiPageHeaderBackground;
 }
 
@@ -109,17 +124,17 @@
 }
 
 .sapMPopover {
-	border-radius: @sapUiElementBorderCornerRadius;
+	border-radius: @sapUiPopoverBorderCornerRadius;
 
 	&.sapMPopoverWithoutBar .sapMPopoverCont,
 	.sapMIBar.sapMHeader-CTX {
-		border-top-right-radius: 0.75rem;
-		border-top-left-radius: 0.75rem;
+		border-top-right-radius: @sapUiPopoverBorderCornerRadius;
+		border-top-left-radius: @sapUiPopoverBorderCornerRadius;
 	}
 
 	&.sapMPopoverWithoutFooter .sapMPopoverCont,
 	.sapMIBar.sapMFooter-CTX {
-		border-bottom-right-radius: 0.75rem;
-		border-bottom-left-radius: 0.75rem;
+		border-bottom-right-radius: @sapUiPopoverBorderCornerRadius;
+		border-bottom-left-radius: @sapUiPopoverBorderCornerRadius;
 	}
 }

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

@@ -76,7 +76,7 @@ html.sap-desktop {
 		border: 0.125rem solid @sapUiContentFocusColor;
 		border-radius: 0.375rem;
 	}
-	&.sapUiSizeCompact .sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
+	.sapUiSizeCompact .sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
 		top: 0.325rem;
 		bottom: 0.325rem;
 	}