@openui5/themelib_sap_horizon 1.100.0 → 1.102.1

package/THIRDPARTY.txt

@@ -400,7 +400,7 @@ Contained in: src/sap.ui.mdc/test/sap/ui/mdc/sample/field/filterfieldwithoperato
 
 Library: sap.ui.webc.common:
 
-Component: UI5 Web Components, version: 1.0.0-rc.12
+Component: UI5 Web Components, version: 1.1.2
 Copyright: SAP
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
@@ -411,7 +411,7 @@ Contained in: src/sap.ui.webc.common/src/sap/ui/webc/common/thirdparty/base/*.*
 	src/sap.ui.webc.common/src/sap/ui/webc/common/thirdparty/icons-tnt/*.*
 	src/sap.ui.webc.common/src/sap/ui/webc/common/thirdparty/icons-business-suite/*.*
 
-Component: lit-html, version: 1.4.1
+Component: lit-html, version: 2.0.1
 Copyright: Google LLC
 License: BSD-3-Clause
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/BSD-3-Clause.txt
@@ -420,7 +420,7 @@ Contained in: src/sap.ui.webc.common/src/sap/ui/webc/common/thirdparty/lit-html/
 
 Library: sap.ui.webc.fiori:
 
-Component: UI5 Web Components, version: 1.0.0-rc.12
+Component: UI5 Web Components, version: 1.1.2
 Copyright: SAP
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
@@ -429,7 +429,7 @@ Contained in: src/sap.ui.webc.fiori/src/sap/ui/webc/fiori/thirdparty/*.*
 
 Library: sap.ui.webc.main:
 
-Component: UI5 Web Components, version: 1.0.0-rc.12
+Component: UI5 Web Components, version: 1.1.2
 Copyright: SAP
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
@@ -450,7 +450,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.1.36-SNAPSHOT
+Component: SAP Theming Base Content, version: 11.1.39
 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.100.0",
+  "version": "1.102.1",
   "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.100.0",
-    "@openui5/sap.m": "1.100.0",
-    "@openui5/sap.tnt": "1.100.0",
-    "@openui5/sap.ui.codeeditor": "1.100.0",
-    "@openui5/sap.ui.commons": "1.100.0",
-    "@openui5/sap.ui.core": "1.100.0",
-    "@openui5/sap.ui.dt": "1.100.0",
-    "@openui5/sap.ui.fl": "1.100.0",
-    "@openui5/sap.ui.mdc": "1.100.0",
-    "@openui5/sap.ui.integration": "1.100.0",
-    "@openui5/sap.ui.layout": "1.100.0",
-    "@openui5/sap.ui.rta": "1.100.0",
-    "@openui5/sap.ui.suite": "1.100.0",
-    "@openui5/sap.ui.table": "1.100.0",
-    "@openui5/sap.ui.unified": "1.100.0",
-    "@openui5/sap.ui.ux3": "1.100.0",
-    "@openui5/sap.uxap": "1.100.0"
+    "@openui5/sap.f": "1.102.1",
+    "@openui5/sap.m": "1.102.1",
+    "@openui5/sap.tnt": "1.102.1",
+    "@openui5/sap.ui.codeeditor": "1.102.1",
+    "@openui5/sap.ui.commons": "1.102.1",
+    "@openui5/sap.ui.core": "1.102.1",
+    "@openui5/sap.ui.dt": "1.102.1",
+    "@openui5/sap.ui.fl": "1.102.1",
+    "@openui5/sap.ui.mdc": "1.102.1",
+    "@openui5/sap.ui.integration": "1.102.1",
+    "@openui5/sap.ui.layout": "1.102.1",
+    "@openui5/sap.ui.rta": "1.102.1",
+    "@openui5/sap.ui.suite": "1.102.1",
+    "@openui5/sap.ui.table": "1.102.1",
+    "@openui5/sap.ui.unified": "1.102.1",
+    "@openui5/sap.ui.ux3": "1.102.1",
+    "@openui5/sap.uxap": "1.102.1"
   }
 }

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

@@ -3,14 +3,15 @@
 /* Horizon theme                 */
 /* ============================= */
 
-@_sap_f_Card_HeaderFocusBorderBottomOffset: -1px;
-@_sap_f_Card_HeaderFocusBorderTopOffset: -1px;
-@_sap_f_Card_HeaderFocusBorderLeftOffset: -1px;
-@_sap_f_Card_HeaderFocusBorderRightOffset: -1px;
+@_sap_f_Card_HeaderFocusBorderBottomOffset: 0px;
+@_sap_f_Card_HeaderFocusBorderTopOffset: 0px;
+@_sap_f_Card_HeaderFocusBorderLeftOffset: 0px;
+@_sap_f_Card_HeaderFocusBorderRightOffset: 0px;
 @_sap_f_Card_HeaderFocusBorderRadius: inherit;
 @_sap_f_Card_BorderRadius: 1rem;
 @_sap_f_Card_TitleFontSize: @sapMFontHeader6Size;
-@_sap_f_Card_HoverBoxShadow: @sapContent_Shadow1;
+@_sap_f_Card_HoverBoxShadow: @sapContent_Shadow2;
+@_sap_f_Card_Badge_Background: @sapHighlightColor;
 
 .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapFCard,
 .sapFCard {
@@ -19,11 +20,45 @@
 		border-radius: @_sap_f_Card_BorderRadius;
 	}
 
-	&.sapFCardBottomHeader .sapFCardHeader::before {
-		bottom: 1px;
+	.sapFCardHeader {
+		border-bottom: none;
+		padding-bottom: 0.75rem;
+	}
+
+	.sapFCardFooter {
+		padding-top: 0.75rem;
+	}
+
+	.sapFCardFilterBar .sapFCardFilterBarContent {
+		overflow: unset;
 	}
 }
 
-.sapFCard:not(.sapFCardPreview):hover {
+.sapFCard:not(.sapFCardPreview):not(.sapFCardTransparent):hover {
 	box-shadow: @_sap_f_Card_HoverBoxShadow;
+
+	.sapFCardHeader:hover {
+		background: @sapUiTileHoverBackground;
+	}
+}
+
+.sapFCard:not(.sapFCardPreview):not(.sapFCardTransparent):active {
+	box-shadow: @_sap_f_Card_BoxShadow;
+
+	.sapFCardHeader:active {
+		background: @sapUiTileActiveBackground;
+	}
+}
+
+.sapFCard .sapFCardHeader .sapFCardStatus {
+	font-size: @sapMFontSmallSize;
+	margin-top: 0.125rem;
+}
+
+.sapFCard .sapMLIBFocusable:focus {
+	outline-offset: -0.125rem;
+}
+
+.sapFCard .sapMNC {
+	margin-top: 0.5rem;
 }

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

@@ -107,12 +107,12 @@
 	}
 
 	&:before {
-		background-image: linear-gradient(to left, @sapUiHighlight, fade(@sapUiHighlight, 0));
+		background-image: linear-gradient(to left, @sapUiObjectHeaderBorderColor, transparent);
 		right: 100%;
 	}
 
 	&:after {
-		background-image: linear-gradient(to right, @sapUiHighlight, fade(@sapUiHighlight, 0));
+		background-image: linear-gradient(to right, @sapUiObjectHeaderBorderColor, transparent);
 		left: 100%;
 	}
 }
@@ -145,13 +145,21 @@ html[data-sap-ui-browser^="cr"] .sapFDynamicPageHeaderPinButton {
 // The footer selector can`t be nested in the sapFDynamicPage less structure,
 // because the contrast container would not work, as the theme generates css like ".sapContrast.sapFDynamicPageFooter"
 // and will never match ".sapFDynamicPage .sapFDynamicPageFooter"
-.sapFDynamicPageFooter .sapFDynamicPageActualFooterControl {
+.sapFDynamicPageFooter .sapFDynamicPageActualFooterControl.sapMIBar {
 	background: @sapUiPageFooterBackground;
 	color: @sapUiPageFooterTextColor;
-	box-shadow: @sapUiShadowLevel1;
+	box-shadow: @sapUiContentShadow1;
+	border-radius: @sapUiElementBorderCornerRadius;
 	border: none;
 }
 
+.sapFDynamicPage-Std-Tablet,
+.sapFDynamicPage-Std-Phone {
+	.sapFDynamicPageFooter .sapFDynamicPageActualFooterControl.sapMIBar {
+		height: 2.75rem;
+	}
+}
+
 .title-hover(@backgroundColor) {
 	background-color: darken(@backgroundColor, 4);
 }
@@ -172,14 +180,6 @@ To be used in Comparison pattern scenario. */
     background-color: @sapObjectHeader_Background;
 }
 
-.sapFDynamicPageToggleHeaderIndicator:after, .sapFDynamicPageHeaderPinButton:after {
-    background-image: none;
-}
-
-.sapFDynamicPageToggleHeaderIndicator:before, .sapFDynamicPageHeaderPinButton:before {
-    background-image: none;
-}
-
 .sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive)>.sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnDefault .sapUiIcon, .sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive)>.sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnBack .sapUiIcon, .sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive)>.sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnGhost .sapUiIcon {
     border-radius: @sapButton_BorderCornerRadius;
 }

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

@@ -3,10 +3,7 @@
 /* Horizon theme                            */
 /* ======================================== */
 
-.sapFDynamicPage-Std-Desktop .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
-	padding: 1rem 2rem;
-}
-
+.sapFDynamicPageHeader.sapFDynamicPageHeaderSolid,
 .sapFDynamicPageHeader.sapFDynamicPageHeaderTranslucent {
 	background: @sapUiObjectHeaderBackground;
 }
@@ -21,30 +18,4 @@
 
 .sapFDynamicPageNavigation .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
 	box-shadow: none;
-}
-
-
-// =====================================
-// =====================================
-// Delta Styles for Horizon
-// =====================================
-
-.sapUiMedia-StdExt-LargeDesktop .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
-    padding: 0 3rem 1rem;
-}
-
-.sapFDynamicPage-Std-Desktop .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
-    padding: 0 2rem 1rem;
-}
-
-.sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
-    padding: 0 2rem 1rem 2rem;
-}
-
-.sapFDynamicPage-Std-Tablet .sapFDynamicPageHeaderWithContent {
-    padding: 0 2rem 1rem 2rem;
-}
-
-.sapFDynamicPage-Std-Phone .sapFDynamicPageHeaderWithContent {
-    padding: 0 1rem 1rem 1rem;
 }

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

@@ -87,15 +87,15 @@
 
 .sapFDynamicPageTitleMain>.sapFDynamicPageTitleMainInner .sapFDynamicPageTitleMainHeading .sapFDynamicPageTitleMainHeadingInner .sapMTitle {
     font-size: @sapFontHeader2Size;
-    font-family: @sapFontBlackFamily;
+    font-family: @sapUiObjectHeaderTitleFontFamily;
 }
 
 
 // Expanded Header title is small on small screens
 
 .sapFDynamicPage-Std-Phone .sapFDynamicPageTitleMain>.sapFDynamicPageTitleMainInner .sapFDynamicPageTitleMainHeading .sapFDynamicPageTitleMainHeadingInner .sapMTitle {
-    font-size: 1.5rem;
-    font-family: @sapFontBlackFamily;
+    font-size: @sapUiObjectHeaderTitleSnappedFontSize;
+    font-family: @sapUiObjectHeaderTitleFontFamily;
 }
 
 
@@ -103,13 +103,13 @@
 
 .sapFDynamicPageTitleSnapped .sapFDynamicPageTitleMain>.sapFDynamicPageTitleMainInner .sapFDynamicPageTitleMainHeading .sapFDynamicPageTitleMainHeadingInner .sapMTitle {
     font-size: @sapFontHeader3Size;
-    font-family: @sapFontBlackFamily;
+    font-family: @sapUiObjectHeaderTitleFontFamily;
 }
 
 // Overview Page using Dynamic page Header
 .ovpApplication .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped>.sapFDynamicPageTitle,
 .ovpApplication .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleOnly>.sapFDynamicPageTitle {
-    box-shadow: @sapContent_HeaderShadow;
+    box-shadow: @sapUiContentHeaderShadow;
 }
 
 // Dynamic page Title Focus - Experimental
@@ -139,15 +139,11 @@ html.sap-desktop {
 }
 
 .sapUiSizeCompact {
-	.sapMTB {
+	.sapFDynamicPageTitle .sapMTB {
 		height: 2.75rem;
 	}
 
 	.sapFDynamicPageTitleMain .sapMGenericTag.sapMBarChild {
 		margin-top: 0;
 	}
-
-	.sapFDynamicPageTitleSnapped .sapMGenericTag.sapMBarChild  {
-		margin-bottom: 1rem;
-	}
 }

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

@@ -0,0 +1,9 @@
+/* ============================== */
+/* CSS for control sap.f/GridList */
+/* Horizon theme                  */
+/* ============================== */
+
+@_sap_f_GridList_ItemFocusBorderRadius: 1rem;
+@_sap_f_GridList_ItemFocusedHighlightOffset: 0.5rem;
+@_sap_f_GridList_ItemHighlightBorderRadius: 1rem 2rem;
+@_sap_f_GridList_ItemOverflow: hidden;

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

@@ -3,6 +3,9 @@
 /* Horizon 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_Overflow: hidden;
 @_sap_f_GridListItem_HeaderHeight: 2.75rem;
-@_sap_f_GridListItem_BorderSelected: 0 0 0 0.125rem @sapUiListSelectionBorderColor;
+@_sap_f_GridListItem_FocusedHighlightOffset: 0.5rem;
+@_sap_f_GridListItem_HighlightBorderRadius: 1rem;
+@_sap_f_GridListItem_FocusedHighlightBorderRadius: 1rem 2rem;

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

@@ -15,4 +15,10 @@
 			border-radius: @_sap_f_Card_BorderRadius @_sap_f_Card_BorderRadius 0 0;
 		}
 	}
+}
+
+.sapFCard.sapUiIntCardWithFooter {
+	.sapMListItems li:last-child:focus {
+		border-radius: 0;
+	}
 }