@openui5/themelib_sap_horizon 1.130.1 → 1.131.0

package/THIRDPARTY.txt

@@ -468,7 +468,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.18.0
+Component: SAP Theming Base Content, version: 11.22.0
 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.130.1",
+  "version": "1.131.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/SAP/openui5.git"
   },
   "devDependencies": {
-    "@openui5/sap.f": "1.130.1",
-    "@openui5/sap.m": "1.130.1",
-    "@openui5/sap.tnt": "1.130.1",
-    "@openui5/sap.ui.codeeditor": "1.130.1",
-    "@openui5/sap.ui.commons": "1.130.1",
-    "@openui5/sap.ui.core": "1.130.1",
-    "@openui5/sap.ui.dt": "1.130.1",
-    "@openui5/sap.ui.fl": "1.130.1",
-    "@openui5/sap.ui.mdc": "1.130.1",
-    "@openui5/sap.ui.integration": "1.130.1",
-    "@openui5/sap.ui.layout": "1.130.1",
-    "@openui5/sap.ui.rta": "1.130.1",
-    "@openui5/sap.ui.suite": "1.130.1",
-    "@openui5/sap.ui.table": "1.130.1",
-    "@openui5/sap.ui.unified": "1.130.1",
-    "@openui5/sap.ui.ux3": "1.130.1",
-    "@openui5/sap.uxap": "1.130.1"
+    "@openui5/sap.f": "1.131.0",
+    "@openui5/sap.m": "1.131.0",
+    "@openui5/sap.tnt": "1.131.0",
+    "@openui5/sap.ui.codeeditor": "1.131.0",
+    "@openui5/sap.ui.commons": "1.131.0",
+    "@openui5/sap.ui.core": "1.131.0",
+    "@openui5/sap.ui.dt": "1.131.0",
+    "@openui5/sap.ui.fl": "1.131.0",
+    "@openui5/sap.ui.mdc": "1.131.0",
+    "@openui5/sap.ui.integration": "1.131.0",
+    "@openui5/sap.ui.layout": "1.131.0",
+    "@openui5/sap.ui.rta": "1.131.0",
+    "@openui5/sap.ui.suite": "1.131.0",
+    "@openui5/sap.ui.table": "1.131.0",
+    "@openui5/sap.ui.unified": "1.131.0",
+    "@openui5/sap.ui.ux3": "1.131.0",
+    "@openui5/sap.uxap": "1.131.0"
   }
 }

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

@@ -35,10 +35,6 @@
 }
 
 .sapFCard.sapFCardSectionInteractive:not(.sapFCardPreview):not(.sapFCardTransparent) {
-	&:hover {
-		box-shadow: @_sap_f_Card_HoverBoxShadow;
-	}
-
 	&:active {
 		box-shadow: @_sap_f_Card_BoxShadow;
 	}

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

@@ -117,13 +117,6 @@ html.sap-desktop {
         }
 }
 
-// =====================================
-// Dynamic page Snapped header bottom spacing allows for pin buttons
-// =====================================
-.sapFDynamicPageTitle, .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped>.sapFDynamicPageTitle {
-    padding-bottom: 1rem;
-}
-
 // =====================================
 // GenericTag
 // =====================================

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

@@ -116,13 +116,6 @@ html.sap-desktop {
         }
 }
 
-// =====================================
-// Dynamic page Snapped header bottom spacing allows for pin buttons
-// =====================================
-.sapFDynamicPageTitle, .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped>.sapFDynamicPageTitle {
-    padding-bottom: 1rem;
-}
-
 // =====================================
 // GenericTag
 // =====================================

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

@@ -22,7 +22,6 @@
 @_sap_m_Carousel_PageIndicatorWidthSizeL: @_sap_m_Carousel_PageIndicatorWidthSizeS;
 @_sap_m_Carousel_PageIndicatorWidthSizeXL: @_sap_m_Carousel_PageIndicatorWidthSizeS;
 @_sap_m_Carousel_PageIndicatorContainerPadding: 0.5rem;
-@_sap_m_Carousel_ContentArrowBoxShadow: var(--sapContent_Shadow1);
 @_sap_m_Carousel_BulletInactiveBackground: var(--sapContent_ForegroundBorderColor);
 @_sap_m_Carousel_BulletInactiveBorderColor: var(--sapContent_ForegroundBorderColor);
 @_sap_m_Carousel_BulletActiveBackground: var(--sapContent_Selected_ForegroundColor);

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

@@ -15,15 +15,15 @@
 	top: 0.6875rem;
 	left: 0.6875rem;
 	box-sizing: border-box;
-	border-radius: @sapUiFieldBorderCornerRadius;
-	background-color: @sapUiFieldBackground;
-	border: @sapUiFieldBorderWidth @sapUiFieldBorderColor solid;
+	border-radius: var(--sapField_BorderCornerRadius);
+	background-color: var(--sapField_Background);
+	border: var(--sapField_BorderWidth) var(--sapField_BorderColor) solid;
 	display: flex;
     align-items: center;
     justify-content: center;
-	color: @sapUiContentSelectedForegroundColor;
+	color: var(--sapContent_Selected_ForegroundColor);
 
-	&.sapMCbMarkChecked:before {
+	&.sapMCbMarkChecked::before {
 		font-size: 1rem;
 		color: currentColor;
 	}
@@ -34,34 +34,35 @@
 }
 
 .sapMCbBgDis {
-	opacity: @sapUiContentDisabledOpacity;
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 .sapMCbRo .sapMCbBg {
-	background-color: @sapUiFieldReadOnlyBackground;
-	border: @sapUiElementBorderWidth dashed @sapUiFieldReadOnlyBorderColor;
+	background-color: var(--sapField_ReadOnly_Background);
+	border: var(--sapElement_BorderWidth) dashed var(--sapField_ReadOnly_BorderColor);
 }
 
-.sapMCbRo > .sapMCbBg.sapMCbMarkChecked:before {
-	color: @sapUiFieldTextColor;
+.sapMCbRo > .sapMCbBg.sapMCbMarkChecked::before {
+	color: var(--sapField_TextColor);
 }
 
 .sapMCb:not(.sapMCbErr):not(.sapMCbWarn):not(.sapMCbInfo):not(.sapMCbSucc):hover .sapMCbHoverable {
-	border: @sapUiFieldBorderWidth solid @sapUiFieldHoverBorderColor;
-	color: @sapUiContentSelectedForegroundColor;
-	background-color: @sapUiContentSelectedHoverBackground;
+	border: var(--sapField_BorderWidth) solid var(--sapField_Hover_BorderColor);
+	color: var(--sapContent_Selected_ForegroundColor);
+	background-color: var(--sapContent_Selected_Hover_Background);
 }
 
 .sapMCb:hover .sapMCbHoverable {
-	background-color: @sapUiFieldHoverBackground;
+	background-color: var(--sapField_Hover_Background);
 }
 
-// value state
+/* value state */
 .sapMCbErr {
+
 	.sapMCbBg {
-		background-color: @sapUiFieldInvalidBackground;
-		border: @sapUiFieldInvalidBorderWidth solid  @sapUiFieldInvalidColor;
-		color: @sapUiFieldInvalidColor;
+		background-color: var(--sapField_InvalidBackground);
+		border: var(--sapField_InvalidBorderWidth) solid var(--sapField_InvalidColor);
+		color: var(--sapField_InvalidColor);
 
 		&.sapMCbMarkChecked.sapMCbMarkPartiallyChecked::before {
 			border-width: 0.1875rem;
@@ -70,10 +71,11 @@
 }
 
 .sapMCbWarn {
+
 	.sapMCbBg {
-		background-color: @sapUiFieldWarningBackground;
-		border: @sapUiFieldWarningBorderWidth solid @sapUiFieldWarningColor;
-		color: @sapUiFieldWarningColor;
+		background-color: var(--sapField_WarningBackground);
+		border: var(--sapField_WarningBorderWidth) solid var(--sapField_WarningColor);
+		color: var(--sapField_WarningColor);
 
 		&.sapMCbMarkChecked.sapMCbMarkPartiallyChecked::before {
 			border-width: 0.1875rem;
@@ -82,10 +84,11 @@
 }
 
 .sapMCbInfo {
+
 	.sapMCbBg {
-		background-color: @sapUiFieldInformationBackground;
-		border: @sapUiFieldInformationBorderWidth solid @sapUiFieldInformationColor;
-		color: @sapUiFieldInformationColor;
+		background-color: var(--sapField_InformationBackground);
+		border: var(--sapField_InformationBorderWidth) solid var(--sapField_InformationColor);
+		color: var(--sapField_InformationColor);
 
 		&.sapMCbMarkChecked.sapMCbMarkPartiallyChecked::before {
 			border-width: 0.1875rem;
@@ -94,10 +97,11 @@
 }
 
 .sapMCbSucc {
+
 	.sapMCbBg {
-		background-color: @sapUiFieldSuccessBackground;
-		border: @sapUiFieldSuccessBorderWidth solid @sapUiFieldSuccessColor;
-		color: @sapUiFieldSuccessColor;
+		background-color: var(--sapField_SuccessBackground);
+		border: var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor);
+		color: var(--sapField_SuccessColor);
 	}
 }
 
@@ -108,13 +112,14 @@
 .sapMCbDisplayOnly .sapMCbBg {
 	top: 0.5625rem;
 	left: 0.5625rem;
-	&:not(.sapMCbMarkPartiallyChecked).sapMCbMarkChecked:before {
-		color: @sapTextColor;
+
+	&:not(.sapMCbMarkPartiallyChecked).sapMCbMarkChecked::before {
+		color: var(--sapTextColor);
 		font-size: 1rem;
 	}
 
-	&:not(.sapMCbMarkPartiallyChecked):before {
-		color: @sapTextColor;
+	&:not(.sapMCbMarkPartiallyChecked)::before {
+		color: var(--sapTextColor);
 		font-size: 1rem;
 	}
 
@@ -131,26 +136,26 @@
 	}
 }
 
-// FOCUS
+/* FOCUS */
 .sapMCb {
 	outline: none;
 }
 
-.sapMCb:focus:before {
-	content: "";
-	border: @sapUiContentFocusColor @sapUiContentFocusStyle @sapUiContentFocusWidth;
+.sapMCb:focus::before {
+	content: '';
+	border: var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);
 	inset: 0.3125rem;
 	position: absolute;
-	border-radius: @sapUiFieldBorderCornerRadius;
+	border-radius: var(--sapField_BorderCornerRadius);
 }
 
 .sapMCb.sapMCbHasLabel {
 	padding-right: 0.3125rem;
 }
 
-.sapMCb.sapMCbHasLabel:focus:before {
-	content: "";
-	border: @sapUiContentFocusColor @sapUiContentFocusStyle @sapUiContentFocusWidth;
+.sapMCb.sapMCbHasLabel:focus::before {
+	content: '';
+	border: var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);
 	top: 0.3125rem;
 	left: 0.3125rem;
 	bottom: 0.3125rem;
@@ -161,21 +166,23 @@
 
 /* In Form Checkbox needs to be left aligned to bi in line with other controls (as Form itself has a padding) */
 .sapUiForm {
+
 	.sapMCbBg {
 		left: 0;
 	}
 
 	.sapMCb {
-		padding-left: 2.0625rem; // to have right gap between checkbox and label
+		padding-left: 2.0625rem; /* to have right gap between checkbox and label */
 	}
 
-	.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus:before,
-	.sapMCb:not(.sapMCbBgDis):not(.sapMCbHasLabel):focus:before {
+	.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus::before,
+	.sapMCb:not(.sapMCbBgDis):not(.sapMCbHasLabel):focus::before {
 		left: -0.25rem; /* more is not possible as this would cut off the focus border */
 	}
 }
 
 .sapUiSizeCompact {
+
 	.sapMCb {
 		height: 2rem;
 		padding-left: 2rem;
@@ -187,9 +194,9 @@
 		width: 1rem;
 		top: 0.5rem;
 		left: 0.5rem;
-		border-radius: @sapUiFieldBorderCornerRadius;
+		border-radius: var(--sapField_BorderCornerRadius);
 
-		&.sapMCbMarkChecked:before {
+		&.sapMCbMarkChecked::before {
 			font-size: 0.75rem;
 		}
 
@@ -215,15 +222,16 @@
 
 	/* In Form Checkbox needs to be left aligned to bi in line with other controls (as Form itself has a padding) */
 	.sapUiForm {
+
 		.sapMCbBg {
 			left: 0;
 		}
 
 		.sapMCb {
-			padding-left: 1.5rem; // to have right gap between checkbox and label
+			padding-left: 1.5rem; /* to have right gap between checkbox and label */
 		}
 
-		.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus:before {
+		.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus::before {
 			left: -0.1875rem;
 		}
 	}

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

@@ -4,5 +4,5 @@
 /* ========================= */
 
 .sapMCustomTile:focus {
-	outline: 1px dotted @sapUiContentFocusColor;
+	outline: 1px dotted var(--sapContent_FocusColor);
 }

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

@@ -6,9 +6,9 @@
 @_sap_m_FeedInput_BackgroundColor: darken(@sapUiBaseColor, 9);
 
 .sapMFeedIn {
-	background-color: @sapGroup_ContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 .sapMFeedIn .sapMFeedInContainer {
-	background-color: @sapUiFieldBackground;
+	background-color: var(--sapField_Background);
 }

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

@@ -3,73 +3,73 @@
 /* Horizon theme                     */
 /* ================================= */
 
-@sapMGenericTagBorderWidth: 0.375rem;
-@sapMGenericTagIconPaddingRight: 0.375rem;
-@sapMGenericTagHeightCozy: @sapMGenericTagHeightCompact;
+@_sap_m_Generic_TagBorderWidth: 0.375rem;
+@_sap_m_GenericTag_IconPaddingRight: 0.375rem;
+@_sap_m_GenericTag_HeightCozy: @_sap_m_GenericTag_HeightCompact;
 
 .sapMGenericTagWrap {
-	box-shadow: @sapUiContentShadow0;
-	border-radius: @sapUiButtonBorderCornerRadius;
-	background: ~"0 0 / @{sapMGenericTagBorderWidth} 100% no-repeat linear-gradient(0deg, @{sapUiNeutralElement}, @{sapUiNeutralElement})";
-	background-color: @sapUiNeutralBG;
+	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-color: var(--sapNeutralBackground);
 	border: none;
 	padding: 0 0.375rem 0 0.75rem;
 
 	.sapMGenericTagWarning & {
-		background: ~"0 0 / @{sapMGenericTagBorderWidth} 100% no-repeat linear-gradient(0deg, @{sapUiCriticalElement}, @{sapUiCriticalElement})";
-		background-color: @sapUiWarningBG;
+		background: ~"0 0 / @{_sap_m_Generic_TagBorderWidth} 100% no-repeat linear-gradient(0deg, var(--sapCriticalElementColor), var(--sapCriticalElementColor))";
+		background-color: var(--sapWarningBackground);
 
 		.sapMGenericTagIcon {
-			color: @sapUiCriticalElement;
+			color: var(--sapCriticalElementColor);
 		}
 
 		.sapMGenericTagValue {
-			color: @sapUiCriticalText;
+			color: var(--sapCriticalTextColor);
 		}
 	}
 
 	.sapMGenericTagError & {
-		background: ~"0 0 / @{sapMGenericTagBorderWidth} 100% no-repeat linear-gradient(0deg, @{sapUiNegativeElement}, @{sapUiNegativeElement})";
-		background-color: @sapUiErrorBG;
+		background: ~"0 0 / @{_sap_m_Generic_TagBorderWidth} 100% no-repeat linear-gradient(0deg, var(--sapNegativeElementColor), var(--sapNegativeElementColor))";
+		background-color: var(--sapErrorBackground);
 
 		.sapMGenericTagIcon {
-			color: @sapUiNegativeElement;
+			color: var(--sapNegativeElementColor);
 		}
 
 		.sapMGenericTagValue {
-			color: @sapNegativeTextColor;
+			color: var(--sapNegativeTextColor);
 		}
 	}
 
 	.sapMGenericTagSuccess & {
-		background: ~"0 0 / @{sapMGenericTagBorderWidth} 100% no-repeat linear-gradient(0deg, @{sapUiPositiveElement}, @{sapUiPositiveElement})";
-		background-color: @sapUiSuccessBG;
+		background: ~"0 0 / @{_sap_m_Generic_TagBorderWidth} 100% no-repeat linear-gradient(0deg, var(--sapPositiveElementColor), var(--sapPositiveElementColor))";
+		background-color: var(--sapSuccessBackground);
 
 		.sapMGenericTagIcon {
-			color: @sapUiPositiveElement;
+			color: var(--sapPositiveElementColor);
 		}
 
 		.sapMGenericTagValue {
-			color: @sapUiPositiveText;
+			color: var(--sapPositiveTextColor);
 		}
 	}
 
 	.sapMGenericTagInformation & {
-		background: ~"0 0 / @{sapMGenericTagBorderWidth} 100% no-repeat linear-gradient(0deg, @{sapUiInformativeElement}, @{sapUiInformativeElement})";
-		background-color: @sapUiInformationBG;
+		background: ~"0 0 / @{_sap_m_Generic_TagBorderWidth} 100% no-repeat linear-gradient(0deg, var(--sapInformativeElementColor), var(--sapInformativeElementColor))";
+		background-color: var(--sapInformationBackground);
 
 		.sapMGenericTagIcon {
-			color: @sapUiInformativeElement;
+			color: var(--sapInformativeElementColor);
 		}
 
 		.sapMGenericTagValue {
-			color: @sapUiInformativeText;
+			color: var(--sapInformativeTextColor);
 		}
 	}
 
 	&:hover {
-		background-color: @sapUiListHoverBackground;
-		box-shadow: @sapUiContentShadow0;
+		background-color: var(--sapList_Hover_Background);
+		box-shadow: var(--sapContent_Shadow0);
 
 		.sapMGenericTagText,
 		.sapMGenericTagValue,
@@ -82,20 +82,20 @@
 	}
 
 	.sapMGenericTagText {
-		color: @sapUiListTextColor;
-		text-shadow: @sapUiContentTextShadow;
+		color: var(--sapList_TextColor);
+		text-shadow: var(--sapContent_TextShadow);
 	}
 
 	.sapMGenericTagValue {
-		text-shadow: @sapUiContentTextShadow;
+		text-shadow: var(--sapContent_TextShadow);
 	}
 
 	.sapMGenericTagErrorIcon {
-		color: @sapUiNegativeElement;
+		color: var(--sapNegativeElementColor);
 	}
 
-	.sapMGenericTagActive &  {
-		background-color: @sapUiListActiveBackground;
+	.sapMGenericTagActive & {
+		background-color: var(--sapList_Active_Background);
 
 		.sapMGenericTagText,
 		.sapMGenericTagValue,
@@ -103,7 +103,7 @@
 		.sapMObjectNumberText,
 		.sapMObjectNumberUnit,
 		.sapMGenericTagErrorIcon {
-			color: @sapUiListActiveTextColor;
+			color: var(--sapList_Active_TextColor);
 			text-shadow: none;
 		}
 	}
@@ -111,18 +111,18 @@
 
 html.sap-desktop .sapMGenericTag:focus {
 	position: relative;
-	&:after {
+
+	&::after {
 		position: absolute;
-		content: " ";
+		content: ' ';
 		inset: 0;
-		border: @sapUiContentFocusColor @sapUiContentFocusStyle @sapUiContentFocusWidth;
-		border-radius: @sapUiButtonBorderCornerRadius;
+		border: var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);
+		border-radius: var(--sapButton_BorderCornerRadius);
 	}
 
 	.sapMGenericTagWrap {
 		box-shadow: none;
 	}
-
 }
 
 .sapUiSizeCozy .sapMGenericTag {