@openui5/themelib_sap_horizon 1.114.8 → 1.114.10

package/THIRDPARTY.txt

@@ -478,7 +478,7 @@ License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: lib/jsdoc/ui5/plugin.js
 
-Component: SAP Theming Base Content, version: 11.3.0
+Component: SAP Theming Base Content, version: 11.6.8
 Copyright: SAP SE or an SAP affiliate company and Theming Base Content contributors
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/themelib_sap_horizon",
-  "version": "1.114.8",
+  "version": "1.114.10",
   "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.114.8",
-    "@openui5/sap.m": "1.114.8",
-    "@openui5/sap.tnt": "1.114.8",
-    "@openui5/sap.ui.codeeditor": "1.114.8",
-    "@openui5/sap.ui.commons": "1.114.8",
-    "@openui5/sap.ui.core": "1.114.8",
-    "@openui5/sap.ui.dt": "1.114.8",
-    "@openui5/sap.ui.fl": "1.114.8",
-    "@openui5/sap.ui.mdc": "1.114.8",
-    "@openui5/sap.ui.integration": "1.114.8",
-    "@openui5/sap.ui.layout": "1.114.8",
-    "@openui5/sap.ui.rta": "1.114.8",
-    "@openui5/sap.ui.suite": "1.114.8",
-    "@openui5/sap.ui.table": "1.114.8",
-    "@openui5/sap.ui.unified": "1.114.8",
-    "@openui5/sap.ui.ux3": "1.114.8",
-    "@openui5/sap.uxap": "1.114.8"
+    "@openui5/sap.f": "1.114.10",
+    "@openui5/sap.m": "1.114.10",
+    "@openui5/sap.tnt": "1.114.10",
+    "@openui5/sap.ui.codeeditor": "1.114.10",
+    "@openui5/sap.ui.commons": "1.114.10",
+    "@openui5/sap.ui.core": "1.114.10",
+    "@openui5/sap.ui.dt": "1.114.10",
+    "@openui5/sap.ui.fl": "1.114.10",
+    "@openui5/sap.ui.mdc": "1.114.10",
+    "@openui5/sap.ui.integration": "1.114.10",
+    "@openui5/sap.ui.layout": "1.114.10",
+    "@openui5/sap.ui.rta": "1.114.10",
+    "@openui5/sap.ui.suite": "1.114.10",
+    "@openui5/sap.ui.table": "1.114.10",
+    "@openui5/sap.ui.unified": "1.114.10",
+    "@openui5/sap.ui.ux3": "1.114.10",
+    "@openui5/sap.uxap": "1.114.10"
   }
 }

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

@@ -1,43 +1,99 @@
-/* ============================= */
-/* CSS for control sap.f/AvatarGroup  */
-/* Horizon theme                 */
-/* ============================= */
+/* ===================================== */
+/* CSS for control sap.f/AvatarGroup	 */
+/* Horizon theme            	 		 */
+/* ===================================== */
 
+.applyBorderColorAccent(@counter) when (@counter > 0) {
+	.sapFAvatar.sapFAvatarColorAccent@{counter} {
+		border: 0.0625rem solid~"@{sapUiAccent@{counter}}";
+	}
 
-/* ============================= */
-/* CSS for control sap.f/AvatarGroup  */
-/* Base theme                    */
-/* ============================= */
-
-.sapFAvatarGroup:focus {
-	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
-	outline: none;
-	border-radius: 0.35rem;
+	.applyBorderColorAccent(@counter - 1);
 }
 
 .sapFAvatarGroup {
 	padding: 0.125rem;
-}
 
-.sapFAvatarGroupIndividual {
+	.sapFAvatar {
+		border: none;
+	}
 
-	.sapFAvatarGroupItem:focus {
+	&:focus {
+		box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
 		outline: none;
-		.sapFAvatar  {
-			outline: none;
-			box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+		border-radius: 0.35rem;
+	}
+
+	&.sapFAvatarGroupIndividual {
+		.sapFAvatarGroupItem {
+
+			&:hover:not(:active):not(:focus) {
+				.applyBorderColorAccent(10)
+			}
+
+			&:active {
+				.sapFAvatar {
+					background-color: @sapUiButtonActiveBackground;
+
+					.sapFAvatarInitialsHolder {
+						color: @sapUiButtonActiveTextColor;
+					}
+				}
+			}
+
+			&:focus {
+				outline: none;
+
+				.sapFAvatar {
+					outline: none;
+					box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+				}
+			}
+
 		}
 	}
+
+	&.sapFAvatarGroupGroup {
+		&:hover:not(:active) {
+			.sapFAvatarGroupItem {
+				.applyBorderColorAccent(10);
+			}
+		}
+
+		&:active {
+			.sapFAvatarGroupItem {
+				.sapFAvatar {
+					border: 0.0625rem solid @sapUiButtonActiveBorderColor;
+					background-color: @sapUiButtonActiveBackground;
+
+					.sapFAvatarInitialsHolder {
+						color: @sapUiButtonActiveTextColor;
+					}
+				}
+			}
+
+			.sapFAvatarGroupMoreButton {
+				.sapMBtnInner {
+					background-color: @sapUiButtonActiveBackground;
+					border: 0.0625rem solid @sapUiButtonActiveBorderColor;
+
+					.sapMBtnContent {
+						color: @sapUiButtonActiveTextColor;
+					}
+				}
+			}
+		}
+	}
+}
+
+.sapFAvatarGroupPopover .sapFCard {
+	border-radius: 0;
 }
 
-html.sap-desktop .sapFAvatarGroupMoreButton.sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
+html.sap-desktop .sapFAvatarGroupMoreButton.sapMBtn:focus>.sapMFocusable:not(.sapMBadgeIndicator):before {
 	border-radius: 50%;
 	left: 0;
 	right: 0;
 	top: 0;
 	bottom: 0;
-}
-
-.sapFAvatarGroupPopover .sapFCard {
-	border-radius: 0;
-}
+}

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

@@ -1,42 +1,99 @@
-/* ================================== */
-/* CSS for control sap.f/AvatarGroup  */
-/* Evening Horizon theme              */
-/* ================================== */
-
-.sapFAvatarGroup:focus {
-	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
-	outline: none;
-	border-radius: 0.35rem;
+/* ===================================== */
+/* CSS for control sap.f/AvatarGroup	 */
+/* Evening Horizon theme            	 */
+/* ===================================== */
+
+.applyBorderColorAccent(@counter) when (@counter > 0) {
+	.sapFAvatar.sapFAvatarColorAccent@{counter} {
+		border: 0.0625rem solid~"@{sapUiAccent@{counter}}";
+	}
+
+	.applyBorderColorAccent(@counter - 1);
 }
 
 .sapFAvatarGroup {
 	padding: 0.125rem;
-}
 
-.sapFAvatarGroupIndividual {
+	.sapFAvatar {
+		border: none;
+	}
 
-	.sapFAvatarGroupItem:focus {
+	&:focus {
+		box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
 		outline: none;
-		.sapFAvatar  {
-			outline: none;
-			box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+		border-radius: 0.35rem;
+	}
+
+	&.sapFAvatarGroupIndividual {
+		.sapFAvatarGroupItem {
+
+			&:hover:not(:active):not(:focus) {
+				.applyBorderColorAccent(10)
+			}
+
+			&:active {
+				.sapFAvatar {
+					background-color: @sapUiButtonActiveBackground;
+
+					.sapFAvatarInitialsHolder {
+						color: @sapUiButtonActiveTextColor;
+					}
+				}
+			}
+
+			&:focus {
+				outline: none;
+
+				.sapFAvatar {
+					outline: none;
+					box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+				}
+			}
+
 		}
 	}
-}
 
-html.sap-desktop .sapFAvatarGroupMoreButton.sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
-	border-radius: 50%;
-	left: 0;
-	right: 0;
-	top: 0;
-	bottom: 0;
-}
+	&.sapFAvatarGroupGroup {
+		&:hover:not(:active) {
+			.sapFAvatarGroupItem {
+				.applyBorderColorAccent(10);
+			}
+		}
+
+		&:active {
+			.sapFAvatarGroupItem {
+				.sapFAvatar {
+					border: 0.0625rem solid @sapUiButtonActiveBorderColor;
+					background-color: @sapUiButtonActiveBackground;
 
+					.sapFAvatarInitialsHolder {
+						color: @sapUiButtonActiveTextColor;
+					}
+				}
+			}
 
-html.sap-desktop .sapFAvatarGroupMoreButton.sapMBtn:focus > .sapMBtnActive.sapMFocusable {
-	border-color: transparent;
+			.sapFAvatarGroupMoreButton {
+				.sapMBtnInner {
+					background-color: @sapUiButtonActiveBackground;
+					border: 0.0625rem solid @sapUiButtonActiveBorderColor;
+
+					.sapMBtnContent {
+						color: @sapUiButtonActiveTextColor;
+					}
+				}
+			}
+		}
+	}
 }
 
 .sapFAvatarGroupPopover .sapFCard {
 	border-radius: 0;
+}
+
+html.sap-desktop .sapFAvatarGroupMoreButton.sapMBtn:focus>.sapMFocusable:not(.sapMBadgeIndicator):before {
+	border-radius: 50%;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
 }

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

@@ -5,11 +5,11 @@
 
 /* Background animation element */
 .sapUiLocalBusyIndicatorAnimation > div::before {
-	background: @sapUiBrand;
+	background: @sapUiContentBusyColor;
 	animation-duration: 0ms;
 }
 
 /* Shadow animation element */
 .sapUiLocalBusyIndicatorAnimation > div::after {
-	box-shadow: inset 0px 0px 0px 0px @sapUiBrand;
+	box-shadow: inset 0px 0px 0px 0px @sapUiContentBusyColor;
 }

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

@@ -35,7 +35,7 @@ span.sapMBtnInner.sapMBtnEmphasized {
 /* --------------------- */
 .sapMBtnInner {
 	font-size: @sapMFontMediumSize;
-	height: 2.25rem;
+	height: @sapUiElementHeight;
 	min-width: 2.25rem;
 	margin: 0;
 	padding: 0;
@@ -184,6 +184,10 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnNeutral.sapMFocusable:not(.sapMBadgeIn
 	border-color: @sapUiButtonLiteBorderColor;
 }
 
+.sapMBtn .sapMBtnNeutral.sapMBtnInner {
+	text-shadow: @sapUiContentTextShadow;
+}
+
 /* ---------------------------------------------------------------------*/
 /* Disabled, hover and active states:                                   */
 /* ---------------------------------------------------------------------*/
@@ -279,31 +283,6 @@ html.sap-desktop .sapMFooter-CTX .sapMBtnInner.sapMBtnReject {
 	color: @sapUiButtonLiteTextColor;
 }
 
-// box shadow on hover
-.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnInner:not(.sapMBtnActive) {
-	box-shadow: @sapContent_Interaction_Shadow;
-}
-
-.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnInner:not(.sapMBtnActive).sapMBtnEmphasized,
-.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnInner:not(.sapMBtnActive).sapMBtnSuccess,
-.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnInner:not(.sapMBtnActive).sapMBtnNegative,
-.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnInner:not(.sapMBtnActive).sapMBtnNeutral,
-.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnInner:not(.sapMBtnActive).sapMBtnCritical {
-	box-shadow: none;
-}
-
-.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnInner:not(.sapMBtnActive).sapMBtnAccept {
-	box-shadow: @sapContent_Positive_Shadow;
-}
-
-.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnInner:not(.sapMBtnActive).sapMBtnReject {
-	box-shadow: @sapContent_Negative_Shadow;
-}
-
-.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnInner:not(.sapMBtnActive).sapMBtnAttention {
-	box-shadow: @sapContent_Critical_Shadow;
-}
-
 /* ----------------------*/
 /* Badges                */
 /* ----------------------*/
@@ -314,4 +293,12 @@ html.sap-desktop .sapMFooter-CTX .sapMBtnInner.sapMBtnReject {
 	color: @sapContent_BadgeTextColor;
 	font-size: @sapFontSmallSize;
 	text-align: center;
+}
+
+.sapMBtn:hover > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
+.sapMIBar-CTX .sapMBtn:hover > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
+
+	bdi {
+		color: @sapUiButtonLiteHoverTextColor;
+	}
 }

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

@@ -219,25 +219,25 @@
 	}
 
 
-  //More Button
-  .sapMITHStartOverflow,
-  .sapMITHEndOverflow {
-	.sapMITBItem {
-	  color: @sapButton_TextColor;
-	  background: @sapButton_Hover_Background;
-	  border: 1px solid @sapButton_BorderColor;
+	//More Button
+	.sapMITHStartOverflow,
+	.sapMITHEndOverflow {
+		.sapMITBItem {
+			color: @sapButton_TextColor;
+			background: @sapButton_Background;
+			border: 1px solid @sapButton_BorderColor;
 
-	  .sapMITHShowSubItemsIcon {
-	   color: @sapButton_TextColor;
-	  }
+			.sapMITHShowSubItemsIcon {
+				color: @sapUiBaseText;
+			}
+		}
 	}
-  }
 
 	.sapMITHEndOverflow,
 	.sapMITHStartOverflow {
 		.sapMITBItem:hover {
-			background: @sapButton_Background;
-			border: 1px solid @_sap_m_IconTabBar_ShellOverflowHoverBorderColor;
+			background: @sapButton_Hover_Background;
+			border: 1px solid @_sap_m_IconTabBar_Overflow_BorderColorHover;
 		}
 	}
 
@@ -250,7 +250,7 @@
 
 	//Arrow button
 	.sapMITBFilterWithItems .sapMITBFilterExpandBtn .sapMBtnIcon  {
-		color: @sapButton_TextColor;
+		color: @sapUiBaseText;
 	}
 }
 
@@ -387,7 +387,7 @@
 			border-color: @sapContent_Selected_ForegroundColor;
 		}
 		.sapMBtnIcon {
-			color: @_sap_m_IconTabBar_SelectedTextColor;
+			color: @_sap_m_IconTabBar_SelectedTextColor !important;
 		}
 	}
 
@@ -467,6 +467,28 @@
 .sapMITBFilterDefault {
 	border-color: @sapUiContentSelectedForegroundColor;
 	color: @sapUiContentSelectedForegroundColor;
+
+	.sapMITBFilterExpandBtnSeparator {
+		border-color: @sapUiBaseText;
+	}
+
+	.sapMBtnIcon {
+		color: @sapUiBaseText !important;
+	}
+}
+
+.sapMITBFilterDefault {
+	.sapMITBFilterWrapper:hover {
+		.sapMITBText {
+			color: @sapUiContentSelectedForegroundColor;
+		}
+	}
+
+	.sapMITBFilterExpandBtn:hover {
+		.sapMBtnIcon {
+			color: @sapUiBaseText;
+		}
+	}
 }
 
 .sapMITBFilterNeutral {
@@ -733,10 +755,11 @@ html.sap-desktop {
 			.sapMITBItem {
 				&:active{
 					background-color: @_sap_m_IconTabBar_Overflow_BackgroundColorPressed;
+					border: 1px solid @_sap_m_IconTabBar_Overflow_BorderColorPressed;
 				}
 				&:active::after {
-					// when overflow is pressed, make the focus white
-					border-color: @_sap_m_IconTabBar_Overflow_TextColorPressed;
+					// when overflow is pressed, hide the focus
+					border-color: transparent;
 				}
 			}
 		}

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

@@ -74,10 +74,14 @@
 	opacity: @sapUiContentDisabledOpacity;
 }
 
-.sapMFocus.sapMInputBase .sapMInputBaseContentWrapper {
+.sapMFocus.sapMInputBase .sapMInputBaseContentWrapper:not(.sapMInputBaseDisabledWrapper) {
 	background-color: @sapField_Focus_Background;
 	outline: none;
 
+	&::before {
+		border-color: @sapUiFieldActiveBorderColor;
+	}
+
 	&.sapMInputBaseReadonlyWrapper {
 		background: @sapField_ReadOnly_Background;
 	}

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

@@ -12,9 +12,7 @@
 	border-color: @sapUiMessageInformationBorderColor;
 	color: @sapUiBaseText;
 
-	.sapMBtnTransparent,
-	.sapMBtn:hover>.sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
-	.sapMIBar-CTX .sapMBtn:hover>.sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
+	.sapMBtnTransparent {
 		background-color: @sapInformationBackground;
 		border-color: @sapInformationBackground;
 	}
@@ -27,9 +25,7 @@
 .sapMMsgStripError {
 	border-color: @sapUiMessageErrorBorderColor;
 
-	.sapMBtnTransparent,
-	.sapMBtn:hover>.sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
-	.sapMIBar-CTX .sapMBtn:hover>.sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
+	.sapMBtnTransparent {
 		background-color: @sapErrorBackground;
 		border-color: @sapErrorBackground;
 	}
@@ -38,9 +34,7 @@
 .sapMMsgStripSuccess {
 	border-color: @sapUiMessageSuccessBorderColor;
 
-	.sapMBtnTransparent,
-	.sapMBtn:hover>.sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
-	.sapMIBar-CTX .sapMBtn:hover>.sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
+	.sapMBtnTransparent {
 		background-color: @sapSuccessBackground;
 		border-color: @sapSuccessBackground;
 	}
@@ -49,9 +43,7 @@
 .sapMMsgStripWarning {
 	border-color: @sapUiMessageWarningBorderColor;
 
-	.sapMBtnTransparent,
-	.sapMBtn:hover>.sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
-	.sapMIBar-CTX .sapMBtn:hover>.sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
+	.sapMBtnTransparent {
 		background-color: @sapWarningBackground;
 		border-color: @sapWarningBackground;
 	}