@openui5/themelib_sap_fiori_3 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_fiori_3",
-  "version": "1.152.0",
+  "version": "1.153.0",
   "description": "OpenUI5 Theme Library sap_fiori_3",
   "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_fiori_3_hcb/GridContainer.less

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

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

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

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

@@ -4,7 +4,7 @@
  */
 /* =================================== */
 /* CSS for control sap.m/ActionSelect  */
-/* Fiori 3 theme                       */
+/* Quartz Light theme                  */
 /* =================================== */
 
 /* ----------------------------- */
@@ -13,17 +13,17 @@
 
 .sapMActionSelectPicker .sapMBtn {
 
-	 .sapMBtnInner {
+	.sapMBtnInner {
 		border-top: 1px solid var(--sapList_BorderColor);
 		border-bottom: 0;
 		border-left: 0;
 		border-right: 0;
 		height: 2.5rem;
-	 }
+	}
 
-	 .sapMBtnContent {
+	.sapMBtnContent {
 		line-height: 2.4375rem;
-	 }
+	}
 }
 
 .sapMActionSelectPicker .sapMBtn .sapMBtnInner {

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

@@ -1,6 +1,6 @@
 /* ================================== */
 /* CSS for control sap.m/ActionSheet  */
-/* Fiori 3  theme                     */
+/* Quartz Light theme                 */
 /* ================================== */
 
 .sapMActionSheetDialog .sapMBar.sapMHeader-CTX > .sapMBarMiddle > .sapMBarPH > .sapMDialogTitle {

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

@@ -1,9 +1,11 @@
 /* ============================= */
 /* CSS for control sap.m/Button  */
-/* Fiori 3 theme                 */
+/* Quartz Light theme            */
 /* ============================= */
 
-@_sap_m_Button_EmphasizedFocusColor: var(--sapContent_FocusColor);
+.sapMBtn {
+	--_sap_m_Button_EmphasizedFocusColor: var(--sapContent_FocusColor);
+}
 
 .sapMBtn {
 	height: 2.75rem;
@@ -31,7 +33,7 @@ span.sapMBtnInner.sapMBtnEmphasized {
 /* Inner area            */
 /* --------------------- */
 .sapMBtnInner {
-	font-size: @sapMFontMediumSize;
+	font-size: var(--sapFontSize);
 	height: var(--sapElement_Height);
 	min-width: 2.25rem;
 	margin: 0;
@@ -143,9 +145,9 @@ span.sapMBtnInner.sapMBtnEmphasized {
 	}
 }
 
-/* ---------------------------------------------------------------------*/
-/* Custom focus outline:                                                */
-/* ---------------------------------------------------------------------*/
+/* --------------------------------------------------------------------- */
+/* Custom focus outline:                                                 */
+/* --------------------------------------------------------------------- */
 
 html.sap-desktop .sapMBtn:focus > .sapMFocusable {
 	outline: 0.0625rem dotted var(--sapContent_FocusColor);
@@ -168,7 +170,7 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable {
 }
 
 html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable :not(.sapMBadgeIndicator) ::after {
-	content: "";
+	content: '';
 	position: absolute;
 	box-sizing: border-box;
 	left: 0.0625rem;
@@ -183,9 +185,9 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable :not(.sapMBad
 	border-color: var(--sapButton_Lite_BorderColor);
 }
 
-/* ---------------------------------------------------------------------*/
-/* Disabled, hover and active states:                                   */
-/* ---------------------------------------------------------------------*/
+/* --------------------------------------------------------------------- */
+/* Disabled, hover and active states:                                    */
+/* --------------------------------------------------------------------- */
 
 .sapMBtnDisabled {
 	opacity: var(--sapContent_DisabledOpacity);
@@ -197,7 +199,9 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable :not(.sapMBad
 /* ------------------------------------------------ */
 
 .sapMIBar.sapMTB-Info-CTX {
+
 	.sapMBtn .sapMBtnInner.sapMBtnTransparent {
+
 		& > .sapMBtnContent,
 		& > .sapMBtnIcon {
 			color: var(--sapButton_Active_TextColor);
@@ -206,7 +210,9 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable :not(.sapMBad
 }
 
 .sapMIBar.sapMTB-Info-CTX.sapMTBInactive {
+
 	.sapMBtn .sapMBtnInner.sapMBtnTransparent {
+
 		& > .sapMBtnContent,
 		& > .sapMBtnIcon {
 			color: var(--sapButton_Lite_Hover_TextColor);
@@ -251,7 +257,7 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable :not(.sapMBad
 .sapMHeader-CTX .sapMBtnInner.sapMBtnGhost,
 .sapMFooter-CTX .sapMBtnInner.sapMBtnGhost {
 	background: var(--sapButton_Lite_Background);
-	border-color: fade(@sapUiButtonLiteTextColor, 50);
+	border-color: ~'hsl(from var(--sapButton_Lite_TextColor) h s l / .50)';
 }
 
 .sapMSubHeader-CTX .sapMBtnInner {
@@ -311,18 +317,18 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable :not(.sapMBad
 }
 
 .sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnCritical:not(.sapMBtnActive) {
-	background-color: darken(@sapUiCriticalElement, 7);
-	border-color: darken(@sapUiCriticalElement, 7);
+	background-color: ~'hsl(from var(--sapCriticalElementColor) h s calc(l - 7))';
+	border-color: ~'hsl(from var(--sapCriticalElementColor) h s calc(l - 7))';
 }
 
 .sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnNegative:not(.sapMBtnActive) {
-	background-color: darken(@sapUiNegativeElement, 7);
-	border-color: darken(@sapUiNegativeElement, 7);
+	background-color: ~'hsl(from var(--sapNegativeElementColor) h s calc(l - 7))';
+	border-color: ~'hsl(from var(--sapNegativeElementColor) h s calc(l - 7))';
 }
 
 .sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnSuccess:not(.sapMBtnActive) {
-	background-color: darken(@sapUiPositiveElement, 7);
-	border-color: darken(@sapUiPositiveElement, 7);
+	background-color: ~'hsl(from var(--sapPositiveElementColor) h s calc(l - 7))';
+	border-color: ~'hsl(from var(--sapPositiveElementColor) h s calc(l - 7))';
 }
 
 .sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnNeutral:not(.sapMBtnActive) {
@@ -331,18 +337,18 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable :not(.sapMBad
 }
 
 .sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnCritical.sapMBtnActive {
-	background-color: darken(@sapUiCriticalElement, 10);
-	border-color: darken(@sapUiCriticalElement, 10);
+	background-color: ~'hsl(from var(--sapCriticalElementColor) h s calc(l - 10))';
+	border-color: ~'hsl(from var(--sapCriticalElementColor) h s calc(l - 10))';
 }
 
 .sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnNegative.sapMBtnActive {
-	background-color: darken(@sapUiNegativeElement, 10);
-	border-color: darken(@sapUiNegativeElement, 10);
+	background-color: ~'hsl(from var(--sapNegativeElementColor) h s calc(l - 10))';
+	border-color: ~'hsl(from var(--sapNegativeElementColor) h s calc(l - 10))';
 }
 
 .sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnSuccess.sapMBtnActive {
-	background-color: darken(@sapUiPositiveElement, 10);
-	border-color: darken(@sapUiPositiveElement, 10);
+	background-color: ~'hsl(from var(--sapPositiveElementColor) h s calc(l - 10))';
+	border-color: ~'hsl(from var(--sapPositiveElementColor) h s calc(l - 10))';
 }
 
 .sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable.sapMBtnNeutral.sapMBtnActive {

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

@@ -1,6 +1,6 @@
 /* =============================== */
 /* CSS for control sap.m/CheckBox  */
-/* Fiori 3 theme                   */
+/* Quartz Light theme              */
 /* =============================== */
 
 .sapMCb {
@@ -94,9 +94,7 @@ html.sap-desktop {
 	}
 
 	.sapMCb:not(.sapMCbBgDis):not(.sapMCbHasLabel):focus > .sapMCbBg {
-		outline-width: 1px;
-		outline-style: dotted;
-		outline-color: var(--sapContent_FocusColor);
+		outline: var(--sapContent_FocusColor) dotted 1px;
 		outline-offset: 0.0625rem;
 	}
 
@@ -165,7 +163,7 @@ html.sap-desktop {
 }
 
 .sapMCbBg.sapMCbBgDis.sapMCbMarkChecked::before {
-	color: fade(@sapUiSelected, 25);
+	color: ~'hsl(from var(--sapSelectedColor) h s l / .25)';
 }
 
 /* Compact size */
@@ -226,8 +224,9 @@ html.sap-desktop {
 
 	.sapUiSizeCondensed.sapUiTable,
 	.sapUiSizeCondensed .sapUiTable {
+
 		.sapMCb:not(.sapMCbErr):not(.sapMCbInfo):not(.sapMCbWarn) > .sapMCbBg {
 			line-height: 0.625rem;
 		}
 	}
-}
+}

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

@@ -1,28 +1,30 @@
 /* ==================================== */
 /* CSS for control sap.m/ColumnListItem */
-/* Fiori 3 theme                        */
+/* Quartz Light 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_fiori_3/CustomTile.less

@@ -4,7 +4,7 @@
  */
 /* ========================= */
 /* CSS for sap.m/CustomTile  */
-/* Fiori 3 theme             */
+/* Quartz Light theme        */
 /* ========================= */
 
 html.sap-desktop .sapMCustomTile:focus,

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

@@ -1,10 +1,8 @@
 /* ================================ */
 /* CSS for control sap.m/FeedInput  */
-/* Fiori 3 theme                    */
+/* Quartz Light theme               */
 /* ================================ */
 
-@_sap_m_FeedInput_BackgroundColor: darken(@sapUiBaseColor, 9);
-
 .sapMFeedIn {
 	background-color: var(--sapGroup_ContentBackground);
 }
@@ -42,7 +40,7 @@
 	border-width: var(--sapButton_BorderWidth);
 	border-radius: var(--sapButton_BorderCornerRadius);
 	background-color: var(--sapGroup_ContentBackground);
-	font-size: @sapFontSize;
+	font-size: var(--sapFontSize);
 	font-family: var(--sapFontSemiboldDuplexFamily);
 }
 

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

@@ -1,18 +1,20 @@
 /* ================================= */
 /* CSS for control sap.m/GenericTag  */
-/* Fiori 3 theme                     */
+/* Quartz Light theme                */
 /* ================================= */
 
-@_sap_m_GenericTag_BorderWidth: 0.375rem;
-@_sap_m_GenericTag_IconPaddingRight: 0.375rem;
-@_sap_m_GenericTag_PaddingLeft: 0.375rem;
+.sapMGenericTag {
+	--_sap_m_GenericTag_BorderWidth: 0.375rem;
+	--_sap_m_GenericTag_IconPaddingRight: 0.375rem;
+	--_sap_m_GenericTag_PaddingLeft: 0.375rem;
+}
 
 .sapMGenericTag {
 
 	.sapMGenericTagWrap {
-		padding: 0 0 0 @_sap_m_GenericTag_PaddingLeft;
+		padding: 0 0 0 var(--_sap_m_GenericTag_PaddingLeft);
 		border-radius: var(--sapButton_BorderCornerRadius);
-		border-left-width: @_sap_m_GenericTag_BorderWidth;
+		border-left-width: var(--_sap_m_GenericTag_BorderWidth);
 
 		.sapMGenericTagText {
 			margin-right: 0.375rem;

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

@@ -1,6 +1,6 @@
 /* ================================== */
 /* CSS for control sap.m/GenericTile  */
-/* Fiori 3 theme                      */
+/* Quartz Light theme                 */
 /* ================================== */
 
 .sapMGT.sapMGTBackgroundImage {
@@ -41,7 +41,7 @@
 .sapMGTLineMode .sapMGTLineModeFailedIcon {
 	cursor: pointer;
 	color: var(--sapContent_NonInteractiveIconColor);
-	text-shadow: @sapUiShadowText;
+	text-shadow: var(--sapContent_TextShadow);
 }
 
 .sapMGTLineMode.sapMGTDisabled > .sapMGTTouchArea > *:not(.sapMGTActionsContainer) {
@@ -62,10 +62,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,
@@ -107,10 +107,10 @@
 	}
 
 	.sapMGT.sapMGTLineMode {
-		font-size: @sapMFontMediumSize;
+		font-size: var(--sapFontSize);
 
 		& * {
-			font-size: @sapMFontMediumSize;
+			font-size: var(--sapFontSize);
 		}
 
 		&.sapMGTDisabled {
@@ -165,14 +165,14 @@
 
 .sapMGTLineMode .sapMGTHdrTxt {
 	color: var(--sapLinkColor);
-	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,
@@ -209,7 +209,6 @@ html.sap-tablet .sapMGTWithImageHoverOverlay {
 
 	&.sapMGTScopeActions .sapMTileCntContent::after {
 		background-color: var(--sapTile_Active_Background);
-		// opacity: 0.7;
 	}
 }
 

package/src/sap/m/themes/sap_fiori_3/GroupHeaderListItem.less

@@ -1,6 +1,6 @@
 /* ========================================= */
 /* CSS for control sap.m/GroupHeaderListItem */
-/* Fiori 3 theme                             */
+/* Quartz Light theme                        */
 /* ========================================= */
 
 .sapMListUl .sapMLIB.sapMGHLI {

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

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