@openui5/themelib_sap_horizon 1.133.2 → 1.135.0

package/src/sap/m/themes/sap_horizon_hcw/TabContainer.less

@@ -3,12 +3,14 @@
 /* Horizon High Contrast White theme   */
 /* =================================== */
 
-.sapMTabStripContainer{
-	border-bottom: 0.0625rem solid @sapUiObjectHeaderBorderColor;
+.sapMTabStripContainer {
+	border-bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
 }
+
 .sapMTabStrip {
 	padding-top: 0.5rem;
 	height: 3.25rem;
+
 	.sapMTSLeftOverflowButtons,
 	.sapMTSTabsContainer,
 	.sapMTSRightOverflowButtons,
@@ -18,7 +20,12 @@
 }
 
 .sapUiSizeCompact {
+
 	.sapMTabStrip {
 		height: 3.25rem;
 	}
+}
+
+.sapMTabContIcon.sapUiIcon{
+	color: var(--sapContent_IconColor);
 }

package/src/sap/m/themes/sap_horizon_hcw/TabStrip.less

@@ -7,70 +7,84 @@
 @_sap_m_TabStrip_ItemSelectedTextColor: darken(@sapUiGroupTitleTextColor, 20);
 
 .sapMTabStripContainer .sapMTabStrip {
-	background: @sapUiShellBackground;
+	background: var(--sapShell_Background);
 	box-shadow: none;
 	height: 3.25rem;
+
 	.sapMTSRightOverflowButtons {
 		right: 5.2rem;
 		text-align: center;
 		margin-right: 0.5rem;
 		padding-left: 0.5rem;
 		width: 2.75rem;
+
 		.sapMBtn.sapMBtnBase {
 			margin-left: 0;
 			padding-left: 0.5rem;
 			padding: 0;
 		}
 	}
+
 	.sapMTSTabsContainer {
 		left: 0;
 		right: 5.8rem;
+
 		.sapMTSTabs {
+
 			.sapMTabStripItem {
 				height: 2.625rem;
 				padding: 0 0 0 0.5rem;
-				border: solid 0.0625rem @sapList_BorderColor;
+				border: solid 0.0625rem var(--sapList_BorderColor);
 				border-radius: 0.125rem 0.125rem 0 0;
 				border-bottom: 0;
 				margin-right: 0.5rem;
 				margin-top: 0.125rem;
+
 				.sapMTabStripItemLabel {
-					font-family: @sapFontFamily;
+					font-family: var(--sapFontFamily);
 				}
+
 				&:last-child {
 					margin-right: 0;
 				}
+
 				&:hover {
-					color: @sapTextColor;
-					background-color: @sapList_Hover_Background;
+					color: var(--sapTextColor);
+					background-color: var(--sapList_Hover_Background);
 				}
+
 				&.sapMTabStripItemSelected {
 					height: 2.75rem;
-					border-color: @sapUiListSelectionBorderColor;
-					background-color: @sapUiListSelectionBackgroundColor;
+					border-color: var(--sapList_SelectionBorderColor);
+					background-color: var(--sapList_SelectionBackgroundColor);
 					padding: 0.125rem 0 0 0.5rem;
 					margin-top: 0
 				}
+
 				.sapMTSItemCloseBtnCnt {
 					width: 2rem;
 					height: 2.75rem;
 					line-height: 2.4rem;
+
 					.sapMBtn {
 						width: 1.5rem;
 						height: 2rem;
 						vertical-align: middle;
 					}
 				}
-				.sapMTabContIcon.sapUiIcon{
-					color: @sapUiContentIconColor;
+
+				.sapMTabContIcon.sapUiIcon {
+					color: var(--sapContent_IconColor);
 				}
 			}
 		}
 	}
+
 	.sapMTSOverflowSelect {
 		width: 2.25rem;
 		height: 2.25rem;
 	}
+
 	.sapMTSLeftOverflowButtons {
 		margin-left: 0;
 		text-align: left;
@@ -79,44 +93,56 @@
 }
 
 .sapMTabStripContainer {
-	background: @sapUiShellBackground;
+	background: var(--sapShell_Background);
 }
+
 .sapMTSOverflowSelectListItem {
 	padding-right: 0;
 }
+
 .sapMSltIcon.sapUiIcon.sapUiIconMirrorInRTL {
 	font-size: 1rem;
 }
 
 .sapUiSizeCompact {
+
 	.sapMTabStrip {
+
 		.sapMTSRightOverflowButtons {
 			right: 4.7rem;
 		}
+
 		.sapMTSTabsContainer .sapMTSTabs {
+
 			.sapMTabStripItem {
 				padding: 0 2rem 0 0.5rem;
+
 				&:hover {
 					padding: 0 2rem 0 0.5rem;
 				}
+
 				&.sapMTabStripItemSelected {
 					padding: 0.125rem 2rem 0 0.5rem;
 				}
+
 				.sapMTSItemCloseBtnCnt {
+
 					.sapMBtn {
 						opacity: 1;
 					}
 				}
 			}
 		}
+
 		.sapMTSTouchArea .sapMSlt {
 			margin-top: 0.46rem;
 			width: 2.0rem;
 			height: 1.625rem;
 		}
 	}
+
 	.sapMTSOverflowSelectListItem .sapMTabStripSelectListItemCloseBtn {
-		visibility: visible; //close button must be always visible
+		visibility: visible; /* close button must be always visible */
 	}
 }
 
@@ -130,12 +156,13 @@
 }
 
 .sapMTabStrip .sapMTSTabsContainer .sapMTSTabs .sapMTabStripItem.sapMTabStripItemSelected {
-	box-shadow: inset 0 0.1875rem 0 @sapUiListTextColor;
+	box-shadow: inset 0 0.1875rem 0 var(--sapList_TextColor);
 	border-bottom: 0;
 	border-radius: 0.125rem 0.125rem 0 0;
 }
 
 html.sap-phone {
+
 	.sapMTabStrip .sapMTSTouchArea .sapMSlt {
 		width: 100%;
 	}
@@ -151,7 +178,7 @@ html[dir=rtl] .sapMTabStrip .sapMTSLeftOverflowButtons {
 
 html[dir=ltr] .sapMTabStrip .sapMTSLeftOverflowButtons,
 html[dir=rtl] .sapMTabStrip .sapMTSRightOverflowButtons {
-	background: @sapUiShellBackground;
+	background: var(--sapShell_Background);
 }
 
 html[dir=ltr] .sapMTabStrip .sapMTSLeftOverflowButtons::after,
@@ -161,7 +188,7 @@ html[dir=rtl] .sapMTabStrip .sapMTSRightOverflowButtons::after {
 
 html[dir=ltr] .sapMTabStrip .sapMTSRightOverflowButtons,
 html[dir=rtl] .sapMTabStrip .sapMTSLeftOverflowButtons {
-	background: @sapUiShellBackground;
+	background: var(--sapShell_Background);
 }
 
 html[dir=ltr] .sapMTabStrip .sapMTSRightOverflowButtons::after,
@@ -169,15 +196,15 @@ html[dir=rtl] .sapMTabStrip .sapMTSLeftOverflowButtons::after {
 	background: transparent;
 }
 
-//no animation for fiori 3 for acc reasons
+/* no animation for fiori 3 for acc reasons */
 html[data-sap-ui-animation='on'] .sapMTabStrip .sapMTSTabsContainer .sapMTSTabs {
+
 	.sapMTabStripItem,
 	.sapMTabStripItem .sapMTSItemCloseBtnCnt .sapMBtn {
-		-webkit-transition: none;
 		transition: none;
 	}
 }
 
 .sapMSltIconOnly.sapMSltHoverable:hover:not(.sapMSltState) {
-	border: 0.0625rem solid @sapUiButtonEmphasizedHoverBorderColor;
+	border: 0.0625rem solid var(--sapButton_Emphasized_Hover_BorderColor);
 }

package/src/sap/m/themes/sap_horizon_hcw/Table.less

@@ -7,12 +7,12 @@
 
 .sapMListTblHeader,
 .sapMListTblFooter {
-	background: @sapUiListBackground;
+	background: var(--sapList_Background);
 }
 
 .sapMListTbl {
 	/* HCB Additional Style */
-	border: 1px solid @sapUiListHeaderBorderColor;
+	border: 1px solid var(--sapList_HeaderBorderColor);
 }
 
 .sapMSticky .sapMTB-Info-CTX.sapMTB.sapMListInfoTBar {
@@ -22,11 +22,11 @@
 
 /* table column header */
 .sapMListTbl th {
-	border-bottom: 0.125rem solid @sapUiListHeaderBorderColor;
+	border-bottom: 0.125rem solid var(--sapList_HeaderBorderColor);
 }
 
-// to ensure that the bottom focus outline is visible on the table header row,
-// the <th> bottom border color is made transparent
+/* to ensure that the bottom focus outline is visible on the table header row, */
+/* the <th> bottom border color is made transparent */
 .sapMLIBFocusable:not(.sapMTableRowCustomFocus):focus > .sapMTableTH {
 	border-bottom-color: transparent;
 }
@@ -41,5 +41,5 @@
 
 /* table footer */
 .sapMListTblFooter > td {
-	border-top: 0.125rem solid @sapUiListTableFooterBorder;
+	border-top: 0.125rem solid var(--sapList_TableFooterBorder);
 }

package/src/sap/m/themes/sap_horizon_hcw/Text.less

@@ -9,7 +9,8 @@
 	padding-top: 0.6875rem;
 	padding-bottom: 0.6875rem;
 }
-html[data-sap-ui-browser^="cr"] .sapUiFormEdit .sapMText {
+
+html[data-sap-ui-browser^='cr'] .sapUiFormEdit .sapMText {
 	line-height: 1.4375rem;
 }
 

package/src/sap/m/themes/sap_horizon_hcw/TextArea.less

@@ -15,7 +15,9 @@
 @_sapMTextAreaValueStateErrorWarningPadding_Compact: 0.0625rem 0.375rem 0;
 
 .sapMFocus.sapMTextArea {
+
 	& .sapMInputBaseContentWrapper {
+
 		.sapMInputBaseInner {
 			outline-offset: -3px;
 		}
@@ -31,23 +33,24 @@
 }
 
 html.sap-desktop:not(.sapUiNativeScrollbars) .sapMTextArea {
+
 	.sapMInputBaseContentWrapperWarning ::-webkit-scrollbar {
-		background: @sapUiFieldWarningBackgroundStyle;
-		background-color: @sapUiScrollBarTrackColor;
+		background: var(--sapField_WarningBackgroundStyle);
+		background-color: var(--sapScrollBar_TrackColor);
 	}
 
 	.sapMInputBaseContentWrapperError ::-webkit-scrollbar {
-		background: @sapUiFieldInvalidBackgroundStyle;
-		background-color: @sapUiScrollBarTrackColor;
+		background: var(--sapField_InvalidBackgroundStyle);
+		background-color: var(--sapScrollBar_TrackColor);
 	}
 
 	.sapMInputBaseContentWrapperInformation ::-webkit-scrollbar {
-		background: @sapUiFieldInformationBackgroundStyle;
-		background-color: @sapUiScrollBarTrackColor;
+		background: var(--sapField_InformationBackgroundStyle);
+		background-color: var(--sapScrollBar_TrackColor);
 	}
 
 	.sapMInputBaseContentWrapperSuccess ::-webkit-scrollbar {
-		background: @sapUiFieldSuccessBackgroundStyle;
-		background-color: @sapUiScrollBarTrackColor;
+		background: var(--sapField_SuccessBackgroundStyle);
+		background-color: var(--sapScrollBar_TrackColor);
 	}
 }

package/src/sap/m/themes/sap_horizon_hcw/Tile.less

@@ -5,12 +5,11 @@
 
 .sapMTile,
 .sapMCustomTile {
-	border: 1px solid @sapUiTileBorderColor;
+	border: 1px solid var(--sapTile_BorderColor);
 	border-radius: 0.25rem;
 	box-shadow: none;
-    -webkit-transition-property: none;
 	transition-property: none;
-	background-color: @sapUiTileBackground;
+	background-color: var(--sapTile_Background);
 }
 
 .sapMTile:focus,
@@ -22,8 +21,8 @@
 .sapMTile:focus::before,
 .sapMTile:hover::before,
 .sapMCustomTile:focus .sapMTile::before,
-.sapMCustomTile:hover .sapMTile::before{
-	content: "";
+.sapMCustomTile:hover .sapMTile::before {
+	content: '';
 	position: absolute;
 	top: -1px;
 	right: -1px;
@@ -34,7 +33,7 @@
 
 .sapMTile:focus::before,
 .sapMCustomTile:focus .sapMTile::before {
-	outline: 0.125rem dotted @sapUiContentFocusColor;
+	outline: 0.125rem dotted var(--sapContent_FocusColor);
 	outline-offset: -0.25rem;
 }
 
@@ -45,7 +44,7 @@
 
 .sapMTile:hover::before,
 .sapMCustomTile:hover .sapMTile::before {
-	border: 0.188rem solid @sapUiTileBorderColor;
+	border: 0.188rem solid var(--sapTile_BorderColor);
 }
 
 .sapMTile:hover,
@@ -56,13 +55,14 @@
 }
 
 .sapMTile.sapMTileActive {
-	background-color: @sapUiTileBackground;
+	background-color: var(--sapTile_Background);
 }
 
 .sapMTile .sapUiLocalBusyIndicator {
-	background-color: @sapUiTileBackground;
+	background-color: var(--sapTile_Background);
 	border-radius: 0.25rem;
 	margin: 0.125rem;
+
 	.sapUiLocalBusyIndicatorAnimation {
 		border: none;
 		box-shadow: none;

package/src/sap/m/themes/sap_horizon_hcw/TileContainer.less

@@ -3,16 +3,16 @@
 /* Horizon High Contrast White theme    */
 /* ==================================== */
 
-.sapMTC .sapMTCPager SPAN {
-	border: 1px solid @sapUiContentForegroundBorderColor;
+.sapMTC .sapMTCPager span {
+	border: 1px solid var(--sapContent_ForegroundBorderColor);
 }
 
-.sapMTC .sapMTCPager SPAN.sapMTCActive {
-	border: 1px solid @sapUiContentForegroundBorderColor;
+.sapMTC .sapMTCPager span.sapMTCActive {
+	border: 1px solid var(--sapContent_ForegroundBorderColor);
 }
 
 .sapMTC .sapMTCScroller:focus::before {
-	border: 0.125rem dotted @sapUiContentFocusColor;
+	border: 0.125rem dotted var(--sapContent_FocusColor);
 	position: absolute;
 	top: -1px;
 	bottom: -1px;

package/src/sap/m/themes/sap_horizon_hcw/TimePicker.less

@@ -3,6 +3,6 @@
 /* Horizon High Contrast White theme  */
 /* ================================== */
 
-@_sap_m_TimePicker_ItemColor: @sapUiLegendWorkingBackground;
-@_sap_m_TimePicker_ItemHoverColor: @sapUiListHoverBackground;
-@_sap_m_TimePicker_ItemBorderColor: @sapUiListBackground;
+@_sap_m_TimePicker_ItemColor: var(--sapLegend_WorkingBackground);
+@_sap_m_TimePicker_ItemHoverColor: var(--sapList_Hover_Background);
+@_sap_m_TimePicker_ItemBorderColor: var(--sapList_Background);

package/src/sap/m/themes/sap_horizon_hcw/TimePickerSliders.less

@@ -3,16 +3,16 @@
 /* Horizon High Contrast White theme        */
 /* ======================================== */
 
-/* ======================================== */
-/* TimePicker Dropdown                      */
-/* ======================================== */
+/* TimePicker Dropdown */
 .sapMTimePickerSlider {
+
 	.sapMTimePickerItem {
-		border-radius: @sapUiElementBorderCornerRadius;
+		border-radius: var(--sapElement_BorderCornerRadius);
 	}
 }
 
 .sapMTimePickerContainer {
+
 	.sapMTPColumn:not(:last-child),
 	.sapMTPColumn.sapMTPSliderExpanded:not(:last-child) {
 		margin-right: 0.5rem;
@@ -20,77 +20,96 @@
 }
 
 .sapMTimePickerContainer .sapMTPColumn {
+
 	.sapMTimePickerSlider,
 	.sapMTimePickerLabel,
 	.sapMTimePickerSlider {
+
 		.sapMTimePickerItem,
 		.sapMTPPickerSelectionFrame,
 		.sapMTPSliderExpanded {
 			width: 3rem;
 			height: 2.875rem;
 		}
+
 		width: 3rem;
 		height: 2.875rem;
 	}
 }
 
 .sapUiSizeCompact .sapMTimePickerContainer .sapMTPColumn {
+
 	.sapMTimePickerSlider,
 	.sapMTimePickerLabel,
 	.sapMTimePickerSlider {
+
 		.sapMTimePickerItem,
 		.sapMTPPickerSelectionFrame,
 		.sapMTPSliderExpanded {
 			width: 3rem;
 		}
+
 		width: 3rem;
 		height: 2rem;
 	}
 }
 
 .sapMTimePickerContainer {
+
 	.sapMTPColumn {
+
 		.sapMTimePickerSlider {
+
 			.sapMTimePickerItem {
-				background: @sapUiContentSelectedBackground;
-				border: 0.0625rem solid @sapUiListSelectionBorderColor;
+				background: var(--sapContent_Selected_Background);
+				border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+
 				&:hover {
-					background: @sapUiContentSelectedHoverBackground;
+					background: var(--sapContent_Selected_Hover_Background);
 				}
 			}
 		}
+
 		&.sapMTPSliderExpanded {
+
 			.sapMTimePickerSlider {
+
 				.sapMTimePickerItem {
-					background: @sapUiLegendWorkingBackground;
-					border: 0.0625rem solid @sapUiListBackground;
+					background: var(--sapLegend_WorkingBackground);
+					border: 0.0625rem solid var(--sapList_Background);
+
 					&:hover {
-						background: @sapUiListHoverBackground;
-						border: solid 0.0625rem @sapUiListSelectionBorderColor;
+						background: var(--sapList_Hover_Background);
+						border: solid 0.0625rem var(--sapList_SelectionBorderColor);
 					}
+
 					&:active {
-						background: @sapUiContentSelectedBackground;
-						color: @sapUiContentSelectedTextColor;
+						background: var(--sapContent_Selected_Background);
+						color: var(--sapContent_Selected_TextColor);
 					}
-					&.sapMTimePickerItemSelected{
-						background: @sapUiListBackground
+
+					&.sapMTimePickerItemSelected {
+						background: var(--sapList_Background)
 					}
 				}
+
 				.sapMTPPickerSelectionFrame {
-					border: solid 0.0625rem @sapUiListSelectionBorderColor;
-					border-radius: @sapUiElementBorderCornerRadius;
-					outline:none;
-					
+					border: solid 0.0625rem var(--sapList_SelectionBorderColor);
+					border-radius: var(--sapElement_BorderCornerRadius);
+					outline: none;
+
 					&:hover {
+
 						+ ul > li.sapMTimePickerItem.sapMTimePickerItemSelected {
-							background: @sapUiListHoverBackground;
-							border: solid 0.0625rem @sapUiListSelectionBorderColor;
+							background: var(--sapList_Hover_Background);
+							border: solid 0.0625rem var(--sapList_SelectionBorderColor);
 						}
 					}
+
 					&:active {
 						& + ul > li.sapMTimePickerItem.sapMTimePickerItemSelected {
-							background: @sapUiContentSelectedBackground;
-							color: @sapUiContentSelectedTextColor;
+							background: var(--sapContent_Selected_Background);
+							color: var(--sapContent_Selected_TextColor);
 						}
 					}
 				}
@@ -103,41 +122,48 @@
 	}
 }
 
-
 /* PHONE STYLES */
 .sap-phone {
-	/* ======================================== */
-	/* TimePicker Dropdown                      */
-	/* ======================================== */
 
+	/* TimePicker Dropdown */
 	.sapMTimePickerContainer {
+
 		.sapMTPColumn {
+
 			.sapMTimePickerSlider,
 			.sapMTimePickerLabel,
 			.sapMTimePickerSlider {
+
 				.sapMTimePickerItem,
 				.sapMTPPickerSelectionFrame,
 				.sapMTPSliderExpanded {
 					width: 3rem;
 					height: 2.875rem;
 				}
+
 				width: 3rem;
 				height: 2.875rem;
 			}
+
 			.sapMTimePickerSlider {
+
 				.sapMTimePickerItem {
-					border: 1px solid @sapUiListBackground;
+					border: 1px solid var(--sapList_Background);
 				}
 			}
+
 			&.sapMTPSliderExpanded {
+
 				.sapMTimePickerSlider {
+
 					.sapMTimePickerItem {
-						background: @sapUiLegendWorkingBackground;
-						border: 1px solid @sapUiListBackground;
+						background: var(--sapLegend_WorkingBackground);
+						border: 1px solid var(--sapList_Background);
 						width: 3rem;
 					}
+
 					.sapMTPPickerSelectionFrame {
-						outline: 0.0.0625rem solid @sapUiListSelectionBorderColor;
+						outline: 0.0625rem solid var(--sapList_SelectionBorderColor);
 						outline-offset: -0.188rem;
 					}
 				}

package/src/sap/m/themes/sap_horizon_hcw/Title.less

@@ -1,7 +1,7 @@
-/* ======================================== */
-/* CSS for control sap.m/Title				*/
-/* Horizon High Contrast White theme        */
-/* ======================================== */
+/* ================================= */
+/* CSS for control sap.m/Title       */
+/* Horizon High Contrast White theme */
+/* ================================= */
 
 .sapFFCL {
 
@@ -11,7 +11,9 @@
 	.sapFDynamicPage-Std-Phone {
 
 		.sapFDynamicPageTitleMain {
+
 			.sapFDynamicPageTitleMainInner {
+
 				.sapFDynamicPageTitleMainHeading {
 					align-self: auto;
 
@@ -19,8 +21,8 @@
 						margin-top: 0.6875rem;
 
 						.sapMTitle:not(.sapUICompVarMngmtTitle):not(.sapMVarMngmtTitle) {
-							font-size: @sapUiObjectHeaderTitleSnappedFontSize;
-							font-family: @sapUiObjectHeaderTitleFontFamily;
+							font-size: var(--sapObjectHeader_Title_SnappedFontSize);
+							font-family: var(--sapObjectHeader_Title_FontFamily);
 						}
 					}
 				}

package/src/sap/m/themes/sap_horizon_hcw/ToggleButton.less

@@ -17,9 +17,9 @@ html.sap-desktop .sapMBtnDisabled .sapMTB-Transparent-CTX .sapMBtnInner.sapMTogg
 }
 
 .sapMBtn .sapMBtnEmphasized.sapMToggleBtnPressed {
-	background-color: @sapUiButtonSelectedBackground;
-	color: @sapUiButtonSelectedTextColor;
-	border-color: @sapUiButtonSelectedBorderColor;
+	background-color: var(--sapButton_Selected_Background);
+	color: var(--sapButton_Selected_TextColor);
+	border-color: var(--sapButton_Selected_BorderColor);
 }
 
 /* Icon in disabled toggled button */
@@ -35,10 +35,10 @@ html.sap-desktop .sapMTB-Transparent-CTX .sapMToggleBtnPressed.sapMBtnTransparen
 
 .sapMBtnDisabled .sapMToggleBtnPressed.sapMBtnInner .sapMBtnIcon,
 .sapMBtnDisabled .sapMToggleBtnPressed.sapMBtnInner.sapMBtnTransparent .sapMBtnIcon,
-html.sap-desktop.sapMToggleBtnPressed.sapMBtnTransparent.sapMBtnDisabled > .sapMBtnIcon{
+html.sap-desktop.sapMToggleBtnPressed.sapMBtnTransparent.sapMBtnDisabled > .sapMBtnIcon {
 	color: @sapUiHcReducedAltForeground;
 }
 
 .sapUiSizeCompact .sapMBar-CTX .sapMBtnDefault.sapMBtnInner.sapMToggleBtnPressed:not(.sapMBtnDisabled) {
-	border-color: @sapUiButtonSelectedBorderColor;
+	border-color: var(--sapButton_Selected_BorderColor);
 }