@openui5/themelib_sap_horizon 1.152.0 → 1.153.0

package/THIRDPARTY.txt

@@ -39,7 +39,7 @@ Contained in: src/sap.f/src/sap/f/thirdparty/**
 
 Library: sap.m:
 
-Component: purify.js, version: 3.4.1
+Component: purify.js, version: 3.4.14
 Copyright: Mario Heiderich
 License: Apache-2.0
 License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt

package/package.json

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

package/src/sap/f/themes/sap_horizon_hcb/GridContainer.less

@@ -3,4 +3,6 @@
 /* Horizon High Contrast Black theme    */
 /* ==================================== */
 
-@_sap_f_GridContainer_FocusBorderOffset: -2px;
+.sapUI5Scope {
+	--_sap_f_GridContainer_FocusBorderOffset: -2px;
+}

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

@@ -3,4 +3,6 @@
 /* Horizon High Contrast White theme    */
 /* ==================================== */
 
-@_sap_f_GridContainer_FocusBorderOffset: -2px;
+.sapUI5Scope {
+	--_sap_f_GridContainer_FocusBorderOffset: -2px;
+}

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

@@ -96,4 +96,4 @@ html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled):focus >
 	top: 0.125rem;
 	right: 0.125rem;
 	bottom: 0.125rem;
-}
+}

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

@@ -1,6 +1,6 @@
 /* ================================== */
 /* CSS for control sap.m/ActionSheet  */
-/* Horizon  theme                     */
+/* Morning Horizon theme              */
 /* ================================== */
 
 .sapMActionSheetPopover.sapMPopover {

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

@@ -1,9 +1,11 @@
 /* ============================= */
 /* CSS for control sap.m/Button  */
-/* Horizon theme                 */
+/* Morning Horizon theme         */
 /* ============================= */
 
-@_sap_m_Button_EmphasizedFocusColor: var(--sapContent_FocusColor);
+.sapMBtn {
+	--_sap_m_Button_EmphasizedFocusColor: var(--sapContent_FocusColor);
+}
 
 .sapMBtn {
 	height: 2.75rem;
@@ -21,7 +23,7 @@
 /* Inner area            */
 /* --------------------- */
 .sapMBtnInner {
-	font-size: @sapMFontMediumSize;
+	font-size: var(--sapFontSize);
 	height: var(--sapElement_Height);
 	min-width: 2.25rem;
 	margin: 0;
@@ -133,9 +135,9 @@
 	}
 }
 
-/* ---------------------------------------------------------------------*/
+/* --------------------------------------------------------------------- */
 /* Custom focus border:                                                 */
-/* ---------------------------------------------------------------------*/
+/* --------------------------------------------------------------------- */
 
 .sapMBtn:not(.sapMBtnFocusFromTouch):focus-visible > .sapMFocusable:not(.sapMBadgeIndicator)::before,
 html.sap-desktop .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator)::before {
@@ -171,7 +173,7 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnSuccess.sapMFocusable:not(.sapMBtnActi
 	text-shadow: var(--sapContent_TextShadow);
 }
 
-// Value State Message buttons
+/* Value State Message buttons */
 :not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnCritical.sapMBtnActive {
 	border-color: var(--sapButton_Critical_BorderColor);
 }
@@ -185,19 +187,21 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnSuccess.sapMFocusable:not(.sapMBtnActi
 }
 
 .sapMBtn {
+
 	.sapMBtnCritical,
 	.sapMBtnNegative,
 	.sapMBtnSuccess,
 	.sapMBtnNeutral {
+
 		&.sapMBtnInner.sapMBtnActive {
 			text-shadow: none;
 		}
 	}
 }
 
-/* ---------------------------------------------------------------------*/
-/* Disabled, hover and active states:                                   */
-/* ---------------------------------------------------------------------*/
+/* --------------------------------------------------------------------- */
+/* Disabled, hover and active states:                                    */
+/* --------------------------------------------------------------------- */
 
 .sapMBtnDisabled {
 	opacity: var(--sapContent_DisabledOpacity);
@@ -279,7 +283,7 @@ html.sap-desktop .sapMFooter-CTX .sapMBtnInner.sapMBtnReject {
 	background-color: var(--sapButton_Active_Background);
 }
 
-// text color for enabled buttons
+/* text color for enabled buttons */
 :not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnAccept.sapMBtnActive,
 :not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnAccept.sapMBtnActive .sapMBtnIcon {
 	color: var(--sapButton_Accept_Active_TextColor);
@@ -300,9 +304,9 @@ html.sap-desktop .sapMFooter-CTX .sapMBtnInner.sapMBtnReject {
 	color: var(--sapButton_Lite_TextColor);
 }
 
-/* ----------------------*/
-/* Badges                */
-/* ----------------------*/
+/* ---------------------- */
+/* Badges                 */
+/* ---------------------- */
 
 .sapMBtn .sapMBadge .sapMBadgeIndicator::after {
 	background-color: var(--sapContent_BadgeBackground);

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

@@ -1,6 +1,6 @@
 /* =============================== */
 /* CSS for control sap.m/CheckBox  */
-/* Horizon theme                   */
+/* Morning Horizon theme           */
 /* =============================== */
 
 .sapMCb {
@@ -19,8 +19,8 @@
 	background-color: var(--sapField_Background);
 	border: var(--sapField_BorderWidth) var(--sapField_BorderColor) solid;
 	display: flex;
-    align-items: center;
-    justify-content: center;
+	align-items: center;
+	justify-content: center;
 	color: var(--sapContent_Selected_ForegroundColor);
 
 	&.sapMCbMarkChecked::before {
@@ -250,4 +250,4 @@
 			left: -0.1875rem;
 		}
 	}
-}
+}

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

@@ -1,28 +1,30 @@
 /* ==================================== */
 /* CSS for control sap.m/ColumnListItem */
-/* Horizon theme                        */
+/* Morning Horizon theme                */
 /* ==================================== */
 
-@_sap_m_table_SelectionControlWidth: 2.75rem;
+.sapMListTblRow {
+	--_sap_m_ColumnListItem_SelectionControlWidth: 2.75rem;
+}
 
 /* selection border indicator */
 /* note: adding border-bottom to the td, increased the size of the table, hence not adding border-bottom */
 /* note: adding border-top to the sibling row is not suitable as the sibling row can be hidden and in such case the selection border is lost */
 .sapMTableTBody:not(.sapMListTblHasPopin) > .sapMLIBSelected,
 .sapMTableTBody.sapMListTblHasPopin > .sapMLIBSelected + .sapMListTblSubRow {
-	box-shadow: inset 0px -0.0625rem var(--sapList_SelectionBorderColor);
+	box-shadow: inset 0 -0.0625rem var(--sapList_SelectionBorderColor);
 }
 
 /* selection border indicator was not visible on the last row as the td elements within the last row have a bottom border */
 /* hence applying -0.125rem so that the selection border is visible */
 .sapMTableTBody:not(.sapMListTblHasPopin) > .sapMLIBSelected:last-child,
 .sapMTableTBody.sapMListTblHasPopin > .sapMLIBSelected + .sapMListTblSubRow:last-child {
-	box-shadow: inset 0px -0.125rem var(--sapList_SelectionBorderColor);
+	box-shadow: inset 0 -0.125rem var(--sapList_SelectionBorderColor);
 }
 
 /* Safari work-around as box-shadow is not supported on the <tr> element, */
 /* hence adding the selection indicator box-shadow to the <td> element */
-html[data-sap-ui-browser^="sf"] .sapMTableTBody:not(.sapMListTblHasPopin) > .sapMLIBSelected > td,
-html[data-sap-ui-browser^="sf"] .sapMTableTBody.sapMListTblHasPopin > .sapMLIBSelected + .sapMListTblSubRow > td {
-	box-shadow: inset 0px -0.0625rem var(--sapList_SelectionBorderColor);
+html[data-sap-ui-browser^='sf'] .sapMTableTBody:not(.sapMListTblHasPopin) > .sapMLIBSelected > td,
+html[data-sap-ui-browser^='sf'] .sapMTableTBody.sapMListTblHasPopin > .sapMLIBSelected + .sapMListTblSubRow > td {
+	box-shadow: inset 0 -0.0625rem var(--sapList_SelectionBorderColor);
 }

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

@@ -4,7 +4,7 @@
  */
 /* ========================= */
 /* CSS for sap.m/CustomTile  */
-/* Horizon theme             */
+/* Morning Horizon theme     */
 /* ========================= */
 
 html.sap-desktop .sapMCustomTile:focus,

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

@@ -1,6 +1,6 @@
 /* ======================================= */
 /* CSS for control sap.m/DynamicDateRange  */
-/* Horizon theme                           */
+/* Morning Horizon theme                   */
 /* ======================================= */
 
 .sapUiIcon.sapMDDRDateOption {

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

@@ -1,10 +1,8 @@
 /* ================================ */
 /* CSS for control sap.m/FeedInput  */
-/* Horizon theme                    */
+/* Morning Horizon theme            */
 /* ================================ */
 
-@_sap_m_FeedInput_BackgroundColor: darken(@sapUiBaseColor, 9);
-
 .sapMFeedIn {
 	background-color: var(--sapGroup_ContentBackground);
 }

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

@@ -1,22 +1,24 @@
 /* ================================= */
 /* CSS for control sap.m/GenericTag  */
-/* Horizon theme                     */
+/* Morning Horizon theme             */
 /* ================================= */
 
-@_sap_m_Generic_TagBorderWidth: 0.375rem;
-@_sap_m_GenericTag_IconPaddingRight: 0.375rem;
-@_sap_m_GenericTag_HeightCozy: @_sap_m_GenericTag_HeightCompact;
+.sapMGenericTag {
+	--_sap_m_Generic_TagBorderWidth: 0.375rem;
+	--_sap_m_GenericTag_IconPaddingRight: 0.375rem;
+	--_sap_m_GenericTag_HeightCozy: var(--_sap_m_GenericTag_HeightCompact);
+}
 
 .sapMGenericTagWrap {
 	box-shadow: var(--sapContent_Shadow0);
 	border-radius: var(--sapButton_BorderCornerRadius);
-	background: ~"0 0 / @{_sap_m_Generic_TagBorderWidth} 100% no-repeat linear-gradient(0deg, var(--sapNeutralElementColor), var(--sapNeutralElementColor))";
+	background: ~'0 0 / var(--_sap_m_Generic_TagBorderWidth) 100% no-repeat linear-gradient(0deg, var(--sapNeutralElementColor), var(--sapNeutralElementColor))';
 	background-color: var(--sapNeutralBackground);
 	border: none;
 	padding: 0 0.375rem 0 0.75rem;
 
 	.sapMGenericTagWarning & {
-		background: ~"0 0 / @{_sap_m_Generic_TagBorderWidth} 100% no-repeat linear-gradient(0deg, var(--sapCriticalElementColor), var(--sapCriticalElementColor))";
+		background: ~'0 0 / var(--_sap_m_Generic_TagBorderWidth) 100% no-repeat linear-gradient(0deg, var(--sapCriticalElementColor), var(--sapCriticalElementColor))';
 		background-color: var(--sapWarningBackground);
 
 		.sapMGenericTagIcon {
@@ -29,7 +31,7 @@
 	}
 
 	.sapMGenericTagError & {
-		background: ~"0 0 / @{_sap_m_Generic_TagBorderWidth} 100% no-repeat linear-gradient(0deg, var(--sapNegativeElementColor), var(--sapNegativeElementColor))";
+		background: ~'0 0 / var(--_sap_m_Generic_TagBorderWidth) 100% no-repeat linear-gradient(0deg, var(--sapNegativeElementColor), var(--sapNegativeElementColor))';
 		background-color: var(--sapErrorBackground);
 
 		.sapMGenericTagIcon {
@@ -42,7 +44,7 @@
 	}
 
 	.sapMGenericTagSuccess & {
-		background: ~"0 0 / @{_sap_m_Generic_TagBorderWidth} 100% no-repeat linear-gradient(0deg, var(--sapPositiveElementColor), var(--sapPositiveElementColor))";
+		background: ~'0 0 / var(--_sap_m_Generic_TagBorderWidth) 100% no-repeat linear-gradient(0deg, var(--sapPositiveElementColor), var(--sapPositiveElementColor))';
 		background-color: var(--sapSuccessBackground);
 
 		.sapMGenericTagIcon {
@@ -55,7 +57,7 @@
 	}
 
 	.sapMGenericTagInformation & {
-		background: ~"0 0 / @{_sap_m_Generic_TagBorderWidth} 100% no-repeat linear-gradient(0deg, var(--sapInformativeElementColor), var(--sapInformativeElementColor))";
+		background: ~'0 0 / var(--_sap_m_Generic_TagBorderWidth) 100% no-repeat linear-gradient(0deg, var(--sapInformativeElementColor), var(--sapInformativeElementColor))';
 		background-color: var(--sapInformationBackground);
 
 		.sapMGenericTagIcon {

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

@@ -1,6 +1,6 @@
 /* ================================== */
 /* CSS for control sap.m/GenericTile  */
-/* Horizon theme                      */
+/* Morning Horizon theme              */
 /* ================================== */
 
 .sapMGT.sapMGTBackgroundImage {
@@ -125,7 +125,7 @@
 .sapMGTLineMode .sapMGTLineModeFailedIcon {
 	cursor: pointer;
 	color: var(--sapContent_NonInteractiveIconColor);
-	text-shadow: @sapUiShadowText;
+	text-shadow: var(--sapContent_TextShadow);
 }
 
 .sapMGTLineMode.sapMGTDisabled > .sapMGTTouchArea > *:not(.sapMGTActionsContainer) {
@@ -159,10 +159,10 @@
 }
 
 .sapMGTLineMode .sapMGTLineModeHelpContainer:not(:last-child) {
-	-webkit-mask-image: linear-gradient(to right, #FFF ~"calc(100% - 1.5rem)", transparent);
+	-webkit-mask-image: linear-gradient(to right, #FFF ~'calc(100% - 1.5rem)', transparent);
 
-	html[dir~=rtl] & {
-		-webkit-mask-image: linear-gradient(to left, #FFF ~"calc(100% - 1.5rem)", transparent);
+	html[dir~='rtl'] & {
+		-webkit-mask-image: linear-gradient(to left, #FFF ~'calc(100% - 1.5rem)', transparent);
 	}
 
 	.sapMGTHdrTxt,
@@ -204,10 +204,10 @@
 	}
 
 	.sapMGT.sapMGTLineMode {
-		font-size: @sapMFontMediumSize;
+		font-size: var(--sapFontSize);
 
 		& * {
-			font-size: @sapMFontMediumSize;
+			font-size: var(--sapFontSize);
 		}
 
 		&.sapMGTDisabled {
@@ -263,14 +263,14 @@
 
 .sapMGTLineMode .sapMGTHdrTxt {
 	color: var(--sapTile_TitleTextColor);
-	font-size: @sapMFontMediumSize;
-	text-shadow: @sapUiShadowText;
+	font-size: var(--sapFontSize);
+	text-shadow: var(--sapContent_TextShadow);
 }
 
 .sapMGTLineMode .sapMGTSubHdrTxt {
 	color: var(--sapTile_TextColor);
-	font-size: @sapMFontMediumSize;
-	text-shadow: @sapUiShadowText;
+	font-size: var(--sapFontSize);
+	text-shadow: var(--sapContent_TextShadow);
 }
 
 .sapMGTWithoutImageHoverOverlay,
@@ -317,7 +317,7 @@ html.sap-tablet .sapMGTWithImageHoverOverlay {
 	}
 
 	&.sapMGTScopeActions .sapMTileCntContent::after {
-		background-color: fade(@sapUiTileHoverBackground, 70);
+		background-color: ~'hsl(from var(--sapTile_Hover_Background) h s l / .70)';
 	}
 }
 

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

@@ -1,10 +1,8 @@
 /* ====================================== */
 /* CSS for control sap.m/HeaderContainer  */
-/* Horizon theme                          */
+/* Morning Horizon theme                  */
 /* ====================================== */
 
-@_sap_m_HeaderContainer_TranslucentBackground: fade(@sapUiObjectHeaderBackground, 100);
-
 .sapMHdrCntrBtn > .sapMBtnInner {
 	border: none;
 }
@@ -14,10 +12,10 @@
 }
 
 .sapMHdrCntrBGTranslucent {
-	background-color: @_sap_m_HeaderContainer_TranslucentBackground;
+	background-color: var(--sapObjectHeader_Background);
 }
 
-.sapMHdrCntrBtnIcon{
+.sapMHdrCntrBtnIcon {
 	color: var(--sapContent_NonInteractiveIconColor);
 }