@openui5/themelib_sap_horizon 1.133.2 → 1.135.0

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

@@ -1,11 +1,11 @@
-/* ======================================== */
-/* CSS for control sap.m/WheelSlider        */
-/* Horizon theme                            */
-/* ======================================== */
+/* ================================== */
+/* CSS for control sap.m/WheelSlider  */
+/* Horizon theme                      */
+/* ================================== */
 
 @_sap_m_TimePicker_ItemColor: darken(@sapUiListBackground, 3);
 @_sap_m_TimePicker_ItemHoverColor: darken(@sapUiListBackground, 6);
-@_sap_m_TimePicker_ItemBorderColor: @sapUiListBackground;
+@_sap_m_TimePicker_ItemBorderColor: var(--sapList_Background);
 
 .sapMWS:not(:last-child),
 .sapMWS.sapMWSExpanded:not(:last-child) {
@@ -13,51 +13,65 @@
 }
 
 .sapMWS {
+
 	.sapMWSLabel,
 	.sapMWSInner {
 		width: 3rem;
 		height: 2.875rem;
+
 		.sapMWSItem,
 		.sapMWSSelectionFrame {
 			width: 3rem;
 			height: 2.875rem;
 		}
+
 		.sapMWSItem {
 			border-radius: 0.25rem;
-			background: @sapUiActive;
+			background: var(--sapActiveColor);
 			border: 1px solid @_sap_m_TimePicker_ItemBorderColor;
+
 			&:hover {
 				background: darken(@sapUiSelected, 10);
 			}
 		}
 	}
+
 	&.sapMWSExpanded {
+
 		.sapMWSInner {
+
 			.sapMWSItem {
 				background: @_sap_m_TimePicker_ItemColor;
 				border: 1px solid @_sap_m_TimePicker_ItemBorderColor;
+
 				&:hover {
 					background: @_sap_m_TimePicker_ItemHoverColor;
 				}
+
 				&:active {
-					background: @sapUiActive;
-					color: @sapUiContentContrastTextColor;
+					background: var(--sapActiveColor);
+					color: var(--sapContent_ContrastTextColor);
 				}
 
 			}
+
 			.sapMWSSelectionFrame {
-				border: 0.125rem solid @sapUiSelected;
+				border: 0.125rem solid var(--sapSelectedColor);
 				border-radius: 0.25rem;
 				outline:none;
+
 				&:hover {
+
 					+ ul > li.sapMWSItem.sapMWSItemSelected {
 						background: @_sap_m_TimePicker_ItemHoverColor;
 					}
 				}
+
 				&:active {
+
 					& + ul > li.sapMWSItem.sapMWSItemSelected {
-						background: @sapUiActive;
-						color: @sapUiContentContrastTextColor;
+						background: var(--sapActiveColor);
+						color: var(--sapContent_ContrastTextColor);
 					}
 				}
 			}
@@ -66,42 +80,52 @@
 }
 
 .sapUiSizeCompact .sapMWS {
+
 	.sapMWSLabel,
 	.sapMWSInner {
+		width: 3rem;
+		height: 2rem;
+
 		.sapMWSItem,
 		.sapMWSSelectionFrame,
 		.sapMWSExpanded {
 			width: 3rem;
 		}
-		width: 3rem;
-		height: 2rem;
 	}
 }
 
 .sap-phone {
+
 	.sapMWS {
+
 		.sapMWSLabel,
 		.sapMWSInner {
 			width: 3rem;
 			height: 2.875rem;
+
 			.sapMWSItem,
 			.sapMWSSelectionFrame {
 				width: 3rem;
 				height: 2.875rem;
 			}
+
 			.sapMWSItem {
 				border: 1px solid @_sap_m_TimePicker_ItemBorderColor;
 			}
 		}
+
 		&.sapMWSExpanded {
+
 			.sapMWSInner {
+
 				.sapMWSItem {
 					background: @_sap_m_TimePicker_ItemColor;
 					border: 1px solid @_sap_m_TimePicker_ItemBorderColor;
 					width: 3rem;
 				}
+
 				.sapMWSSelectionFrame {
-					outline: 0.125rem solid @sapUiSelected;
+					outline: 0.125rem solid var(--sapSelectedColor);
 					outline-offset: -0.188rem;
 				}
 			}

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

@@ -40,6 +40,7 @@
 .sapFAvatarColorTileIcon {
 	background-color: var(--sapTile_Background);
 	color: var(--sapTile_IconColor);
+	border: 0.0625rem solid var(--sapAvatar_Lite_BorderColor);
 
 	.sapFAvatarInitialsHolder {
 		color: currentColor;
@@ -49,21 +50,33 @@
 .sapFAvatarColorPlaceholder {
 	background-color: var(--sapContent_ImagePlaceholderBackground);
 	color: var(--sapContent_ImagePlaceholderForegroundColor);
+	border: 0.0625rem solid var(--sapAvatar_Lite_BorderColor);
 
 	.sapFAvatarInitialsHolder {
 		color: currentColor;
 	}
 }
 
+.sapFAvatarColorTransparent {
+	background-color: var(--sapAvatar_Lite_Background);
+	border: 0.0625rem solid var(--sapAvatar_Lite_BorderColor);
+}
+
 .generateColor (@accentIndex) {
 	@css-selector: ~"sapFAvatarColorAccent@{accentIndex}"; // Create the css selector string
 	@background-param: ~"sapUiAvatar@{accentIndex}Background"; // Build the color param which is a sapUiAccent
 	@color-param: ~"sapUiAvatar@{accentIndex}TextColor";
+	@hover-color: ~"sapUiAvatar@{accentIndex}HoverBackground";
 
 	// Build the real CSS selector.
 	// The output would be something like this: .sapFAvatar.sapFAvatarColorAccent6 {background-color: #0092d1;}
 	.@{css-selector} {
 		background-color: @@background-param;
+		&.sapFAvatarImage.sapFAvatarFocusable:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover,
+		&.sapFAvatarFocusable:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
+			background-color: @@hover-color;
+			box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset var(--sapAvatar_Hover_BorderColor);
+		}
 	}
 
 	.@{css-selector}.sapFAvatarIcon,

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

@@ -137,6 +137,7 @@
 /* Custom focus border:                                                 */
 /* ---------------------------------------------------------------------*/
 
+.sapMBtn:focus-visible > .sapMBtnEmphasized.sapMBtnActive.sapMFocusable,
 html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMBtnActive.sapMFocusable {
 	border-color: var(--sapContent_FocusColor);
 }
@@ -154,6 +155,7 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMBtnActive.sapMFocusable
 	border-color: var(--sapButton_Success_BorderColor);
 }
 
+.sapMBtn:focus-visible > .sapMFocusable:not(.sapMBadgeIndicator)::before,
 html.sap-desktop .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator)::before {
 	content: '';
 	position: absolute;
@@ -167,6 +169,10 @@ html.sap-desktop .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator)::befor
 	border-radius: 0.375rem;
 }
 
+.sapMBtn:focus-visible > .sapMBtnEmphasized.sapMFocusable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBadgeIndicator)::before,
+.sapMBtn:focus-visible > .sapMBtnCritical.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator)::before,
+.sapMBtn:focus-visible > .sapMBtnNegative.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator)::before,
+.sapMBtn:focus-visible > .sapMBtnSuccess.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator)::before,
 html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBadgeIndicator)::before,
 html.sap-desktop .sapMBtn:focus > .sapMBtnCritical.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator)::before,
 html.sap-desktop .sapMBtn:focus > .sapMBtnNegative.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator)::before,

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

@@ -55,7 +55,6 @@
 				color: var(--sapTile_TextColor);
 			}
 		}
-
 	}
 }
 
@@ -70,14 +69,13 @@
 	}
 }
 
-.sapMGT.sapMGTScopeActions:not(.sapMGTStateLoading) {
+.sapMGT.sapMGTScopeActions:not(.sapMGTStateLoading){
 
 	.sapMTileCntContent {
 
 		&::after {
 			opacity: 0.4;
 			background-color: var(--sapTile_Background);
-
 		}
 	}
 }
@@ -116,7 +114,7 @@
 }
 
 .sapMGT.sapMGTLineMode:not(.sapMGTDisabled).sapMGTLineModePress {
-	background: fade(@sapUiShellHoverBackground, 12);
+	background: var(--sapTile_Active_Background);
 }
 
 .sapMGT.sapMGTLineMode .sapMGTFocusDiv {
@@ -301,51 +299,39 @@ html.sap-tablet .sapMGTWithImageHoverOverlay {
 }
 
 .sapMGT.sapMGTPressActive {
-	box-shadow: 0 0 0 1px fade(@sapUiContentShadowColor, 30);
+	box-shadow: none;
 
 	&:not(.sapMGTBackgroundImage) {
 		background: var(--sapTile_Active_Background);
 	}
-
 	&.sapMGTScopeActions .sapMTileCntContent::after {
-		background-color: fade(@sapUiTileActiveBackground, 70);
+		background-color: var(--sapTile_Active_Background);
 	}
 }
 
-.sapMGTWithImageHoverOverlay.sapMGTPressActive {
-	background: fade(@sapUiTileActiveBackground, 20%);
-}
-
- .sapMGT:hover:not(.sapMGTPressActive) {
-	box-shadow: 0 0 0 1px fade(@sapUiContentShadowColor, 30);
-	transition: background 0.2s;
-
+.sapMGT:hover:not(.sapMGTPressActive) {
+	box-shadow: var(--sapContent_Shadow2);
 	&:not(.sapMGTBackgroundImage) {
-		background: var(--sapTile_Hover_Background);
-	}
-
-	.sapMGTWithImageHoverOverlay {
-		background: fade(@sapUiTileHoverBackground, 10%);
-		transition: background 0.2s;
+		background-color: var(--sapTile_Hover_Background);
 	}
 
 	&.sapMGTScopeActions .sapMTileCntContent::after {
-		background-color: fade(@sapUiTileHoverBackground, 70);
-		transition: background 0.2s;
+		background-color: var(--sapTile_Hover_Background);
 	}
 }
 
-.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, /* focus inside GridContainer */
-.sapMGT:focus .sapMGTFocusDiv,
-.sapMGT:active .sapMGTFocusDiv,
-.sapMGTLineModePress .sapMGTFocusDiv {
-	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+.sapMGTActionButtonPress.sapMGT:focus {
+
+	.sapMGTFocusDiv {
+		box-shadow: none;
+	}
 }
 
 .sapMGTActionButtonPress.sapMGT:active {
 
 	.sapMGTFocusDiv {
 		border: none;
+		box-shadow: none;
 	}
 }
 
@@ -369,7 +355,6 @@ html.sap-tablet .sapMGTWithImageHoverOverlay {
 	}
 }
 
-
 large.sapUiSizeCompact .sapMGT.sapMGTLineMode,
 .sapUiMedia-GenericTileDeviceSet-large .sapUiSizeCompact .sapMGT.sapMGTLineMode {
 	margin-right: 1rem;
@@ -377,7 +362,6 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode,
 }
 
 .sapMGT {
-	border-radius: var(--sapTile_BorderCornerRadius);
 	border-color: var(--sapTile_BorderColor);
 	box-shadow: var(--sapContent_Shadow0);
 
@@ -388,7 +372,7 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode,
 
 .sapMGT.tileWithAppInfo {
 
-	.sapMGTContent {
+	.sapMGTContent{
 		border-radius: 0;
 	}
 }
@@ -478,7 +462,6 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode,
 	margin-right: 1px;
 }
 
-.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv,
 .sapMGT:focus .sapMGTFocusDiv,
 .sapMGT:active .sapMGTFocusDiv,
 .sapMGTLineModePress .sapMGTFocusDiv {
@@ -540,11 +523,6 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode,
 	left: 0;
 }
 
-.sapFGridContainer .sapFGridContainerItemWrapper:not(.sapFGridContainerItemWrapperNoVisualFocus):focus::before {
-	border: 2px solid var(--sapContent_FocusColor);
-	border-radius: var(--sapElement_BorderCornerRadius);
-}
-
 .miniTileBackground {
 	background: var(--sapTile_Background);
 	box-shadow: var(--sapContent_Shadow0) !important;
@@ -572,16 +550,6 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode,
 	font-weight: bold;
 }
 
-.OneByOne.tileWithAppInfo {
-
-	.sapMGTTInfoContainer {
-
-		.sapMGTTInfo {
-			background-color: var(--sapTile_Active_Background);
-		}
-	}
-}
-
 .TwoByOne.sapMGTActionMode {
 	border-radius: 1.25rem;