@openui5/themelib_sap_horizon 1.136.3 → 1.139.0

package/package.json

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

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

@@ -8,17 +8,11 @@
 @_sap_f_Card_FocusBorderLeftOffset: 0;
 @_sap_f_Card_FocusBorderRightOffset: 0;
 @_sap_f_Card_FocusBorderRadius: inherit;
-@_sap_f_Card_BorderRadius: 1rem;
 @_sap_f_Card_HoverBoxShadow: var(--sapContent_Shadow2);
 @_sap_f_Card_Badge_Background: var(--sapHighlightColor);
 
 .sapFCard {
 
-	&.sapFCardNoContent .sapFCardHeader::before,
-	&.sapFCardNoHeader::before {
-		border-radius: @_sap_f_Card_BorderRadius;
-	}
-
 	.sapFCardHeader {
 		border-bottom: none;
 	}

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

@@ -1,6 +1,6 @@
 /* ================================== */
 /* CSS for control sap.f/DynamicPage  */
-/* Horizon theme                      */
+/* Morning Horizon theme              */
 /* ================================== */
 
 .sapFDynamicPageContent,
@@ -9,6 +9,7 @@
 }
 
 .sapFDynamicPage-Std-Desktop-XL {
+
 	.sapFDynamicPageContent,
 	.sapFDynamicPageContentFitContainer {
 		padding: 1rem 3rem 0 3rem;
@@ -16,7 +17,9 @@
 }
 
 .sapFDynamicPage.sapUiResponsiveContentPadding {
+
 	&.sapFDynamicPage-Std-Phone {
+
 		.sapFDynamicPageContent,
 		.sapFDynamicPageContentFitContainer {
 			padding-left: 1rem;
@@ -25,6 +28,7 @@
 	}
 
 	&.sapFDynamicPage-Std-Tablet {
+
 		.sapFDynamicPageContent,
 		.sapFDynamicPageContentFitContainer {
 			padding-left: 2rem;
@@ -33,6 +37,7 @@
 	}
 
 	&.sapFDynamicPage-Std-Desktop-XL {
+
 		.sapFDynamicPageContent,
 		.sapFDynamicPageContentFitContainer {
 			padding-left: 3rem;
@@ -42,12 +47,14 @@
 }
 
 .sapFDynamicPage {
-	.sapFDynamicPageContentWrapperSolid>.sapFDynamicPageContent {
-		background: @sapUiShellBackground;
+
+	.sapFDynamicPageContentWrapperSolid > .sapFDynamicPageContent {
+		background: var(--sapShell_Background);
 	}
 
-	// DynamicPageTitle and Toggle Header Visual Indicator hover state
+	/* DynamicPageTitle and Toggle Header Visual Indicator hover state */
 	&.sapFDynamicPageTitleClickEnabled {
+
 		&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitle {
 			.title-hover(@sapUiObjectHeaderBackground);
 		}
@@ -59,7 +66,6 @@
 		&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitleTransparent {
 			.title-hover(transparent);
 		}
-
 	}
 }
 
@@ -80,9 +86,9 @@
 .sapFDynamicPageHeaderPinButton {
 	width: 1.5rem;
 	height: 2rem;
-	bottom: -0.95rem; // needs refactoring in the base file
+	bottom: -0.95rem; /* needs refactoring in the base file */
 
-	// Reflection: styles overwritten
+	/* Reflection: styles overwritten */
 	.sapMBtnInner {
 		min-width: 1.5rem;
 		width: 1.5rem;
@@ -96,67 +102,67 @@
 		}
 	}
 
-	overflow: visible; // enforcement needed for IE11
-
-	&:before,
-	&:after {
-		content: "";
+	&::before,
+	&::after {
+		content: '';
 		position: absolute;
 		width: 4rem;
-		top: 50%; // enforcement needed for IE11
 		height: 0.0625rem;
 	}
 
-	&:before {
-		background-image: linear-gradient(to left, @sapUiObjectHeaderBorderColor, transparent);
+	&::before {
+		background-image: linear-gradient(to left, var(--sapObjectHeader_BorderColor), transparent);
 		right: 100%;
 	}
 
-	&:after {
-		background-image: linear-gradient(to right, @sapUiObjectHeaderBorderColor, transparent);
+	&::after {
+		background-image: linear-gradient(to right, var(--sapObjectHeader_BorderColor), transparent);
 		left: 100%;
 	}
 }
 
-// when we have both pin and toggle header indicator, pseudo-elements overlap siblings on EDGE
-html[data-sap-ui-browser^="ed"] .sapFDynamicPageToggleHeaderIndicator ~ .sapFDynamicPageHeaderPinButton:before {
-  	display: none;
+/* when we have both pin and toggle header indicator, pseudo-elements overlap siblings on EDGE */
+html[data-sap-ui-browser^='ed'] .sapFDynamicPageToggleHeaderIndicator ~ .sapFDynamicPageHeaderPinButton::before {
+	display: none;
 }
 
-html[data-sap-ui-browser^="cr"] .sapFDynamicPageToggleHeaderIndicator,
-html[data-sap-ui-browser^="cr"] .sapFDynamicPageHeaderPinButton {
+html[data-sap-ui-browser^='cr'] .sapFDynamicPageToggleHeaderIndicator,
+html[data-sap-ui-browser^='cr'] .sapFDynamicPageHeaderPinButton {
+
 	.sapMBtnInner .sapMBtnIcon {
-		line-height: 1.375rem; // in Chrome we need to subtract the border bottom and top (total 2px) from original line-height
+		line-height: 1.375rem; /* in Chrome we need to subtract the border bottom and top (total 2px) from original line-height */
 	}
 }
 
 /* Compact */
 .sapUiSizeCompact {
+
 	.sapFDynamicPageToggleHeaderIndicator,
 	.sapFDynamicPageHeaderPinButton {
-		bottom: -0.95rem; // needs refactoring in the base file
+		bottom: -0.95rem; /* needs refactoring in the base file */
 
-		// Reflection: styles overwritten
+		/* Reflection: styles overwritten */
 		.sapMBtnInner {
 			bottom: 0.25rem;
 		}
 	}
 }
 
-// Note:
-// 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"
+/* Note:
+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.sapMIBar {
-	background: @sapUiPageFooterBackground;
-	color: @sapUiPageFooterTextColor;
-	box-shadow: @sapUiContentShadow1;
-	border-radius: @sapUiElementBorderCornerRadius;
+	background: var(--sapPageFooter_Background);
+	color: var(--sapPageFooter_TextColor);
+	box-shadow: var(--sapContent_Shadow1);
+	border-radius: var(--sapElement_BorderCornerRadius);
 	border: none;
 }
 
 .sapFDynamicPage-Std-Tablet,
 .sapFDynamicPage-Std-Phone {
+
 	.sapFDynamicPageFooter .sapFDynamicPageActualFooterControl.sapMIBar {
 		height: 2.75rem;
 	}
@@ -172,16 +178,19 @@ To be used in Comparison pattern scenario. */
 	margin-right: 0;
 }
 
-// =====================================
-// Dynamic page Header collapse Buttons
-// =====================================
+/* ===================================== */
+/* Dynamic page Header collapse Buttons  */
+/* ===================================== */
 
-.sapFDynamicPageToggleHeaderIndicator.sapMBtn .sapMBtnInner, .sapFDynamicPageHeaderPinButton.sapMBtn .sapMBtnInner {
-    border-radius: @sapButton_BorderCornerRadius;
-    box-shadow: @sapContent_Shadow0;
-    background-color: @sapObjectHeader_Background;
+.sapFDynamicPageToggleHeaderIndicator.sapMBtn .sapMBtnInner,
+.sapFDynamicPageHeaderPinButton.sapMBtn .sapMBtnInner {
+	border-radius: var(--sapButton_BorderCornerRadius);
+	box-shadow: var(--sapContent_Shadow0);
+	background-color: var(--sapObjectHeader_Background);
 }
 
-.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;
-}
+.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: var(--sapButton_BorderCornerRadius);
+}

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

@@ -1,21 +1,21 @@
 /* ======================================== */
 /* CSS for control sap.f/DynamicPageHeader  */
-/* Horizon theme                            */
+/* Morning Horizon theme                    */
 /* ======================================== */
 
-// Specific icon for the pin button for the horizon theme
+/* Specific icon for the pin button for the horizon theme */
 @_sap_f_DynamicPageHeader_PinButton_Icon: pushpin-on;
 
 .sapFDynamicPageHeader.sapFDynamicPageHeaderSolid,
 .sapFDynamicPageHeader.sapFDynamicPageHeaderTranslucent {
-	background: @sapUiObjectHeaderBackground;
+	background: var(--sapObjectHeader_Background);
 }
 
 .sapFDynamicPageHeader.sapFDynamicPageHeaderTransparent {
 	background: transparent;
 }
 
-.sapFDynamicPageToggleHeaderIndicator:not(.sapUiHidden) + .sapFDynamicPageHeaderPinButton:before {
+.sapFDynamicPageToggleHeaderIndicator:not(.sapUiHidden) + .sapFDynamicPageHeaderPinButton::before {
 	display: none;
 }