@openui5/themelib_sap_horizon 1.100.0 → 1.101.0

package/src/sap/f/themes/sap_horizon_hcw/DynamicPageHeader.less

@@ -3,13 +3,18 @@
 /* Horizon High Contrast White theme        */
 /* ======================================== */
 
-.sapFDynamicPage-Std-Desktop .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
-	padding: 1rem 2rem;
-}
-
 .sapFDynamicPageHeader {
+    &.sapFDynamicPageHeaderSolid,
     &.sapFDynamicPageHeaderTransparent,
     &.sapFDynamicPageHeaderTranslucent {
         background: @sapUiObjectHeaderBackground;
     }
+}
+
+.sapFDynamicPageNavigation .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
+	box-shadow: none;
+}
+
+.sapFDynamicPageToggleHeaderIndicator:not(.sapUiHidden) + .sapFDynamicPageHeaderPinButton:before {
+	display: none;
 }

package/src/sap/f/themes/sap_horizon_hcw/DynamicPageTitle.less

@@ -3,11 +3,6 @@
 /* Horizon High Contrast White theme       */
 /* ======================================= */
 
-.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle:focus,
-.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleOnly > .sapFDynamicPageTitle:focus {
-	box-shadow: none;
-}
-
 html.sap-desktop .sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
 	outline-width: 0.125rem;
 	outline-offset: -0.25rem; // due to bottom border overlapping
@@ -21,7 +16,8 @@ html.sap-desktop .sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
 	padding: 0.5rem 2rem;
 	word-wrap: break-word;
 
-	&.sapFDynamicPageTitleTransparent {
+	&.sapFDynamicPageTitleTransparent,
+	&.sapFDynamicPageTitleTranslucent {
 		background: @sapUiObjectHeaderBackground;
 	}
 }
@@ -108,6 +104,11 @@ html[data-sap-ui-browser^="ff"].sap-desktop {
 	}
 }
 
-.sapFDynamicPageNavigation .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleOnly > .sapFDynamicPageTitle {
-	box-shadow: none;
+.sapFDynamicPageNavigation .sapFDynamicPageTitleWrapper {
+	&.sapFDynamicPageTitleSnapped,
+	&.sapFDynamicPageTitleOnly {
+		& > .sapFDynamicPageTitle {
+			box-shadow: none;
+		}
+	}
 }

package/src/sap/f/themes/sap_horizon_hcw/GridList.less

@@ -0,0 +1,6 @@
+/* ================================= */
+/* CSS for control sap.f/GridList    */
+/* Horizon High Contrast White theme */
+/* ================================= */
+
+@_sap_f_GridList_ItemFocusBorderRadius: unset;

package/src/sap/f/themes/sap_horizon_hcw/GridListItem.less

@@ -3,8 +3,6 @@
 /* Horizon High Contrast White theme   */
 /* =================================== */
 
-@_sap_f_GridListItem_Header_BoxShadow: 0 0 0.25rem 0 fade(@sapUiContentShadowColor, 15), inset 0 -0.0625rem 0 0 @sapUiPageHeaderBorderColor;
+@_sap_f_GridListItem_HeaderBoxShadow: none;
 @_sap_f_GridListItem_HeaderHeight: 2.75rem;
-@_sap_f_GridListItem_BorderHover: 0 0 0 0.125rem @sapContent_ShadowColor;
-@_sap_f_GridListItem_BorderSelected: 0 0 0 0.125rem @sapUiListSelectionBorderColor;
-@_sap_f_GridListItem_Header_BoxShadowActive: @_sap_f_GridListItem_Header_BoxShadow;
+

package/src/sap/f/themes/sap_horizon_hcw/library.source.less

@@ -15,6 +15,7 @@
 @import "Card.less";
 @import "ShellBar.less";
 @import "CardLoading.less";
+@import "GridList.less";
 @import "GridContainer.less";
 @import "GridListItem.less";
 @import "DynamicPageHeader.less";

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

@@ -3,7 +3,11 @@
 /* Horizon theme                 */
 /* ============================= */
 
-
+@_sap_m_Avatar_Font_Size_XL: 3rem;
+@_sap_m_Avatar_Font_Size_L: 2.25rem;
+@_sap_m_Avatar_Font_Size_M: 1.5rem;
+@_sap_m_Avatar_Font_Size_S: 1.125rem;
+@_sap_m_Avatar_Font_Size_XS: 1rem;
 
 .sapFAvatarSquare {
 	border-radius: @sapUiElementBorderCornerRadius;
@@ -13,120 +17,45 @@
 	}
 }
 
-.sapFAvatarXL{
-	font-size: 3rem;
-}
-
-.sapFAvatarL {
-	font-size: 2.25rem;
-}
-
-.sapFAvatarM {
-	font-size: 1.5rem;
-}
-
-.sapFAvatarS {
-	font-size: 1.125rem;
-}
-
-.sapFAvatarXS {
-	font-size: 1rem;
-}
-
 .sapFAvatar.sapFAvatarInitials > .sapFAvatarInitialsHolder {
 	font-size: inherit;
 }
 
-.sapFAvatarColorAccent1 {
-	background-color: @sapAccentBackgroundColor1;
-	color: darken(@sapAccentColor1, 10);
-}
-.sapFAvatarColorAccent1 .sapFAvatarInitialsHolder {
-	color: darken(@sapAccentColor1, 10);
-}
-
-.sapFAvatarColorAccent2 {
-	background-color: @sapAccentBackgroundColor2;
-	color: @sapAccentColor2;
-}
-.sapFAvatarColorAccent2 .sapFAvatarInitialsHolder {
-	color: @sapAccentColor2;
-}
-
-.sapFAvatarColorAccent3 {
-	background-color: @sapAccentBackgroundColor3;
-	color: darken(@sapAccentColor3, 10);
-}
-.sapFAvatarColorAccent3 .sapFAvatarInitialsHolder {
-	color: darken(@sapAccentColor3, 10);
-}
-
-.sapFAvatarColorAccent4 {
-	background-color: @sapAccentBackgroundColor4;
-	color: @sapAccentColor4;
-}
-.sapFAvatarColorAccent4 .sapFAvatarInitialsHolder {
-	color: @sapAccentColor4;
-}
-
-.sapFAvatarColorAccent5 {
-	background-color: @sapAccentBackgroundColor5;
-	color: darken(@sapAccentColor5, 2);
-}
-.sapFAvatarColorAccent5 .sapFAvatarInitialsHolder {
-	color: darken(@sapAccentColor5, 2);
-}
-
-.sapFAvatarColorAccent6 {
-	background-color: @sapAccentBackgroundColor6;
-	color: @sapAccentColor6;
-}
-.sapFAvatarColorAccent6 .sapFAvatarInitialsHolder {
-	color: @sapAccentColor6;
-}
-
-.sapFAvatarColorAccent7 {
-	background-color: @sapAccentBackgroundColor7;
-	color: @sapAccentColor7;
-}
-.sapFAvatarColorAccent7 .sapFAvatarInitialsHolder {
-	color: @sapAccentColor7;
+.sapFAvatarFocusable:focus {
+	outline: none;
+	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
 }
 
-.sapFAvatarColorAccent8 {
-	background-color: @sapAccentBackgroundColor8;
-	color: @sapAccentColor8;
-}
-.sapFAvatarColorAccent8 .sapFAvatarInitialsHolder {
-	color: @sapAccentColor8;
-}
+.sapFAvatarColorTileIcon {
+	background-color: @sapUiTileBackground;
+	color: @sapUiTileIconColor;
 
-.sapFAvatarColorAccent9 {
-	background-color: @sapAccentBackgroundColor9;
-	color: darken(@sapAccentColor9, 2);
-}
-.sapFAvatarColorAccent9 .sapFAvatarInitialsHolder {
-	color: darken(@sapAccentColor9, 2);
+	.sapFAvatarInitialsHolder {
+		color: currentColor;
+	}
 }
 
-.sapFAvatarColorAccent10 {
-	background-color: @sapAccentBackgroundColor10;
-	color: darken(@sapAccentColor10, 3);
-}
-.sapFAvatarColorAccent10 .sapFAvatarInitialsHolder {
-	color: darken(@sapAccentColor10, 3);
+.sapFAvatarColorPlaceholder {
+	background-color: @sapUiContentImagePlaceholderBackground;
+	color: @sapUiContentImagePlaceholderForegroundColor;;
+	.sapFAvatarInitialsHolder {
+		color: currentColor;
+	}
 }
 
-.sapFAvatarColorTileIcon {
-	background-color: @sapAccentBackgroundColor10;
-	color: @sapTile_IconColor;
-}
+.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";
 
-.sapFAvatarColorTileIcon .sapFAvatarInitialsHolder {
-	color: @sapTile_IconColor;
-}
+	// Build the real CSS selector.
+	// The output would be something like this: .sapFAvatar.sapFAvatarColorAccent6 {background-color: #0092d1;}
+	.@{css-selector} {
+		background-color: @@background-param;
+	}
 
-.sapFAvatarFocusable:focus {
-	outline: none;
-	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
-}
+	.@{css-selector}.sapFAvatarIcon,
+	.@{css-selector} .sapFAvatarInitialsHolder {
+		color: contrast(@@background-param, @@color-param, @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold);
+	}
+}

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

@@ -155,10 +155,6 @@ span.sapMBtnInner.sapMBtnEmphasized {
 /* Custom focus border:                                                 */
 /* ---------------------------------------------------------------------*/
 
-html.sap-desktop .sapMBtn:focus > .sapMBtnActive.sapMFocusable {
-	border-color:    @sapUiContentContrastFocusColor;
-}
-
 html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMBtnActive.sapMFocusable {
 	border-color:    @sapUiContentFocusColor;
 }
@@ -243,12 +239,6 @@ html.sap-desktop .sapMFooter-CTX .sapMBtnInner.sapMBtnReject {
 	background-color: @sapUiButtonActiveBackground;
 }
 
-:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnIconFirst.sapMBtnTransparent.sapMBtnActive,
-:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnIconLast.sapMBtnTransparent.sapMBtnActive {
-	background-color: @sapUiButtonLiteActiveBackground;
-	border-color: @sapUiButtonLiteActiveBorderColor;
-}
-
 // text color for enabled buttons
 :not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnAccept.sapMBtnActive,
 :not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnAccept.sapMBtnActive .sapMBtnIcon {
@@ -265,6 +255,11 @@ html.sap-desktop .sapMFooter-CTX .sapMBtnInner.sapMBtnReject {
 	color: @sapUiButtonAttentionActiveTextColor;
 }
 
+:not(.sapMBtnDisabled) .sapMBtnBack > .sapMBtnIcon,
+:not(.sapMBtnDisabled) .sapMBtnTransparent > .sapMBtnIcon {
+	color: @sapUiButtonLiteTextColor;
+}
+
 // box shadow on hover
 .sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnInner:not(.sapMBtnActive) {
 	box-shadow: @sapContent_Interaction_Shadow;