@openui5/themelib_sap_horizon 1.108.16 → 1.108.18

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

@@ -7,7 +7,6 @@
 	opacity: @sapUiContentDisabledOpacity;
 	outline: none;
 	cursor: default;
-	text-decoration: none;
 }
 
 .sapMLnkEmphasized {
@@ -22,20 +21,39 @@
 .sapMLnk.sapMLnkSubtle {
 	color: @sapUiLinkSubtleColor;
 	text-decoration: underline;
+
+	&:not(.sapMLnkDsbl) {
+		&:active {
+			color: @sapUiLinkSubtleColor;
+		}
+	}
 }
 
-.sapMLnkSubtle:focus {
-	color: @sapUiContentFocusColor;
+html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {
+	&:focus {
+		border-radius: 0.125rem;
+		background-color: @sapUiContentFocusColor;
+		color: @sapUiContentContrastTextColor;
+		text-shadow: none;
+		outline: none;
+
+		&:hover:not(:active) {
+			text-decoration: none;
+		}
+	}
+
+	&.sapMLnkSubtle {
+		&:hover:not(:active):not(:focus) {
+			color: @sapUiLinkSubtleColor;
+			text-decoration: none;
+		}
+	}
 }
 
 .sapMLnk:not(.sapMLnkDsbl) {
 	text-shadow: @sapUiContentTextShadow;
 }
 
-html.sap-desktop .sapMLnk:hover:not(.sapMLnkDsbl).sapMLnkSubtle {
-	text-decoration: none;
-}
-
 /* align Link in Form with Label */
 .sapUiFormEdit .sapMLnk {
 	margin-top: 0.875rem; /* don't use padding as this would stretch the focus outline */
@@ -44,16 +62,4 @@ html.sap-desktop .sapMLnk:hover:not(.sapMLnkDsbl).sapMLnkSubtle {
 
 .sapMListTblRow.sapMLIBSelected .sapMLnk:not(.sapMLnkDsbl) {
 	text-shadow: @sapUiContentTextShadow;
-}
-
-html.sap-desktop .sapMLnk:focus:not(.sapMLnkDsbl) {
-	border-radius: 0.125rem;
-	background-color: @sapUiContentFocusColor;
-	color: @sapUiContentContrastTextColor;
-	text-shadow: none;
-	outline: none;
-}
-
-html.sap-desktop .sapMLnk:focus:hover:not(.sapMLnkDsbl) {
-	text-decoration: none;
 }

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

@@ -0,0 +1,13 @@
+.sapUiSizeCompact {
+	.sapMMenu .sapUiMnuLst .sapUiMnuItm {
+		.sapUiMnuItmIco + .sapUiMnuItmTxt {
+			margin-left: 3rem;
+		}
+	}
+}
+
+.sapMMenu .sapUiMnuLst .sapUiMnuItm {
+    .sapUiMnuItmIco + .sapUiMnuItmTxt {
+        margin-left: 3.75rem;
+    }
+}

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

@@ -4,7 +4,7 @@
 /* ================================== */
 
 .sapMPanel {
-	min-height: 2.5rem;
+	min-height: 2.75rem;
 	border-radius: @sapElement_BorderCornerRadius;
 
 	.sapMPanelWrappingDiv:not(.sapMPanelWrappingDivExpanded),
@@ -62,6 +62,10 @@
 	border-bottom: none;
 }
 
+.sapMPanelContent {
+	padding: 0.625rem 1rem;
+}
+
 .sapMPanel .sapMPanelHdr {
 	line-height: 2.75rem;
 	height: 2.75rem;
@@ -71,14 +75,19 @@
 	width: 2.25rem;
 }
 
-.sapUiSizeCompact .sapMPanelWrappingDiv .sapUiIcon {
-	width: 2rem;
+.sapUiSizeCompact {
+	.sapMPanel {
+		min-height: 2.5rem;
+	}
+	.sapMPanelWrappingDiv .sapUiIcon {
+		width: 2rem;
+	}
 }
 
 .sapMPanel.sapMPanelExpandable .sapMPanelWrappingDivTb {
 	& .sapMPanelHeaderTB {
 		border-top-left-radius: 0;
-		margin-left: 2.25rem;
+		margin-left: 2.75rem;
 		padding-left: 0.25rem;
 	}
 

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

@@ -141,4 +141,17 @@
 		border-bottom-right-radius: @sapUiPopoverBorderCornerRadius;
 		border-bottom-left-radius: @sapUiPopoverBorderCornerRadius;
 	}
+}
+
+.sapMPopoverResizeHandle {
+	border: none;
+	color: @sapButton_Lite_TextColor;
+	width: 1rem;
+	font-size: 1rem;
+	line-height: 1rem;
+	content: "\e24f";
+	height: 1rem;
+	top: 0;
+	right: 0.125rem;
+	padding: 0 0.125rem 0rem 0rem;
 }

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

@@ -3,6 +3,8 @@
 /* Evening Horizon theme              */
 /* ================================== */
 
+@_sap_m_Radio_Button_Read_Only_fill: @sapUiFieldTextColor;
+
 .sapMRb {
 	height: 2.75rem;
 
@@ -83,7 +85,7 @@
 }
 
 .sapMRb:not(.sapMRbDis) .sapMRbHoverable:hover .sapMRbBOut {
-	fill: @sapUiFieldHoverBackground;
+	fill: @sapUiContentSelectedHoverBackground;
 }
 
 .sapMRb:focus:before {
@@ -141,7 +143,7 @@
 .sapMRbWarn.sapMRbSel,
 .sapMRbWarn.sapMRbSel.sapMRbRo {
 	.sapMRbBInn {
-		fill:  @sapUiFieldTextColor;
+		fill:  @sapUiFieldWarningColor;
 		stroke: none;
 	}
 }
@@ -206,10 +208,6 @@
 	stroke-dasharray:  4,2; // parameter needed for the type of the dashes
 }
 
-.sapMRb.sapMRbRo.sapMRbSel .sapMRbBInn {
-	fill: @sapUiContentNonInteractiveIconColor;
-}
-
 html[data-sap-ui-browser^="sf"] {
 	// fix for blur caused by drop-shadow in Safari
 	.sapMRbHoverable:hover {

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

@@ -9,18 +9,13 @@
 @_sap_m_RangeSlider_Handle_Width_Compact: 1.5rem;
 
 .sapMRangeSlider.sapMSlider .sapMSliderInner {
-	&:not(.sapMSliderInnerDisabled):hover>.sapMSliderHandle {
+	&:not(.sapMSliderInnerDisabled).sapMSliderProgress:hover ~ .sapMSliderHandle,
+	.sapMSliderHandle:hover  {
 		border: 1px @sapContent_FocusStyle @sapUiSliderHoverHandleBorderColor;
 		background: @sapUiSliderRangeHandleBackground;
 		box-shadow: @sapUiContentSelectedShadow;
 	}
 
-	&:not(.sapMSliderInnerDisabled) .sapMSliderHandle:hover {
-		background-color: @sapUiSliderRangeHandleBackground;
-		border-color: @sapUiSliderHoverHandleBorderColor;
-		box-shadow: @sapUiContentSelectedShadow;
-	}
-
 	&:not(.sapMSliderInnerDisabled) .sapMSliderHandle.sapMSliderHandlePressed {
 		&:not(:focus) {
 			background: transparent;

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

@@ -8,7 +8,6 @@
 // ==========================================================================
 
 @_sap_m_SearchField_Height: 2.75rem;
-@_sap_m_SearchField_FormHeight: 2.25rem;
 @_sap_m_SearchField_ButtonSize: 2.25rem;
 @_sap_m_SearchField_ButtonFontSize: 1rem;
 @_sap_m_SearchField_CompactButtonLineHeight: 1.625rem;
@@ -58,7 +57,6 @@
 }
 
 .sapMSF:not(.sapMSFDisabled):hover .sapMSFF {
-	box-shadow: @sapUiContentInteractionShadow;
 	background-color: @sapUiFieldHoverBackground;
 }
 

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

@@ -14,7 +14,7 @@
 /* IconOnly Hover */
 
 .sapMSlt.sapMSltIconOnly.sapMSltHoverable:hover:not(.sapMSltState) {
-	background: @sapUiButtonLiteHoverBackground;
+	background: @sapUiFieldHoverBackground;
     border: none;
 
 	&.sapMSltWithIcon {
@@ -44,24 +44,22 @@
 .sapMSlt {
     font-family: @sapFontFamily;
     font-size: @sapFontSize;
-	height: 2.25rem;
+	height: @sapUiElementHeight;
     border: none;
     background-image: linear-gradient(0deg, @sapUiFieldBorderColor 0, @sapUiFieldBorderColor 100%);
     background-size: 100% @sapUiFieldBorderWidth;
     background-repeat: repeat-x;
     background-position: bottom;
+    box-shadow: @sapUiFieldShadow;
 }
 
 .sapUiSizeCompact .sapMSlt {
-	height: 1.625rem;
-}
-
-.sapMSlt > .sapMSltLabel {
-	line-height: 2.125rem;
+	height: @sapUiElementCompactHeight;
 }
 
-.sapMSltArrow {
-	line-height: 2rem;
+.sapMSlt > .sapMSltArrow {
+	line-height: 2.25rem;
+    background-color: transparent !important;
 }
 
 .sapMSlt:not(.sapMSltState).sapMSltPressed > .sapMSltArrow::before {
@@ -70,7 +68,7 @@
 
 .sapMSlt.sapMSltPressed,
 .sapMSltPressed > .sapMSltArrow {
-	background: @sapUiButtonLiteHoverBackground;
+	background: @sapUiFieldHoverBackground;
 }
 
 html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisabled):not(.sapMSltState):before {
@@ -89,7 +87,7 @@ html.sap-desktop .sapMSltIconOnly.focus:not(.sapMSltExpanded):not(.sapMSltDisabl
 .sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover {
 	background: @sapUiFieldHoverBackground;
     border-color: @sapUiFieldHoverBorderColor;
-    box-shadow: @sapUiContentInteractionShadow;
+    box-shadow: @sapUiFieldHoverShadow;
 
 	.sapMSltArrow {
 		border-radius: @sapUiFieldBorderCornerRadius;
@@ -129,7 +127,7 @@ div.sapMSltPicker .sapMSltPickerValueState {
 }
 
 .sapUiSizeCompact .sapMSlt > .sapMSltArrow {
-	line-height: 1.375rem;
+	line-height: 1.625rem;
 }
 
 .sapMSltMinWidth {
@@ -142,7 +140,7 @@ div.sapMSltPicker .sapMSltPickerValueState {
 
 .sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover {
     border:none;
-    box-shadow: @sapUiContentInteractionShadow;
+    box-shadow: @sapUiFieldHoverShadow;
 	border: none;
     background-image: linear-gradient(0deg, @sapUiFieldBorderColor 0, @sapUiFieldBorderColor 100%);
     background-size: 100% @sapUiFieldBorderWidth;
@@ -152,34 +150,31 @@ div.sapMSltPicker .sapMSltPickerValueState {
 
 .sapMSltPressed:not(.sapMSltDisabled):not(.sapMSltState),
 .sapMSlt.sapMSltFocused:not(.sapMSltDisabled):not(.sapMSltState) {
-    background: @sapUiFieldFocusBackground;
+	background: @sapUiFieldBackground;
     border: none;
-    box-shadow: inset 0px 0px 0px @sapUiContentFocusWidth @sapUiFieldActiveBorderColor;
+    &:not(.sapMSltExpanded) {
+        box-shadow: inset 0px 0px 0px @sapUiContentFocusWidth @sapUiFieldActiveBorderColor;
+    }
 }
 
 .sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):active {
     border:none;
-    box-shadow: inset 0px 0px 0px 2px @sapUiFieldActiveBorderColor;
 }
 
 .sapMSltArrow {
-    width: 2rem;
-    height: 2rem;
-    margin-top: 2px;
-    margin-right: 2px;
+    width: 2.25rem;
+    height: 2.25rem;
 }
 
 .sapUiSizeCompact .sapMSltArrow {
     width: 2rem;
-    margin-top: 2px;
-    height: 1.375rem;
-    margin-right: 2px;
+    height: 1.625rem;
 }
 
-.sapMSltPressed >.sapMSltArrow {
+.sapMSltPressed >.sapMSltArrow,
+.sapMSlt:hover > .sapMSltArrow {
     background-color: @sapUiButtonActiveBackground;
-    color: @sapUiButtonActiveTextColor;
-    box-shadow: @sapUiContentInteractionShadow;
+    box-shadow: @sapUiFieldHoverShadow;
     overflow: none;
     border-radius: 0.125rem;
 }
@@ -202,15 +197,16 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
     background-repeat: repeat-x;
     background-position: bottom;
     background-color: @sapUiFieldInformationBackground;
+    box-shadow: @sapUiFieldInformationShadow;
 }
 
 .sapMSltInformation.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
     border-color: @sapUiFieldInformationColor;
-    box-shadow: @sapUiContentInformativeShadow;
+    box-shadow: @sapUiFieldHoverInformationShadow;
     background-color: @sapUiFieldHoverBackground;
 
     &:not(.sapMSltFocused) {
-        box-shadow: @sapUiContentInformativeShadow; // NEW Parameter
+        box-shadow: @sapUiFieldHoverInformationShadow; // NEW Parameter
     }
 }
 
@@ -224,7 +220,7 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
 .sapMSltInformation.sapMSltPressed {
     .sapMSltArrow {
         color: @sapUiButtonSelectedTextColor;
-        box-shadow: @sapUiContentInformativeShadow;
+        box-shadow: @sapUiFieldHoverInformationShadow;
     }
     > .sapMSltArrow::before {
         color: inherit;
@@ -242,15 +238,16 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
     background-repeat: repeat-x;
     background-position: bottom;
     background-color: @sapUiFieldSuccessBackground;
+    box-shadow: @sapUiFieldSuccessShadow;
 }
 
 .sapMSltSuccess.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover  {
     border-color: @sapUiFieldSuccessColor;
-    box-shadow: @sapUiContentPositiveShadow;
+    box-shadow: @sapUiFieldHoverSuccessShadow;
     background-color: @sapUiFieldHoverBackground;
 
     &:not(.sapMSltFocused) {
-        box-shadow: @sapUiContentPositiveShadow; // New Parameter
+        box-shadow: @sapUiFieldHoverSuccessShadow; // New Parameter
     }
 }
 
@@ -266,7 +263,7 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
 .sapMSltSuccess.sapMSltPressed {
     .sapMSltArrow {
         color: @sapUiButtonAcceptSelectedTextColor;
-        box-shadow: @sapUiContentPositiveShadow;
+        box-shadow: @sapUiFieldHoverSuccessShadow;
     }
     > .sapMSltArrow::before {
         color: inherit;
@@ -284,15 +281,16 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
     background-repeat: repeat-x;
     background-position: bottom;
     background-color: @sapUiFieldWarningBackground;
+    box-shadow: @sapUiFieldWarningShadow;
 }
 
 .sapMSltWarning.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
     border-color: @sapUiFieldWarningColor;
-    box-shadow: @sapUiContentCriticalShadow;
+    box-shadow: @sapUiFieldHoverWarningShadow;
     background-color: @sapUiFieldHoverBackground;
 
     &:not(.sapMSltFocused) {
-        box-shadow: @sapUiContentCriticalShadow; // NEW Parameter
+        box-shadow: @sapUiFieldHoverWarningShadow; // NEW Parameter
     }
 }
 
@@ -307,7 +305,7 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
 .sapMSltWarning.sapMSltPressed {
     .sapMSltArrow {
         color: @sapUiButtonAttentionSelectedTextColor;
-        box-shadow: @sapUiContentCriticalShadow;
+        box-shadow: @sapUiFieldHoverWarningShadow;
     }
     > .sapMSltArrow::before {
         color: inherit;
@@ -325,15 +323,16 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
     background-repeat: repeat-x;
     background-position: bottom;
     background-color: @sapUiFieldInvalidBackgroundStyle;
+    box-shadow: @sapUiFieldInvalidShadow;
 }
 
 .sapMSltError.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
     border-color: @sapUiFieldInvalidColor;
-    box-shadow: @sapUiContentNegativeShadow;
+    box-shadow: @sapUiFieldHoverInvalidShadow;
     background-color: @sapUiFieldHoverBackground;
 
     &:not(.sapMSltFocused) {
-        box-shadow: @sapUiContentNegativeShadow; // NEW Parameter
+        box-shadow: @sapUiFieldHoverInvalidShadow; // NEW Parameter
     }
 }
 
@@ -348,7 +347,7 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
 .sapMSltError.sapMSltPressed {
     .sapMSltArrow {
         color: @sapUiFieldInvalidColor;
-        box-shadow: @sapUiContentNegativeShadow;
+        box-shadow: @sapUiFieldHoverInvalidShadow;
     }
     > .sapMSltArrow::before {
         color: inherit;

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

@@ -18,6 +18,11 @@
 	}
 }
 
+.sapMSlider {
+	display: flex;
+	align-items: center;
+}
+
 .sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
 	font-family: SAP-icons;
 	content: "\e29c";
@@ -37,7 +42,8 @@
 	}
 }
 
-.sapMSliderInner:not(.sapMSliderInnerDisabled):not(.sapMSliderPressed):hover>.sapMSliderHandle {
+.sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderProgress:hover ~ .sapMSliderHandle,
+.sapMSliderHandle:hover {
 	&:not(:focus) {
 		border-color: @sapUiSliderHoverHandleBorderColor;
 		background: @sapUiSliderHoverHandleBackground;

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

@@ -3,9 +3,16 @@
 /* Evening Horizon theme           */
 /* =============================== */
 
-/* uses sapMInputBase styles */
-@_sapMTextAreaPadding: 0.5rem 0.625rem;
-@_sapMTextAreaValueStatePadding: 0.4375rem 0.625rem;
+@_sapMTextAreaPadding: 0.5rem 0.625rem 0.4375rem;
+@_sapMTextAreaPadding_Compact: 0.1875rem 0.5rem 0.125rem;
+@_sapMTextAreaReadonlyPadding: 0.4375rem 0.625rem 0.375rem;
+@_sapMTextAreaReadonlyPadding_Compact: 0.125rem 0.5rem 0.0625rem;
+@_sapMTextAreaValueStateSuccessPadding: 0.5rem 0.625rem 0.4375rem;
+@_sapMTextAreaValueStateSuccessPadding_Compact: 0.1875rem 0.5rem 0.125rem;
+@_sapMTextAreaValueStateInformationPadding: 0.5rem 0.625rem 0.4375rem;
+@_sapMTextAreaValueStateInformationPadding_Compact: 0.1875rem 0.5rem 0.125rem;
+@_sapMTextAreaValueStateErrorWarningPadding: 0.5rem 0.625rem 0.4375rem;
+@_sapMTextAreaValueStateErrorWarningPadding_Compact: 0.1875rem 0.5rem 0.125rem;
 
 .sapMInputBase.sapMTextArea {
 	min-height: 2.25rem;
@@ -13,21 +20,26 @@
 
 /* Text Area General */
 .sapMFocus.sapMTextArea .sapMInputBaseContentWrapper .sapMInputBaseInner {
-	outline-style: solid;
-	outline-width: 2px;
+	outline: none;
 }
 
-/* Text Area Warning */
-.sapMFocus.sapMTextArea .sapMInputBaseContentWrapperWarning > .sapMInputBaseInner {
-	outline-color: @sapField_WarningColor;
+.sapMInputBase.sapMTextArea .sapMTextAreaInner {
+	line-height: 1.5;
 }
 
-/* Text Area Error */
-.sapMFocus.sapMTextArea .sapMInputBaseContentWrapperError > .sapMInputBaseInner {
-	outline-color: @sapField_InvalidColor;
+.sapMTextAreaMirror {
+	line-height: 1.5;
 }
 
-/* Text Area Success */
-.sapMFocus.sapMTextArea .sapMInputBaseContentWrapperSuccess > .sapMInputBaseInner {
-	outline-color: @sapField_SuccessColor;
+.sapMTextArea.sapMInputBaseReadonly .sapMInputBaseReadonlyWrapper {
+	border: @sapUiFieldBorderWidth dashed @sapUiFieldReadOnlyBorderColor;
+}
+
+.sapMFocus.sapMTextArea.sapMInputBase.sapMInputBaseReadonly .sapMInputBaseContentWrapper {
+	&::before {
+		top: 1px;
+		left: 1px;
+		right: 1px;
+		bottom: 1px;
+	}
 }

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

@@ -0,0 +1,12 @@
+/* ======================================== */
+/* CSS for control sap.m/Title  			*/
+/* Evening Horizon theme               		*/
+/* ======================================== */
+
+.sapFFCL .sapFDynamicPage-Std-Desktop-XL .sapFDynamicPageTitleMain .sapFDynamicPageTitleMainInner .sapFDynamicPageTitleMainHeading .sapFDynamicPageTitleMainHeadingInner .sapMTitle:not(.sapUICompVarMngmtTitle),
+.sapFFCL .sapFDynamicPage-Std-Desktop .sapFDynamicPageTitleMain .sapFDynamicPageTitleMainInner .sapFDynamicPageTitleMainHeading .sapFDynamicPageTitleMainHeadingInner .sapMTitle:not(.sapUICompVarMngmtTitle),
+.sapFFCL .sapFDynamicPage-Std-Tablet .sapFDynamicPageTitleMain .sapFDynamicPageTitleMainInner .sapFDynamicPageTitleMainHeading .sapFDynamicPageTitleMainHeadingInner .sapMTitle:not(.sapUICompVarMngmtTitle),
+.sapFFCL .sapFDynamicPage-Std-Phone .sapFDynamicPageTitleMain .sapFDynamicPageTitleMainInner .sapFDynamicPageTitleMainHeading .sapFDynamicPageTitleMainHeadingInner .sapMTitle:not(.sapUICompVarMngmtTitle) {
+	font-size: @sapObjectHeader_Title_SnappedFontSize;
+	font-family: @sapFontBlackFamily;
+}

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

@@ -10,68 +10,75 @@
 @_sap_m_Token_TokenCompactSize: @sapMFontSmallSize  + @_sap_m_Token_TokenCompactPadding;
 
 .sapMToken {
-	overflow: visible;
 	padding-left: @_sap_m_Token_LeftPadding;
+	border-radius: 0.375rem;
+	color: @sapTextColor;
+	font-size: @sapFontSize;
 }
 
-.sapMTokenSelected:not(:focus),
+.sapMTokenSelected,
 .sapMToken.sapMTokenReadOnly.sapMTokenSelected {
 	background: @sapUiButtonSelectedBackground;
 	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedBorderColor;
-	border-radius: @sapUiButtonBorderCornerRadius;
+	border-radius: 0.375rem;
+	font-family: @sapFontSemiboldDuplexFamily;
+}
+
+.sapMToken.sapMTokenSelected::before {
+	content: '';
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 2px;
+	background-color: @sapUiButtonSelectedBorderColor;
 }
 
 html.sap-desktop .sapMToken:not(.sapMTokenSelected):not(.sapMTokenReadOnly):not(:focus):hover {
-	background: @sapUiButtonTokenBackground;
-	border: 1px solid @sapUiButtonTokenBorderColor;
-	border-radius: @sapUiButtonBorderCornerRadius;
-	box-shadow: @sapUiContentInteractionShadow;
+	background: @sapUiButtonHoverBackground;
+	border: @sapUiButtonBorderWidth solid @sapUiButtonTokenBorderColor;
+	border-radius: 0.375rem;
 }
 
 html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
-	background: @sapUiButtonSelectedBackground;
+	background: @sapUiButtonSelectedHoverBackground;
 	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedBorderColor;
-	border-radius: @sapUiButtonBorderCornerRadius;
 }
 
-html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):not(:focus):hover {
-	box-shadow: @sapUiContentInteractionShadow;
-}
+.sapMToken.sapMTokenReadOnly {
+	padding: 0.25rem 0.3125rem;
+	color: @sapUiContentLabelColor;
 
-.sapMToken.sapMTokenReadOnly,
-.sapMToken.sapMTokenReadOnly.sapMTokenSelected {
-	color: @sapUiContentLabelColor
+	.sapMTokenText {
+		line-height: 1rem;
+	}
 }
 
 html.sap-desktop .sapMToken:focus {
-	outline: none;
-}
-
-html.sap-desktop .sapMToken:focus::after {
-	content: '';
-	position: absolute;
-	pointer-events: none;
-	z-index: 2;
-	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiFieldActiveBorderColor;
-	border-radius: 0.625rem;
-	top: -0.25rem;
-	bottom: -0.25rem;
-	left: -0.25rem;
-	right: -0.25rem;
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiFieldActiveBorderColor;
+	border-radius: 0.5rem;
+	outline-offset: 0.0625rem;
 }
 
 html.sap-desktop .sapMToken:not(.sapMTokenSelected):not(.sapMTokenReadOnly):focus:hover {
 	border: @sapUiButtonBorderWidth solid @sapUiButtonTokenBorderColor;
 }
 
-html.sap-desktop .sapUiSizeCompact .sapMToken:focus::after,
-html.sap-desktop .sapUiSizeCondensed .sapMToken:focus::after {
-	top: -0.125rem;
-	bottom: -0.125rem;
-	left: -0.125rem;
-	right: -0.125rem;
+html.sap-desktop .sapUiSizeCompact .sapMToken:focus,
+html.sap-desktop .sapUiSizeCondensed .sapMToken:focus {
+	outline-offset: 0;
+}
+
+html.sap-desktop .sapUiSizeCondensed .sapMToken:focus {
+	outline-width: 1px;
 }
 
-html.sap-desktop .sapMToken.sapMTokenSelected:focus {
-	color: @sapUiButtonSelectedTextColor;
+.sapUiSizeCompact .sapMToken.sapMTokenReadOnly {
+	padding: 0.125rem 0.25rem;
+
+	.sapMTokenText {
+		line-height: 0.875rem;
+	}
 }

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

@@ -28,12 +28,19 @@ html.sap-desktop .sapMTokenizer:focus {
 
 /* editable tokens in read-only tokenizer */
 .sapMTokenizer.sapMTokenizerReadonly .sapMToken {
-		color: @sapUiContentLabelColor;
+	color: @sapUiContentLabelColor;
+}
+
+.sapMTokenizer.sapMTokenizerReadonly .sapMToken.sapMTokenReadOnly {
+	padding: 0.25rem 0.3125rem;
 }
 
 .sapUiSizeCompact {
 	.sapMTokenizer {
 		padding-left: 0.25rem;
+		&.sapMTokenizerReadonly .sapMToken.sapMTokenReadOnly {
+			padding: 0.125rem 0.25rem;
+		}
 		.sapMToken {
 			margin-right: 0.25rem;
 		}
@@ -82,5 +89,4 @@ html.sap-desktop .sapMTokenizer:focus {
 .sapMTokenizer.sapMTokenizerReadonly .sapMTokenizerIndicator,
 .sapMTokenizer .sapMTokenizerIndicator {
 	color: @sapLinkColor;
-	font-weight: bold;
 }