@openui5/themelib_sap_horizon 1.100.0 → 1.102.1

package/src/sap/m/themes/sap_horizon/RangeSlider.less

@@ -2,74 +2,107 @@
 /* CSS for control sap.m/RangeSlider  */
 /* Horizon theme                      */
 /* ================================== */
-.sapMRangeSlider.sapMSliderInner .sapMSliderHandle {
-	top: -0.75rem;
-}
 
-.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled):hover>.sapMSliderHandle {
-		border: 1px @sapContent_FocusStyle @sapContent_Selected_ForegroundColor;
-		background: transparent;
-		box-shadow: @sapContent_Selected_Shadow;
-}
+@_sap_m_RangeSlider_Handle_Height: 1.5rem;
+@_sap_m_RangeSlider_Handle_Width: 2rem;
+@_sap_m_RangeSlider_Handle_Height_Compact: 1.25rem;
+@_sap_m_RangeSlider_Handle_Width_Compact: 1.5rem;
+
+.sapMRangeSlider.sapMSlider .sapMSliderInner {
+	&:not(.sapMSliderInnerDisabled):hover>.sapMSliderHandle {
+		border: 1px @sapContent_FocusStyle @sapUiSliderHoverHandleBorderColor;
+		background: @sapUiSliderRangeHandleBackground;
+		box-shadow: @sapUiContentSelectedShadow;
+	}
+
+	&:not(.sapMSliderInnerDisabled) .sapMSliderHandle:hover {
+		background-color: @sapUiSliderRangeHandleBackground;
+		border-color: @sapUiSliderHoverHandleBorderColor;
+		box-shadow: @sapUiContentSelectedShadow;
+	}
+
+	&:not(.sapMSliderInnerDisabled) .sapMSliderHandle.sapMSliderHandlePressed {
+		&:not(:focus) {
+			background: transparent;
+			border: 0.125rem solid #0070F2;
+			outline: none;
+			box-shadow: none;
+			top: -0.625rem;
+		}
+	}
 
-.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled):hover .sapMSliderProgress:focus ~ .sapMSliderHandle,
-.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle.sapMSliderHandlePressed {
-	&:not(:focus) {
-		background: transparent;
-		border: none;
+	&:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
+		background: @sapUiSliderActiveRangeHandleBackground;
+		border: 0.125rem solid #0070F2;
 		outline: none;
-		box-shadow: 0px 0px 0px 2px @sapContent_FocusColor;
-		top: -0.75rem;
+		box-shadow: none;
+		top: -0.625rem;
+	}
+
+	.sapMSliderHandle {
+		background: @sapUiSliderRangeHandleBackground;
+		box-shadow: @sapUiContentSelectedShadow;
+		top: -0.625rem;
+	}
+
+	.sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
+		top: 4px;
 	}
 }
 
+.sapMRangeSlider .sapMSliderInner::before {
+	border: 0.0625rem solid @sapUiContentMeasureIndicatorColor;
+	background-color: @sapUiContentMeasureIndicatorColor;
+}
+
 .sapUiSizeCompact {
-	.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled):hover .sapMSliderProgress:focus ~ .sapMSliderHandle,
 	.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle.sapMSliderHandlePressed {
 		&:not(:focus) {
 			background: transparent;
-			border: none;
+			border: 0.125rem solid #0070F2;
 			outline: none;
-			box-shadow: 0px 0px 0px 2px @sapContent_FocusColor;
-			top: -0.5625rem;
+			box-shadow: none;
+			top: -0.5rem;
 		}
 	}
 
 	.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
-		background: transparent;
+		background: @sapUiSliderActiveRangeHandleBackground;
+		border: 0.125rem solid #0070F2;
 		outline: none;
-		box-shadow: 0px 0px 0px 2px @sapContent_FocusColor;
-		top: -0.5625rem;
+		box-shadow: none;
+		top: -0.5rem;
 	}
-}
 
-.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
-	background: transparent;
-	border: none;
-	outline: none;
-	box-shadow: 0px 0px 0px 2px @sapContent_FocusColor;
-	top: -0.75rem;
-}
-
-.sapMRangeSlider .sapMSliderInner::before {
-	background-color: @sapField_BorderColor;
-}
+	.sapMRangeSlider.sapMSlider .sapMSliderInner .sapMSliderHandle {
+		top: -0.5rem;
+	}
 
+	.sapMRangeSlider.sapMSlider .sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
+		top: 2px;
+		right: 0.25rem;
+	}
 
-html.sap-desktop .sapUiSizeCompact .sapMSliderProgress:focus:before {
-	padding-left: 2rem;
-	padding-top: 0.125rem;
-	padding-bottom: 0.25rem;
-	padding-right: 0.25rem;
-	top: 1px;
+	.sapMSliderLabels {
+		margin: 0.625rem -0.875rem 0 -0.875rem;
+	}
 }
 
 html.sap-desktop .sapMSliderProgress:focus:before {
-	border: 0.125rem solid #0070f2;
+	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 	border-radius: 0.5rem;
-	padding-left: 2.375rem;
-	padding-top: 0.375rem;
-	padding-right: 0.25rem;
-	padding-bottom: 0.375rem;
-	top: 1px;
+	content: "";
+	display: block;
+	position: absolute;
+	height: ~"calc(@{_sap_m_RangeSlider_Handle_Height} + 0.375rem)";
+	width: ~"calc(100% + ((@{_sap_m_RangeSlider_Handle_Width}) + 0.375rem))";
+	top: ~"calc(-1 * ((@{_sap_m_RangeSlider_Handle_Height} / 2) + 0.1875rem))";
+	left: ~"calc(-1 * ((@{_sap_m_RangeSlider_Handle_Width} / 2) + 0.3125rem))";
+}
+
+html.sap-desktop .sapUiSizeCompact .sapMSliderProgress:focus:before {
+	height: ~"calc(@{_sap_m_RangeSlider_Handle_Height_Compact} + 0.375rem)";
+	width: ~"calc(100% + ((@{_sap_m_RangeSlider_Handle_Width_Compact}) + 0.375rem))";
+	top: ~"calc(-1 * ((@{_sap_m_RangeSlider_Handle_Height_Compact} / 2) + 0.1875rem))";
+	left: ~"calc(-1 * ((@{_sap_m_RangeSlider_Handle_Width_Compact} / 2) + 0.3125rem))";
 }

package/src/sap/m/themes/sap_horizon/RatingIndicator.less

@@ -4,6 +4,10 @@
 /* ====================================== */
 
 .sapMRI {
+	&:not(.sapMRIDisabled):not(.sapMRIDisplayOnly):not(.sapMRIReadOnly):hover {
+		opacity: 0.9;
+	}
+
 	.sapMRIUnsel {
 		color: @sapContent_UnratedColor;
 	}
@@ -41,6 +45,9 @@ html.sap-desktop .sapMRI:focus:not(.sapMRIDisabled):not(.sapMRIDisplayOnly){
 .sapMRIIconSel, .sapMRIIconUnsel, .sapMRIIconHov, .sapMRIIconReadOnly {
 	font-size: 1.5rem;
 }
+.sapMRIIconSel, .sapMRIIconUnsel {
+	text-shadow: @sapContent_TextShadow;
+}
 
 /* temporary workaround of an issue in the icon font */
 .sapMRI .sapUiIcon,

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

@@ -76,6 +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;
@@ -153,10 +154,6 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
 	.sapMSegBBtnInner:hover {
 		border-right: 1px solid @sapUiButtonSelectedHoverBorderColor;
 	}
-	// Hide next button left border
-	+ .sapMSegBBtn .sapMSegBBtnInner {
-		border-left: 1px solid transparent;
-	}
 }
 
 .sapMSegB img {
@@ -255,8 +252,8 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
 	}
 }
 
-.sapMSegBBtn.sapMSegBtnLastVisibleButton .sapMSegBBtnInner {
-	border-right: 1px solid @sapUiButtonBorderColor;
+.sapMSegBBtn.sapMSegBtnLastVisibleButton .sapMSegBBtnInner,
+.sapMSegBBtn.sapMSegBtnLastVisibleButton .sapMSegBBtnInnerWrapper {
 	border-top-right-radius: @sapUiButtonBorderCornerRadius;
 	border-bottom-right-radius: @sapUiButtonBorderCornerRadius;
 }

package/src/sap/m/themes/sap_horizon/Select.less

@@ -13,31 +13,40 @@
 
 /* IconOnly Hover */
 
-.sapMSltIconOnly.sapMSltHoverable:hover:not(.sapMSltState) {
+.sapMSlt.sapMSltIconOnly.sapMSltHoverable:hover:not(.sapMSltState) {
 	background: @sapUiButtonLiteHoverBackground;
+    border: none;
 
 	&.sapMSltWithIcon {
-		border: 0.0625rem solid @sapUiButtonLiteHoverBorderColor;
+        box-shadow: inset 0px 0px 0px @sapUiContentFocusWidth @sapUiFieldActiveBorderColor;
 	}
 }
 
-// Prevent jumping of icon only select when hover
-.sapMSltIconOnly.sapMSltHoverable:not(.sapMSltState) {
-	border: 0.0625rem solid transparent;
-}
-
 /*IconOnly Pressed */
 .sapMSltPressed.sapMSltIconOnly:not(.sapMSltDisabled) {
 	background: @sapUiToggleButtonPressedBackground;
-	border: 0.0625rem solid @sapUiToggleButtonPressedBorderColor;
+    .sapMSltIcon {
+        color: @sapUiFieldTextColor;;
+    }
 }
 
 .sapMSlt:not(.sapMSltIconOnly) {
-	border-radius: 0.25rem;
+	border-radius: @sapUiFieldBorderCornerRadius;
 }
 
 .sapMSlt {
+    font-family: @sapFontFamily;
+    font-size: @sapFontSize;
 	height: 2.25rem;
+    border: none;
+    background-image: linear-gradient(0deg, @sapUiFieldBorderColor 0, @sapUiFieldBorderColor 100%);
+    background-size: 100% @sapUiFieldBorderWidth;
+    background-repeat: repeat-x;
+    background-position: bottom;
+}
+
+.sapUiSizeCompact .sapMSlt {
+	height: 1.625rem;
 }
 
 .sapMSlt > .sapMSltLabel {
@@ -48,8 +57,8 @@
 	line-height: 2rem;
 }
 
-.sapMSltPressed > .sapMSltArrow::before {
-	color: @sapUiButtonActiveTextColor;
+.sapMSlt:not(.sapMSltState).sapMSltPressed > .sapMSltArrow::before {
+	color: @sapUiButtonSelectedTextColor;
 }
 
 .sapMSlt.sapMSltPressed,
@@ -72,9 +81,11 @@ html.sap-desktop .sapMSltIconOnly.focus:not(.sapMSltExpanded):not(.sapMSltDisabl
 
 .sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover {
 	background: @sapUiFieldHoverBackground;
+    border-color: @sapUiFieldHoverBorderColor;
+    box-shadow: @sapUiContentInteractionShadow;
 
 	.sapMSltArrow {
-		border-radius: 0.25rem;
+		border-radius: @sapUiFieldBorderCornerRadius;
 	}
 }
 
@@ -98,7 +109,12 @@ html.sap-desktop .sapMSltIconOnly.focus:not(.sapMSltExpanded):not(.sapMSltDisabl
 /* disabled */
 
 .sapMSltDisabled {
-	opacity: 0.5;
+	opacity: @sapUiContentDisabledOpacity;
+}
+
+.sapMSlt.sapMSltReadonly {
+    background: @sapUiFieldReadOnlyBackground;
+    border-bottom: dashed @sapUiElementBorderWidth @sapUiFieldReadOnlyBorderColor;
 }
 
 div.sapMSltPicker .sapMSltPickerValueState {
@@ -109,33 +125,34 @@ div.sapMSltPicker .sapMSltPickerValueState {
 	line-height: 1.375rem;
 }
 
-.sapMSlt {
-    border: none;
-    background-image: linear-gradient(0deg, @sapField_BorderColor 0, @sapField_BorderColor 100%);
-    background-size: 100% @sapField_BorderWidth;
-    background-repeat: repeat-x;
-    background-position: bottom;
+.sapMSltMinWidth {
+    min-width: 2.75rem;
+}
+
+.sapUiSizeCompact .sapMSltMinWidth {
+    min-width: 2rem;
 }
 
 .sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover {
     border:none;
-    box-shadow: @sapContent_Interaction_Shadow;
+    box-shadow: @sapUiContentInteractionShadow;
 	border: none;
-    background-image: linear-gradient(0deg, @sapField_BorderColor 0, @sapField_BorderColor 100%);
-    background-size: 100% @sapField_BorderWidth;
+    background-image: linear-gradient(0deg, @sapUiFieldBorderColor 0, @sapUiFieldBorderColor 100%);
+    background-size: 100% @sapUiFieldBorderWidth;
     background-repeat: repeat-x;
     background-position: bottom;
 }
 
 .sapMSltPressed:not(.sapMSltDisabled):not(.sapMSltState),
 .sapMSlt.sapMSltFocused:not(.sapMSltDisabled):not(.sapMSltState) {
-    border:none;
-    box-shadow: inset 0px 0px 0px 2px @sapContent_FocusColor;
+    background: @sapUiFieldFocusBackground;
+    border: none;
+    box-shadow: inset 0px 0px 0px @sapUiContentFocusWidth @sapUiFieldActiveBorderColor;
 }
 
 .sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):active {
     border:none;
-    box-shadow: inset 0px 0px 0px 2px @sapField_Active_BorderColor;
+    box-shadow: inset 0px 0px 0px 2px @sapUiFieldActiveBorderColor;
 }
 
 .sapMSltArrow {
@@ -153,9 +170,9 @@ div.sapMSltPicker .sapMSltPickerValueState {
 }
 
 .sapMSltPressed >.sapMSltArrow {
-    background-color: @sapButton_Active_Background;
-    color: @sapButton_Active_TextColor;
-    box-shadow: @sapContent_Interaction_Shadow;
+    background-color: @sapUiButtonActiveBackground;
+    color: @sapUiButtonActiveTextColor;
+    box-shadow: @sapUiContentInteractionShadow;
     overflow: none;
     border-radius: 0.125rem;
 }
@@ -164,7 +181,7 @@ div.sapMSltPicker .sapMSltPickerValueState {
 /* focus */
 html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisabled) {
     &:before {
-        box-shadow: inset 0px 0px 0px 2px @sapField_Focus_BorderColor;
+        box-shadow: inset 0px 0px 0px 2px @sapUiFieldFocusBorderColor;
     }
 }
 
@@ -173,24 +190,38 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
 // =====================================
 .sapMSltInformation {
     border: none;
-    background-image: linear-gradient(0deg, @sapField_InformationColor 0, @sapField_InformationColor 100%);
-    background-size: 100% @sapField_InformationBorderWidth;
+    background-image: linear-gradient(0deg, @sapUiFieldInformationColor 0, @sapUiFieldInformationColor 100%);
+    background-size: 100% @sapUiFieldInformationBorderWidth;
     background-repeat: repeat-x;
     background-position: bottom;
+    background-color: @sapUiFieldInformationBackground;
 }
 
 .sapMSltInformation.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
-    background-color: @sapField_Hover_Background;
+    border-color: @sapUiFieldInformationColor;
+    box-shadow: @sapUiContentInformativeShadow;
+    background-color: @sapUiFieldHoverBackground;
 
     &:not(.sapMSltFocused) {
-        box-shadow: @sapContent_Informative_Shadow; // NEW Parameter
+        box-shadow: @sapUiContentInformativeShadow; // NEW Parameter
     }
 }
 
 .sapMSltHoverable.sapMSltInformation:not(.sapMSltIconOnly):active,
 .sapMSltFocused.sapMSltInformation {
-    box-shadow: inset 0px 0px 0px 2px @sapField_Active_BorderColor;
-    background-color: @sapField_Focus_Background;
+    border-bottom: none;
+    box-shadow: inset 0px 0px 0px 2px @sapUiFieldInformationColor;
+    background-color: @sapUiFieldFocusBackground;
+}
+
+.sapMSltInformation.sapMSltPressed {
+    .sapMSltArrow {
+        color: @sapUiButtonSelectedTextColor;
+        box-shadow: @sapUiContentInformativeShadow;
+    }
+    > .sapMSltArrow::before {
+        color: inherit;
+    }
 }
 
 // =====================================
@@ -199,26 +230,40 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
 
 .sapMSltSuccess {
     border: none;
-    background-image: linear-gradient(0deg, @sapField_SuccessColor 0, @sapField_SuccessColor 100%);
-    background-size: 100% @sapField_SuccessBorderWidth;
+    background-image: linear-gradient(0deg, @sapUiFieldSuccessColor 0, @sapUiFieldSuccessColor 100%);
+    background-size: 100% @sapUiFieldSuccessBorderWidth;
     background-repeat: repeat-x;
     background-position: bottom;
+    background-color: @sapUiFieldSuccessBackground;
 }
 
 .sapMSltSuccess.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover  {
-    background-color: @sapField_Hover_Background;
+    border-color: @sapUiFieldSuccessColor;
+    box-shadow: @sapUiContentPositiveShadow;
+    background-color: @sapUiFieldHoverBackground;
 
     &:not(.sapMSltFocused) {
-        box-shadow: @sapContent_Positive_Shadow; // New Parameter
+        box-shadow: @sapUiContentPositiveShadow; // New Parameter
     }
 }
 
 // Field Success Focus - Experimental
 .sapMSltHoverable.sapMSltSuccess:not(.sapMSltIconOnly):active,
 .sapMSltFocused.sapMSltSuccess {
-    box-shadow: inset 0px 0px 0px 2px @sapField_SuccessColor;
-    border-radius: @sapField_BorderCornerRadius;
-    background-color: @sapField_Focus_Background;
+    border-bottom: none;
+    box-shadow: inset 0px 0px 0px 2px @sapUiFieldSuccessColor;
+    border-radius: @sapUiFieldBorderCornerRadius;
+    background-color: @sapUiFieldFocusBackground;
+}
+
+.sapMSltSuccess.sapMSltPressed {
+    .sapMSltArrow {
+        color: @sapUiButtonAcceptSelectedTextColor;
+        box-shadow: @sapUiContentPositiveShadow;
+    }
+    > .sapMSltArrow::before {
+        color: inherit;
+    }
 }
 
 // =====================================
@@ -227,27 +272,40 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
 
 .sapMSltWarning {
     border: none;
-    background-image: linear-gradient(0deg, @sapField_WarningColor 0, @sapField_WarningColor 100%);
-    background-size: 100% @sapField_WarningBorderWidth;
+    background-image: linear-gradient(0deg, @sapUiFieldWarningColor 0, @sapUiFieldWarningColor 100%);
+    background-size: 100% @sapUiFieldWarningBorderWidth;
     background-repeat: repeat-x;
     background-position: bottom;
+    background-color: @sapUiFieldWarningBackground;
 }
 
 .sapMSltWarning.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
-    background-color: @sapField_Hover_Background;
+    border-color: @sapUiFieldWarningColor;
+    box-shadow: @sapUiContentCriticalShadow;
+    background-color: @sapUiFieldHoverBackground;
 
     &:not(.sapMSltFocused) {
-        box-shadow: @sapContent_Critical_Shadow; // NEW Parameter
+        box-shadow: @sapUiContentCriticalShadow; // NEW Parameter
     }
 }
 
 // Field Warning Focus - Experimental
 .sapMSltHoverable.sapMSltWarning:not(.sapMSltIconOnly):active,
 .sapMSltFocused.sapMSltWarning {
-    box-shadow: inset 0px 0px 0px 2px @sapField_WarningColor; // Experimental
-    background-color: @sapField_Focus_Background;
+    border-bottom: none;
+    box-shadow: inset 0px 0px 0px 2px @sapUiFieldWarningColor; // Experimental
+    background-color: @sapUiFieldFocusBackground;
 }
 
+.sapMSltWarning.sapMSltPressed {
+    .sapMSltArrow {
+        color: @sapUiButtonAttentionSelectedTextColor;
+        box-shadow: @sapUiContentCriticalShadow;
+    }
+    > .sapMSltArrow::before {
+        color: inherit;
+    }
+}
 
 // =====================================
 // Input Error state
@@ -255,23 +313,37 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
 
 .sapMSltError {
     border: none;
-    background-image: linear-gradient(0deg, @sapField_InvalidColor 0, @sapField_InvalidColor 100%);
+    background-image: linear-gradient(0deg, @sapUiFieldInvalidColor 0, @sapUiFieldInvalidColor 100%);
     background-size: 100% @sapField_InvalidBorderWidth;
     background-repeat: repeat-x;
     background-position: bottom;
+    background-color: @sapUiFieldInvalidBackgroundStyle;
 }
 
 .sapMSltError.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
-    background-color: @sapField_Hover_Background;
+    border-color: @sapUiFieldInvalidColor;
+    box-shadow: @sapUiContentNegativeShadow;
+    background-color: @sapUiFieldHoverBackground;
 
     &:not(.sapMSltFocused) {
-        box-shadow: @sapContent_Negative_Shadow; // New Parameter
+        box-shadow: @sapUiContentNegativeShadow; // NEW Parameter
     }
 }
 
 // Field Error Focus - Experimental
 .sapMSltHoverable.sapMSltError:not(.sapMSltIconOnly):active,
 .sapMSltFocused.sapMSltError {
-    box-shadow: inset 0px 0px 0px 2px @sapField_InvalidColor;
-    background-color: @sapField_Focus_Background;
+    border-bottom: none;
+    box-shadow: inset 0px 0px 0px 2px @sapUiFieldInvalidColor;
+    background-color: @sapUiFieldFocusBackground;
+}
+
+.sapMSltError.sapMSltPressed {
+    .sapMSltArrow {
+        color: @sapUiFieldInvalidColor;
+        box-shadow: @sapUiContentNegativeShadow;
+    }
+    > .sapMSltArrow::before {
+        color: inherit;
+    }
 }

package/src/sap/m/themes/sap_horizon/SelectList.less

@@ -8,15 +8,28 @@
 @_sap_m_SelectListItemBelizeFocus_Height: 0.25rem; // 2 borders * 0.0625rem + 2 offsets (top and bottom) * 0.0625rem
 
 /* selected */
-.sapMSelectListItemBaseSelected {
+.sapMSelectListItemBase.sapMSelectListItemBaseSelected {
 	background: @sapUiListSelectionBackgroundColor;
+	color: @sapUiListTextColor;
+	border-bottom: 0.0625rem solid @sapUiListSelectionBorderColor;
+
+	&:hover {
+		background: @sapUiListHoverSelectionBackground;
+	}
 }
 
+
 /* pressed */
 html.sap-desktop .sapMSelectListItemBase.sapMSelectListItemBasePressed:focus {
 	outline: 0.0625rem dotted @sapUiContentContrastFocusColor;
 }
 
+.sapMSelectListItemBase.sapMSelectListItemBasePressed,
+.sapMSelectListItemBase.sapMSelectListItemBaseSelected.sapMSelectListItemBasePressed {
+	background-color: @sapUiListActiveBackground;
+	color: @sapUiListActiveTextColor;
+}
+
 .sapMSelectListItemBase.sapMSelectListItemBasePressed .sapMSelectListItemIcon {
 	color: @sapUiContentContrastIconColor;
 }
@@ -33,7 +46,8 @@ html.sap-desktop .sapMSelectListItemBase:focus::after,
 .sapMComboBoxBasePicker-CTX .sapMSelectListItemBaseSelected::after {
 	pointer-events: none;
 	content: "";
-	border: @sapContent_FocusWidth @sapContent_FocusStyle @sapContent_FocusColor;
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline-offset: -0.1875rem;
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -48,17 +62,9 @@ html.sap-desktop .sapMSelectListItemBase:focus {
 }
 
 .sapMSelectListItemBase {
+	background-color: @sapUiListBackground;
+	border-color: @sapUiListBorderColor;
 	position: relative;
-
-	&:last-child:not(:only-child)::after {
-		border-bottom-left-radius: 0.75rem;
-		border-bottom-right-radius: 0.75rem;
-	}
-}
-
-.sapMSltPicker-CTX:not(.sapMSltPickerWithSubHeader) .sapMSelectListItemBase {
-	&:first-child::after {
-		border-top-left-radius: 0.75rem;
-		border-top-right-radius: 0.75rem;
-	}
+	font-size: @sapFontSize;
+	color: @sapUiListTextColor;
 }

package/src/sap/m/themes/sap_horizon/SinglePlanningCalendarGrid.less

@@ -30,8 +30,7 @@
 	}
 
 	.sapMSinglePCColumnHeader .sapUiCalItem.sapUiCalItemNow {
-		border-color: @sapUiLegendCurrentDateTime;
-		border-radius: 0.25rem;
+		border: none;
 	}
 
 	.sapMSinglePCNowMarker {
@@ -55,10 +54,6 @@
 
 	.sapMSinglePCColumnHeader {
 		.sapUiCalItem.sapUiCalItemNow {
-			.sapUiCalItemText {
-				border: 0.0625rem solid @sapUiListBackground;
-			}
-
 			.sapUiCalSpecialDate {
 				position: absolute;
 				left: 0;
@@ -70,9 +65,12 @@
 		.sapUiCalItem .sapUiCalSpecialDate {
 			height: 0.25rem;
 		}
+	}
 
-		.sapUiCalItem.sapUiCalItemNow.sapUiCalItemSel .sapUiCalItemText {
-			border: 0.0625rem solid @sapUiListBackground;
+	.sapMSinglePCAppointmentWrap.sapUiCalendarRowApps {
+		.sapUiCalendarApp {
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
 		}
 	}
 }
@@ -87,9 +85,6 @@
 .sapUiSizeCompact .sapMSinglePC {
 	.sapMSinglePCColumnHeader {
 		.sapUiCalItem.sapUiCalItemNow {
-			&.sapUiCalItemSel {
-				background-color: @sapUiActive;
-			}
 			.sapUiCalItemText,
 			.sapUiCalItemSel.sapUiItemText {
 				box-shadow: none;
@@ -110,10 +105,6 @@
 		.sapUiCalItem.sapUiCalItemNow {
 			outline: 0.0625rem solid white;
 			box-shadow: inset white;
-			&.sapUiCalItemSel {
-				background-color: @sapUiActive;
-				border: 0.125rem solid @sapUiLegendCurrentDateTime;
-			}
 			&.sapUiCalItemSel:hover {
 				background-color: @sapUiContentSelectedHoverBackground;
 			}
@@ -162,7 +153,7 @@
 	&:focus {
 		.sapUiCalendarAppCont:after {
 			border: 0.125rem solid @sapUiContentFocusColor;
-			border-radius: 0.25rem;
+			border-radius: 0.125rem;
 		}
 	}
 }
@@ -222,4 +213,11 @@ html.sap-desktop {
 			border-radius: 0.5rem;
 		}
 	}
+}
+
+.sapMSinglePCAppointmentWrap.sapUiCalendarRowApps:focus .sapUiCalendarAppSel:hover .sapUiCalendarAppCont:after {
+	top: 0.125rem;
+	left: 0.125rem;
+	right: 0.125rem;
+	bottom: 0.125rem;
 }