@openui5/themelib_sap_horizon 1.93.2 → 1.93.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/themelib_sap_horizon",
-  "version": "1.93.2",
+  "version": "1.93.3",
   "description": "OpenUI5 Theme Library sap_horizon",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,22 +14,22 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "devDependencies": {
-    "@openui5/sap.f": "1.93.2",
-    "@openui5/sap.m": "1.93.2",
-    "@openui5/sap.tnt": "1.93.2",
-    "@openui5/sap.ui.codeeditor": "1.93.2",
-    "@openui5/sap.ui.commons": "1.93.2",
-    "@openui5/sap.ui.core": "1.93.2",
-    "@openui5/sap.ui.dt": "1.93.2",
-    "@openui5/sap.ui.fl": "1.93.2",
-    "@openui5/sap.ui.mdc": "1.93.2",
-    "@openui5/sap.ui.integration": "1.93.2",
-    "@openui5/sap.ui.layout": "1.93.2",
-    "@openui5/sap.ui.rta": "1.93.2",
-    "@openui5/sap.ui.suite": "1.93.2",
-    "@openui5/sap.ui.table": "1.93.2",
-    "@openui5/sap.ui.unified": "1.93.2",
-    "@openui5/sap.ui.ux3": "1.93.2",
-    "@openui5/sap.uxap": "1.93.2"
+    "@openui5/sap.f": "1.93.3",
+    "@openui5/sap.m": "1.93.3",
+    "@openui5/sap.tnt": "1.93.3",
+    "@openui5/sap.ui.codeeditor": "1.93.3",
+    "@openui5/sap.ui.commons": "1.93.3",
+    "@openui5/sap.ui.core": "1.93.3",
+    "@openui5/sap.ui.dt": "1.93.3",
+    "@openui5/sap.ui.fl": "1.93.3",
+    "@openui5/sap.ui.mdc": "1.93.3",
+    "@openui5/sap.ui.integration": "1.93.3",
+    "@openui5/sap.ui.layout": "1.93.3",
+    "@openui5/sap.ui.rta": "1.93.3",
+    "@openui5/sap.ui.suite": "1.93.3",
+    "@openui5/sap.ui.table": "1.93.3",
+    "@openui5/sap.ui.unified": "1.93.3",
+    "@openui5/sap.ui.ux3": "1.93.3",
+    "@openui5/sap.uxap": "1.93.3"
   }
 }

package/src/sap/f/themes/sap_horizon/AvatarGroup.less

@@ -12,6 +12,7 @@
 .sapFAvatarGroup:focus {
 	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
 	outline: none;
+	border-radius: 0.35rem;
 }
 
 .sapFAvatarGroup {

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

@@ -41,6 +41,10 @@
 	background-color: @sapAccentBackgroundColor1;
 	color: darken(@sapAccentColor1, 10);
 }
+.sapFAvatarColorAccent1 .sapFAvatarInitialsHolder {
+	color: darken(@sapAccentColor1, 10);
+}
+
 .sapFAvatarColorAccent2 {
 	background-color: @sapAccentBackgroundColor2;
 	color: @sapAccentColor2;

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

@@ -20,7 +20,7 @@
 	height: 1.375rem;
 	width: 1.375rem;
 	line-height: 1.125rem;
-	border-width: 0.125rem;
+	border-width: 0.0625rem;
 	box-sizing: border-box;
 	border-radius: @sapField_BorderCornerRadius;
 
@@ -58,7 +58,7 @@
 
 .sapMCb.sapMCbSucc .sapMCbBg {
 	background-color: @sapUiFieldSuccessBackground;
-	border: 0.125rem solid @sapUiFieldSuccessColor;
+	border: 0.0625rem solid @sapUiFieldSuccessColor;
 
 	&.sapMCbMarkChecked:before {
 		color: @sapUiFieldSuccessColor;
@@ -191,7 +191,7 @@ html.sap-desktop {
 
 .sapMCbDisplayOnly .sapMCbBg:not(.sapMCbMarkPartiallyChecked) {
 	border-style: solid;
-	border-width: 0.125rem;
+	border-width: 0.0625rem;
 	margin: 0;
 }
 

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

@@ -166,4 +166,112 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
     &:before {
         box-shadow: inset 0px 0px 0px 2px @sapField_Focus_BorderColor;
     }
+}
+
+// =====================================
+// Input Information state
+// =====================================
+.sapMSltInformation {
+    border: none;
+    background-image: linear-gradient(0deg, @sapField_InformationColor 0, @sapField_InformationColor 100%);
+    background-size: 100% @sapField_InformationBorderWidth;
+    background-repeat: repeat-x;
+    background-position: bottom;
+}
+
+.sapMSltInformation.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
+    background-color: @sapField_Hover_Background;
+
+    &:not(.sapMSltFocused) {
+        box-shadow: @sapContent_Informative_Shadow; // NEW Parameter
+    }
+}
+
+.sapMSltHoverable.sapMSltInformation:not(.sapMSltIconOnly):active,
+.sapMSltFocused.sapMSltInformation {
+    box-shadow: inset 0px 0px 0px 2px @sapField_Active_BorderColor;
+    background-color: @sapField_Focus_Background;
+}
+
+// =====================================
+// Input Success state
+// =====================================
+
+.sapMSltSuccess {
+    border: none;
+    background-image: linear-gradient(0deg, @sapField_SuccessColor 0, @sapField_SuccessColor 100%);
+    background-size: 100% @sapField_SuccessBorderWidth;
+    background-repeat: repeat-x;
+    background-position: bottom;
+}
+
+.sapMSltSuccess.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover  {
+    background-color: @sapField_Hover_Background;
+
+    &:not(.sapMSltFocused) {
+        box-shadow: @sapContent_Positive_Shadow; // 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;
+}
+
+// =====================================
+// Input Warning state
+// =====================================
+
+.sapMSltWarning {
+    border: none;
+    background-image: linear-gradient(0deg, @sapField_WarningColor 0, @sapField_WarningColor 100%);
+    background-size: 100% @sapField_WarningBorderWidth;
+    background-repeat: repeat-x;
+    background-position: bottom;
+}
+
+.sapMSltWarning.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
+    background-color: @sapField_Hover_Background;
+
+    &:not(.sapMSltFocused) {
+        box-shadow: @sapContent_Critical_Shadow; // 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;
+}
+
+
+// =====================================
+// Input Error state
+// =====================================
+
+.sapMSltError {
+    border: none;
+    background-image: linear-gradient(0deg, @sapField_InvalidColor 0, @sapField_InvalidColor 100%);
+    background-size: 100% @sapField_InvalidBorderWidth;
+    background-repeat: repeat-x;
+    background-position: bottom;
+}
+
+.sapMSltError.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
+    background-color: @sapField_Hover_Background;
+
+    &:not(.sapMSltFocused) {
+        box-shadow: @sapContent_Negative_Shadow; // 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;
 }

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

@@ -50,13 +50,15 @@ html.sap-desktop .sapMSelectListItemBase:focus {
 .sapMSelectListItemBase {
 	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;
 	}
-
-	&:last-child::after {
-		border-bottom-left-radius: 0.75rem;
-		border-bottom-right-radius: 0.75rem;
-	}
 }

package/src/sap/ui/core/themes/sap_horizon/.theme

@@ -6,7 +6,7 @@
 	<copyright>OpenUI5
  * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-	<version>1.93.2</version>
+	<version>1.93.3</version>
 
 	<documentation>SAPUI5 Horizon theme library.</documentation>
 

package/src/sap/uxap/themes/sap_horizon/AnchorBar.less

@@ -311,12 +311,12 @@ html.sap-desktop .sapMBtnBase.sapMBtn.sapUxAPAnchorBarButton:focus::after {
 	content: none;
 }
 
-.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized) .sapUiIcon,
+.sapUxAPAnchorBar .sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized) .sapUiIcon,
 .sapUiSizeCompact .sapUxAPAnchorBar .sapUxAPAnchorBarButton:hover .sapMSB.sapMSBTransparent .sapMBtnContent > *,
 .sapUiSizeCompact .sapUxAPAnchorBar .sapUxAPAnchorBarButton:hover .sapMBtn + .sapMBtn .sapMBtnInner *,
 .sapUxAPAnchorBar .sapUxAPAnchorBarButton:hover .sapMSB.sapMSBTransparent .sapMBtnContent > *,
 .sapUxAPAnchorBar .sapUxAPAnchorBarButton:hover .sapMBtn > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) bdi,
 .sapUxAPAnchorBar .sapUxAPAnchorBarButton:hover .sapMBtn + .sapMBtn .sapMBtnInner *,
-.sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive) > .sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnDefault .sapMBtnContent{
+.sapUxAPAnchorBar .sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive) > .sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnDefault .sapMBtnContent{
 	color: @sapContent_Selected_TextColor;
 }