@openui5/themelib_sap_horizon 1.132.1 → 1.133.0

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

@@ -2,14 +2,15 @@
 /* CSS for control sap.m/Slider  */
 /* Horizon theme                 */
 /* ============================= */
+
 @_sap_m_Slider_Height: 2.75rem;
 @_sap_m_Slider_Progress: .25rem;
 
 /*new*/
 .sapMSliderInner .sapMSliderHandle {
-	border: 1px solid @sapUiSliderHandleBorderColor;
-	background: @sapUiSliderHandleBackground;
-	border-radius: @sapUiButtonBorderCornerRadius;
+	border: 1px solid var(--sapSlider_HandleBorderColor);
+	background: var(--sapSlider_HandleBackground);
+	border-radius: var(--sapButton_BorderCornerRadius);
 	width: 2rem;
 	height: 1.5rem;
 	margin-left: -1rem;
@@ -21,9 +22,9 @@
 	align-items: center;
 }
 
-.sapMSliderInner .sapMSliderHandle:not(:focus):not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
-	font-family: SAP-icons;
-	content: "\e29c";
+.sapMSliderInner .sapMSliderHandle:not(:focus):not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus)::after {
+	font-family: var(--sapContent_IconFontFamily);
+	content: '\e29c';
 	position: absolute;
 	top: 0.25rem;
 	right: 0.5rem;
@@ -31,11 +32,12 @@
 	vertical-align: middle;
 	font-size: 0.875rem;
 	line-height: 0.875rem;
-	color: @sapContent_Selected_ForegroundColor;
+	color: var(--sapContent_Selected_ForegroundColor);
 }
 
-.sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled):hover>.sapMSliderHandle):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):focus {
-	&:after {
+.sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled):hover > .sapMSliderHandle):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):focus {
+
+	&::after {
 		top: 0.1875rem;
 		right: 0.4375rem;
 	}
@@ -43,30 +45,32 @@
 
 .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderProgress:hover ~ .sapMSliderHandle,
 .sapMSliderHandle:hover {
+
 	&:not(:focus) {
-		border-color: @sapUiSliderHoverHandleBorderColor;
-		background: @sapUiSliderHoverHandleBackground;
+		border-color: var(--sapSlider_Hover_HandleBorderColor);
+		background: var(--sapSlider_Hover_HandleBackground);
 	}
 }
 
 .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
-	background: @sapUiSliderActiveRangeHandleBackground;
-	border: @sapUiContentFocusWidth solid @sapUiContentFocusColor;
+	background: var(--sapSlider_Active_RangeHandleBackground);
+	border: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
 	outline: none;
 	top: -0.625rem;
 }
 
-.sapMSliderHandle:focus:before {
+.sapMSliderHandle:focus::before {
 	content: none;
 }
 
 .sapMSliderInner {
-	background: @sapUiSliderBackground;
+	background: var(--sapSlider_Background);
 }
 
 .sapMSliderProgress {
-	background: @sapUiSliderSelectedBackground;
-	&:before {
+	background: var(--sapSlider_Selected_Background);
+
+	&::before {
 		content: none;
 		transform: none;
 	}
@@ -78,11 +82,11 @@
 }
 
 .sapMSliderInner::before {
-	content: "";
+	content: '';
 	position: absolute;
 	box-sizing: border-box;
-	border: 0.0625rem solid @sapUiContentSelectedMeasureIndicatorColor;
-	background-color: @sapUiSliderSelectedBackground;
+	border: 0.0625rem solid var(--sapContent_Selected_MeasureIndicatorColor);
+	background-color: var(--sapSlider_Selected_Background);
 	border-radius: 50%;
 	width: 0.5rem;
 	height: 0.5rem;
@@ -91,11 +95,11 @@
 }
 
 .sapMSlider::after {
-	content: "";
+	content: '';
 	position: absolute;
 	box-sizing: border-box;
-	border: 0.0625rem solid @sapUiContentMeasureIndicatorColor;
-	background-color: @sapUiContentMeasureIndicatorColor;
+	border: 0.0625rem solid var(--sapContent_MeasureIndicatorColor);
+	background-color: var(--sapContent_MeasureIndicatorColor);
 	border-radius: 50%;
 	width: 0.5rem;
 	height: 0.5rem;
@@ -104,7 +108,7 @@
 }
 
 .sapMSliderTooltip {
-	background: @sapField_Focus_Background;
+	background: var(--sapField_Focus_Background);
 }
 
 .sapMSliderTickLabel .sapMSliderLabel {
@@ -112,8 +116,8 @@
 	height: 1rem;
 	width: 2rem;
 	left: -1rem;
-	font-size: @sapMFontSmallSize;
-	color: @sapUiContentLabelColor;
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapContent_LabelColor);
 }
 
 .sapMSliderTickmarks {
@@ -124,7 +128,7 @@
 }
 
 .sapMSliderTick {
-	border-color: @sapUiContentMeasureIndicatorColor;
+	border-color: var(--sapContent_MeasureIndicatorColor);
 	margin: 0;
 	height: .5rem;
 }
@@ -134,8 +138,8 @@
 
 	.sapMSliderRangeLabel {
 		width: 2rem;
-		font-size: @sapMFontSmallSize;
-		color: @sapUiContentLabelColor;
+		font-size: var(--sapFontSmallSize);
+		color: var(--sapContent_LabelColor);
 	}
 }
 
@@ -169,19 +173,20 @@
 		padding-top: 0.375rem;
 	}
 
-	.sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled):hover>.sapMSliderHandle):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
+	.sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled):hover>.sapMSliderHandle):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus)::after {
 		top: 0.125rem;
 		right: 0.25rem;
 	}
 
 	.sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled):hover>.sapMSliderHandle):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):focus {
-		&:after {
+
+		&::after {
 			top: 0.0625rem;
 			right: 0.1875rem;
 		}
 	}
 }
 
-.sapMSliderTick[data-ui5-active-tickmark="true"] {
-	border-left: 0.0625rem solid @sapSlider_Selected_BorderColor;
+.sapMSliderTick[data-ui5-active-tickmark='true'] {
+	border-left: 0.0625rem solid var(--sapSlider_Selected_BorderColor);
 }

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

@@ -4,29 +4,29 @@
 /* ==================================== */
 
 .sapMSliderTooltip {
-	background: @sapField_Focus_Background; 
+	background: var(--sapField_Focus_Background);
 	border-radius: 0.5rem;
 	border: none;
-	box-shadow: @sapUiContentShadow1;
+	box-shadow: var(--sapContent_Shadow1);
 	height: 1.375rem;
 	min-width: 2rem;
 	padding: 0.25rem;
-	font-size: @sapMFontSmallSize;
-	color: @sapUiContentLabelColor;
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapContent_LabelColor);
 }
 
 .sapMSliderTooltipInput {
 	font-size: @sapMFontMediumSize;
-	color: @sapUiFieldTextColor;
+	color: var(--sapField_TextColor);
 }
 
 .sapMSliderTooltipErrorState {
-	box-shadow: inset 0px 0px 0px 2px @sapField_InvalidColor;
+	box-shadow: inset 0 0 0 2px @sapField_InvalidColor;
 }
 
 .sapMSliderTooltip.sapMSliderTooltipNonEditableWrapper {
 	height: 0.875rem;
 	padding: 0.25rem;
-	font-size: @sapMFontSmallSize;
-	color: @sapUiContentLabelColor;
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapContent_LabelColor);
 }

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

@@ -52,7 +52,7 @@
 
 .sapMSB .sapMSBArrow .sapMBtnInner,
 .sapMSB .sapMSBText .sapMBtnInner {
-	border-radius: 0.45rem;
+	border-radius: var(--sapButton_Segment_BorderCornerRadius);
 }
 
 .sapMSB .sapMSBInner .sapMSBText:not(.sapMSBTextIE) .sapMBtnInner {
@@ -220,7 +220,6 @@
 	background-color: @sapUiButtonHoverTextColor;
 	pointer-events: none;
 	height: 1.25rem;
-	border-radius: 0.35rem;
 }
 
 .sapMSB.sapMSBEmphasized .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {

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

@@ -4,7 +4,7 @@
 /* ======================================= */
 
 @_sap_m_StandardListItem_TextShadowColor: none;
-@_sap_m_StandardListItem_SelectedLabelColor: @sapUiContentLabelColor;
+@_sap_m_StandardListItem_SelectedLabelColor: var(--sapContent_LabelColor);
 
 .sapMSLIInfo {
 	text-shadow: @_sap_m_StandardListItem_TextShadowColor;

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

@@ -18,7 +18,7 @@
 					.sapFDynamicPageTitleMainHeadingInner {
 						margin-top: 0.6875rem;
 
-						.sapMTitle:not(.sapUICompVarMngmtTitle) {
+						.sapMTitle:not(.sapUICompVarMngmtTitle):not(.sapMVarMngmtTitle) {
 							font-size: @sapUiObjectHeaderTitleSnappedFontSize;
 							font-family: @sapUiObjectHeaderTitleFontFamily;
 						}

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

@@ -65,11 +65,15 @@ html.sap-desktop .sapMToggleBtnPressed,
 	}
 }
 
-.sapMBtn .sapMBtnCritical.sapMBtnInner,
-.sapMBtn .sapMBtnNegative.sapMBtnInner,
-.sapMBtn .sapMBtnSuccess.sapMBtnInner,
-.sapMBtn .sapMBtnNeutral.sapMBtnInner{
-	text-shadow: none;
+.sapMBtn {
+	.sapMBtnCritical,
+	.sapMBtnNegative,
+	.sapMBtnSuccess,
+	.sapMBtnNeutral {
+		&.sapMBtnInner.sapMToggleBtnPressed {
+			text-shadow: none;
+		}
+	}
 }
 
 /* Focus of toggled button */

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

@@ -32,7 +32,7 @@
 	line-height: 1;
 }
 
-.sapMToken.sapMTokenSelected::before {
+.sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly)::before {
 	content: '';
 	position: absolute;
 	pointer-events: none;
@@ -57,7 +57,6 @@ html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
 
 .sapMToken.sapMTokenReadOnly {
 	padding: 0.25rem 0.3125rem;
-	color: @sapUiContentLabelColor;
 
 	.sapMTokenText {
 		line-height: 1rem;

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

@@ -26,11 +26,6 @@ html.sap-desktop .sapMTokenizer:focus {
 	border-radius: @sapField_BorderCornerRadius;
 }
 
-/* editable tokens in read-only tokenizer */
-.sapMTokenizer.sapMTokenizerReadonly .sapMToken {
-		color: @sapUiContentLabelColor;
-}
-
 .sapMTokenizer.sapMTokenizerReadonly .sapMToken.sapMTokenReadOnly {
 	padding: 0.25rem 0.3125rem;
 }

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

@@ -183,6 +183,17 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnSuccess.sapMFocusable:not(.sapMBtnActi
 	text-shadow: var(--sapContent_TextShadow);
 }
 
+.sapMBtn {
+	.sapMBtnCritical,
+	.sapMBtnNegative,
+	.sapMBtnSuccess,
+	.sapMBtnNeutral {
+		&.sapMBtnInner.sapMBtnActive {
+			text-shadow: none;
+		}
+	}
+}
+
 /* ---------------------------------------------------------------------*/
 /* Disabled, hover and active states:                                   */
 /* ---------------------------------------------------------------------*/

package/src/sap/m/themes/sap_horizon_dark/Link.less

@@ -61,4 +61,8 @@ html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {
 
 .sapMListTblRow.sapMLIBSelected .sapMLnk:not(.sapMLnkDsbl) {
 	text-shadow: var(--sapContent_TextShadow);
+}
+
+.sapMLnk.sapMLnkLargeReactiveArea {
+	line-height: 1.5rem;
 }

package/src/sap/m/themes/sap_horizon_dark/ObjectAttribute.less

@@ -5,6 +5,15 @@
 
 @_sap_m_ObjectAttribute_ListTextShadowColor: none;
 
+.sapMObjectAttributeActive.sapMLnkLargeReactiveArea {
+	.sapMObjectAttributeTitle,
+	.sapMObjectAttributeColon,
+	.sapMObjectAttributeText,
+	.sapMObjectAttributeText > .sapMLnk {
+		line-height: 1.5rem;
+	}
+}
+
 .sapMObjectAttributeActive .sapMObjectAttributeText:focus {
 	position: relative;
 }

package/src/sap/m/themes/sap_horizon_dark/ObjectMarker.less

@@ -17,4 +17,8 @@
 			}
 		}
 	}
+}
+
+.sapMObjectMarker.sapMLnkLargeReactiveArea > .sapUiIcon {
+	line-height: 1.5rem;
 }

package/src/sap/m/themes/sap_horizon_dark/ObjectNumber.less

@@ -3,6 +3,12 @@
 /* Evening Horizon theme               */
 /* =================================== */
 
+.sapMObjectNumber.sapMLnkLargeReactiveArea:not(.sapMObjectNumberLarge):not(.sapMObjectNumberInverted) {
+	.sapMObjectNumberInner {
+		line-height: 1.5rem;
+	}
+}
+
 .sapMObjectNumberInverted {
 	box-sizing: border-box;
 

package/src/sap/m/themes/sap_horizon_dark/ObjectStatus.less

@@ -7,6 +7,17 @@
 	display: inline-block;
 }
 
+.sapMObjStatus.sapMLnkLargeReactiveArea:not(.sapMObjectStatusLarge):not(.sapMObjStatusInverted) {
+	.sapMObjStatusTitle,
+	.sapMObjStatusIcon .sapUiIcon,
+	.sapMObjStatusText {
+		line-height: 1.5rem;
+	}
+	.sapMObjStatusIcon {
+		height: 1.5rem;
+	}
+}
+
 .sapMObjStatusInverted:not(.sapMObjectStatusLarge) {
 
 	.sapMObjStatusText {

package/src/sap/m/themes/sap_horizon_dark/Panel.less

@@ -5,11 +5,11 @@
 
 .sapMPanel {
 	min-height: 2.75rem;
-	border-radius: var(--sapElement_BorderCornerRadius);
+	border-radius: @sapGroup_BorderCornerRadius;
 
 	.sapMPanelWrappingDiv:not(.sapMPanelWrappingDivExpanded),
 	.sapMPanelWrappingDivTb:not(.sapMPanelWrappingDivTbExpanded) {
-		border-radius: var(--sapElement_BorderCornerRadius);
+		border-radius: @sapGroup_BorderCornerRadius;
 		overflow: hidden;
 	}
 }
@@ -32,8 +32,8 @@
 .sapMPanelWrappingDiv,
 /* do not want border if expanded and if only header text */
 .sapMPanelWrappingDivTb {
-	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
-	background: var(--sapGroup_ContentBackground);
+	border-bottom: @sapGroup_TitleBorderWidth solid @sapUiGroupTitleBorderColor;
+	background: @sapGroup_ContentBackground;
 }
 
 .sapMPanelExpandable .sapMPanelWrappingDiv {
@@ -52,7 +52,7 @@
 
 .sapMPanelWrappingDiv.sapMPanelWrappingDivExpanded,
 .sapMPanelWrappingDivTb.sapMPanelWrappingDivTbExpanded {
-	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	border-bottom: @sapGroup_TitleBorderWidth solid @sapUiGroupTitleBorderColor;
 }
 
 .sapMPanelWrappingDivTb .sapMTB.sapMTBStandard {

package/src/sap/m/themes/sap_horizon_dark/RadioButton.less

@@ -87,7 +87,7 @@
 
 .sapMRb:not(.sapMRbErr):not(.sapMRbWarn):not(.sapMRbInfo):not(.sapMRbSucc):not(.sapMRbDis) .sapMRbHoverable:hover .sapMRbBOut {
 	stroke: var(--sapField_Hover_BorderColor);
-	fill: var(--sapContent_Selected_Hover_Background);
+	fill: var(--sapField_Selector_Hover_Background);
 }
 
 .sapMRb:focus::before {
@@ -140,6 +140,10 @@
 	}
 }
 
+.sapMRb.sapMRbErr .sapMRbHoverable:hover .sapMRbBOut {
+	fill: var(--sapField_Selector_Hover_InvalidBackground);
+}
+
 .sapMRbWarn.sapMRbSel,
 .sapMRbWarn.sapMRbSel.sapMRbRo {
 
@@ -159,6 +163,10 @@
 	}
 }
 
+.sapMRb.sapMRbWarn .sapMRbHoverable:hover .sapMRbBOut {
+	fill: var(--sapField_Selector_Hover_WarningBackground);
+}
+
 .sapMRbSucc.sapMRbSel,
 .sapMRbSucc.sapMRbSel.sapMRbRo {
 
@@ -178,6 +186,10 @@
 	}
 }
 
+.sapMRb.sapMRbSucc .sapMRbHoverable:hover .sapMRbBOut {
+	fill: var(--sapField_Selector_Hover_SuccessBackground);
+}
+
 .sapMRbInfo.sapMRbSel,
 .sapMRbInfo.sapMRbSel.sapMRbRo {
 
@@ -197,6 +209,10 @@
 	}
 }
 
+.sapMRb.sapMRbInfo .sapMRbHoverable:hover .sapMRbBOut {
+	fill: var( --sapField_Selector_Hover_InformationBackground);
+}
+
 .sapMRbRo .sapMRbBOut {
 	stroke-dasharray: 4,2; /* parameter needed for the type of the dashes */
 }

package/src/sap/m/themes/sap_horizon_dark/SegmentedButton.less

@@ -76,7 +76,7 @@
 
 html.sap-desktop .sapMSegBBtnFocusable:hover .sapMSegBBtnInner {
 	background: var(--sapButton_Hover_Background);
-	border-radius: 0.5rem;
+	border-radius: var(--sapButton_Segment_BorderCornerRadius);
 	border-color: var(--sapButton_Hover_BorderColor);
 }
 
@@ -260,7 +260,7 @@ html.sap-desktop {
 		background: var(--sapButton_Selected_Background);
 		color: var(--sapButton_Selected_TextColor);
 		border-color: var(--sapButton_Selected_BorderColor);
-		border-radius: 0.5rem;
+		border-radius: var(--sapButton_Segment_BorderCornerRadius);
 	}
 
 	.sapUiIcon {