@openui5/themelib_sap_horizon 1.100.0 → 1.102.1

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

@@ -3,20 +3,14 @@
 /* Evening Horizon theme         */
 /* ============================= */
 
-@_sap_m_Switch_OffBackground: lighten(@sapUiButtonBackground, 3);
-@_sap_m_Switch_OffBorderColor: @sapUiButtonBorderColor;
-
 /* ------------------------------ */
 /* Switch container               */
 /* ------------------------------ */
 
 .sapMSwtCont {
 	overflow: hidden;
-	//in order to have a touchable area of 2.75rem
-	padding-top: 0.6875rem;
-	padding-bottom: 0.6875rem;
-	padding-left: 0.125rem;
-	width: 4.125rem;
+	//in order to have a touchable area of 2.75rem height and 3.5rem width
+	padding: 0.625rem 0.5rem;
 }
 
 /* focus */
@@ -26,21 +20,16 @@ html.sap-desktop {
 		content: " ";
 		position: absolute;
 		display: block;
-		top: -0.375rem;
-		left: -0.0625rem;
-		bottom: -0.375rem;
-		right: -0.0625rem;
-		outline: 0.125rem solid @sapUiContentFocusColor;
-		border-radius: 0.25rem;
+		top: -0.3125rem;
+		left: -0.3125rem;
+		bottom: -0.3125rem;
+		right: -0.3125rem;
+		border: 0.125rem solid @sapUiContentFocusColor;
+		border-radius: 1rem;
 	}
 	.sapUiSizeCompact {
 		.sapMSwtCont:focus > .sapMSwt:before {
-			top: -0.15rem;
-			bottom: -0.15rem;
-			border-radius: 0.25rem;
-		}
-		.sapMSwtCont:focus > .sapMSwt.sapMSwtAcceptReject:before {
-			bottom: -0.2rem;
+			border-radius: 0.875rem;
 		}
 	}
 }
@@ -50,27 +39,30 @@ html.sap-desktop {
 /* ------------------------------ */
 
 .sapMSwt {
-	width: 3.75rem;
-	height: 1.25rem;
+	width: 2.875rem;
+	height: 1.5rem;
 	overflow: visible;
 	border: none;
-	border-top-left-radius: 0.75rem;
-	border-top-right-radius: 0.75rem;
-	border-bottom-right-radius: 0.75rem;
-	border-bottom-left-radius: 0.75rem;
-	&.sapMSwtNoLabel {
-		width: 3.25rem;
-		height: 1.25rem;
+	margin: 0;
+	border-radius: 0.75rem;
+	&.sapMSwtNoLabel,
+	&.sapMSwtAcceptReject {
+		width: 2.5rem;
+		height: 1.5rem;
+		.sapMSwtText {
+			&.sapMSwtTextOn {
+				left: 1.8rem;
+			}
+			&.sapMSwtTextOff {
+				left: 2rem;
+			}
+		}
 		&.sapMSwtOn .sapMSwtHandle {
 			left: 1.5rem;
 		}
 	}
 }
 
-.sapMSwtOff:not(.sapMSwtAcceptReject) {
-	background: @_sap_m_Switch_OffBackground;
-}
-
 /* disabled */
 
 .sapMSwtDisabled {
@@ -81,20 +73,23 @@ html.sap-desktop {
 /* Text                           */
 /* ------------------------------ */
 .sapMSwtText {
-	line-height: 1.25rem;
+	line-height: 1.5rem;
 	width: 1.75rem;
 	&.sapMSwtTextOn {
-		margin: 0 0 0 0.125rem;
-		color: @sapUiButtonTrackSelectedTextColor;
+		color: @sapUiButtonHandleSelectedTextColor;
+		left: 2.125rem;
+		z-index: 1;
 	}
 	&.sapMSwtTextOff {
-		margin: 0 0.125rem 0 0;
-		color: @sapUiButtonTrackTextColor;
-		left: 3.8rem;
+		color: @sapUiButtonHandleTextColor;
+		left: 2.125rem;
+		z-index: 1;
 	}
 	.sapMSwtLabel {
-		height: 1.25rem;
+		height: 1.5rem;
+		line-height: 1.375rem;
 		padding: 0;
+		font-family: "72-Condensed-Bold" , "72" , "72full" , Arial, Helvetica, sans-serif;
 	}
 }
 
@@ -102,30 +97,44 @@ html.sap-desktop {
 /* Switch handler                 */
 /* ------------------------------ */
 
-.sapMSwtOn .sapMSwtHandle,
-.sapMSwtOff .sapMSwtHandle {
-	height: 1.875rem;
-	width: 1.875rem;
-	border-top-left-radius: 1rem;
-	border-top-right-radius: 1rem;
-	border-bottom-right-radius: 1rem;
-	border-bottom-left-radius: 1rem;
+.sapMSwt .sapMSwtHandle {
+	height: 1.25rem;
+	width: 1.75rem;
+	border-radius: 1rem;
 	border: @sapUiButtonBorderWidth solid;
-	left: 1.9375rem;
+	left: 2.0625rem;
+}
+
+.sapMSwt.sapMSwtOn .sapMSwtHandle {
+	left: 2.1875rem;
+}
+
+.sapUiSizeCompact .sapMSwt .sapMSwtHandle,
+.sapMSwtCont .sapMSwt.sapMSwtNoLabel.sapMSwtOn .sapMSwtHandle,
+.sapMSwtCont .sapMSwt.sapMSwtAcceptReject.sapMSwtOn .sapMSwtHandle {
+	left: 2.0625rem;
+}
+
+.sapMSwt.sapMSwtNoLabel .sapMSwtHandle,
+.sapMSwt.sapMSwtAcceptReject .sapMSwtHandle {
+	width: 1.5rem;
 }
 
 //on
 .sapMSwt.sapMSwtOn:not(.sapMSwtAcceptReject) {
 	background: @sapUiButtonTrackSelectedBackground;
+	border: 0.0625rem solid @sapUiButtonTrackSelectedBorderColor;
+	box-sizing: border-box;
 	.sapMSwtHandle {
-		box-sizing: border-box;
-		background: @sapUiButtonSelectedBackground;
-		border-color: @sapUiButtonSelectedBorderColor;
+		background: @sapUiButtonHandleSelectedBackground;
+		border: 0.125rem solid @sapUiButtonHandleSelectedBorderColor;
 	}
 	&.sapMSwtHoverable:not(.sapMSwtAcceptReject):hover {
-		background: @sapUiButtonTrackSelectedBackground;
+		background: @sapUiButtonTrackSelectedHoverBackground;
+		border: 0.0625rem solid @sapUiButtonTrackSelectedHoverBorderColor;
 		.sapMSwtHandle {
-			box-shadow: @sapContent_Selected_Shadow;
+			background: @sapUiButtonHandleSelectedHoverBackground;
+			box-shadow: 0 0 0 0.125rem @sapUiButtonHandleSelectedHoverBorderColor;
 		}
 	}
 }
@@ -133,13 +142,18 @@ html.sap-desktop {
 //off
 .sapMSwt.sapMSwtOff:not(.sapMSwtAcceptReject) {
 	background: @sapUiButtonTrackBackground;
+	border: 0.0625rem solid @sapUiButtonTrackBorderColor;
+	box-sizing: border-box;
 	.sapMSwtHandle {
-		background: @sapUiButtonSelectedBackground;
-		border-color: @sapUiContentForegroundBorderColor;
+		background: @sapUiButtonHandleBackground;
+		border: 0.125rem solid @sapUiButtonHandleBorderColor;
 	}
 	&.sapMSwtHoverable:not(.sapMSwtAcceptReject):hover {
+		background: @sapUiButtonTrackHoverBackground;
+		border: 0.0625rem solid @sapUiButtonTrackHoverBorderColor;
 		.sapMSwtHandle {
-			box-shadow: @sapContent_Interaction_Shadow;
+			background: @sapUiButtonHandleHoverBackground;
+			box-shadow: 0 0 0 0.125rem @sapUiButtonHandleHoverBorderColor;
 		}
 	}
 }
@@ -153,30 +167,39 @@ html.sap-desktop {
 /* ------------------------------ */
 
 .sapMSwtAcceptReject.sapMSwt {
-	background: @_sap_m_Switch_OffBackground;
 	//on
 	&.sapMSwtOn {
-		background: darken(@sapUiSuccessBG, 14);
+		background: @sapUiButtonTrackPositiveBackground;
+		border: 0.0625rem solid @sapUiButtonTrackPositiveBorderColor;
+		box-sizing: border-box;
 		.sapMSwtHandle {
-			background: @sapUiButtonSelectedBackground;
-			border-color: @sapUiSuccessBorder;
+			background: @sapUiButtonHandlePositiveBackground;
+			border: 2px solid @sapUiButtonHandlePositiveBorderColor;
 		}
 		&.sapMSwtHoverable:hover {
+			background: @sapUiButtonTrackPositiveHoverBackground;
+			border: 0.0625rem solid @sapUiButtonTrackPositiveHoverBorderColor;
 			.sapMSwtHandle {
-				box-shadow: @sapContent_Positive_Shadow;
+				background: @sapUiButtonHandlePositiveHoverBackground;
+				box-shadow: 0 0 0 0.125rem @sapUiButtonHandlePositiveHoverBorderColor;
 			}
 		}
 	}
 	//off
 	&.sapMSwtOff {
-		background: darken(@sapUiErrorBG, 6);
+		background: @sapUiButtonTrackNegativeBackground;
+		border: 0.0625rem solid @sapUiButtonTrackNegativeBorderColor;
+		box-sizing: border-box;
 		.sapMSwtHandle {
-			background: @sapUiButtonSelectedBackground;
-			border-color: @sapUiErrorBorder;
+			background: @sapUiButtonHandleNegativeBackground;
+			border: 2px solid @sapUiButtonHandleNegativeBorderColor;
 		}
 		&.sapMSwtHoverable:hover {
+			background: @sapUiButtonTrackNegativeHoverBackground;
+			border: 0.0625rem solid @sapUiButtonTrackNegativeHoverBorderColor;
 			.sapMSwtHandle {
-				box-shadow: @sapContent_Negative_Shadow;
+				background: @sapUiButtonHandleNegativeHoverBackground;
+				box-shadow: 0 0 0 0.125rem @sapUiButtonHandleNegativeHoverBorderColor;
 			}
 		}
 	}
@@ -186,31 +209,61 @@ html.sap-desktop {
 /* Switch handler                 */
 /* ------------------------------ */
 
-/*  Workaround for a WebKit bug that causes a rendering issue. @link https://bugs.webkit.org/show_bug.cgi?id=21819
-
-	Affected platforms:
-	BlackBerry 10 Z30 device. */
-
 .sapMSwtAcceptReject .sapMSwtWebKit537-35.sapMSwtHandle {
 	border: none;
 }
 
-.sapMSwtAcceptReject.sapMSwtOn .sapMSwtWebKit537-35.sapMSwtHandle {
-	box-shadow: @sapContent_Positive_Shadow;
-}
-
-.sapMSwtAcceptReject.sapMSwtOff .sapMSwtWebKit537-35.sapMSwtHandle {
-	box-shadow: @sapContent_Negative_Shadow;
-}
-
 .sapMSwt.sapMSwtAcceptReject.sapMSwtOn .sapMSwtLabel {
 	color: @sapPositiveTextColor;
-	font-size: @sapFontSmallSize;
 }
 
 .sapMSwt.sapMSwtAcceptReject.sapMSwtOff .sapMSwtLabel {
 	color: @sapNegativeTextColor;
-	font-size: @sapFontSmallSize;
+}
+
+.sapMSwtOn.sapMSwtNoLabel .sapMSwtLabelOn::before {
+	font-family: @sapUiContentIconFontFamily;
+	content: "\e05b";
+	position: absolute;
+	right: 0.375rem;
+	overflow: hidden;
+	vertical-align: middle;
+	font-size: @sapMFontLargeSize;
+	color: @sapUiButtonHandleSelectedTextColor;
+}
+
+.sapMSwtOff.sapMSwtNoLabel .sapMSwtLabelOff::before {
+	font-family: @sapUiContentIconFontFamily;
+	content: "\e069";
+	position: absolute;
+	right: 0.5rem;
+	overflow: hidden;
+	vertical-align: middle;
+	font-size: @sapMFontLargeSize;
+	color: @sapUiButtonHandleTextColor;
+}
+
+.sapMSwtOn.sapMSwtAcceptReject .sapMSwtLabelOn::before,
+.sapMSwtOff.sapMSwtAcceptReject .sapMSwtLabelOff::before {
+	position: absolute;
+	right: 0.375rem;
+	font-size: @sapMFontLargeSize;
+}
+
+.sapMSwtOff.sapMSwtAcceptReject .sapMSwtLabelOff::before {
+	right: 0.625rem;
+}
+
+.sapMSwtOn > .sapMSwtInner {
+	left: -1.25rem;
+}
+
+.sapMSwtOn .sapMSwtTextOff {
+	display: none;
+}
+
+.sapMSwtOff .sapMSwtTextOn {
+	display: none;
 }
 
 /* ------------------------------ */
@@ -219,74 +272,64 @@ html.sap-desktop {
 
 .sapUiSizeCompact {
 	.sapMSwtCont {
-		width: 3.75rem;
-	  //in order to have a touchable area of 2rem
-		padding-top: 0.3125rem;
-		padding-bottom: 0.3125rem;
+		//in order to have a touchable area of 2rem height and 3rem width
+		padding-top: 0.375rem;
+		padding-bottom: 0.375rem;
 		.sapMSwt {
-			width: 3.375rem;
+			width: 2.75rem;
 			height: 1.25rem;
-			&.sapMSwtNoLabel {
-				width: 2.5rem;
-				height: 1rem;
-				margin-top: 0.0625rem;
-				margin-bottom: 0.0625rem;
-				&.sapMSwtOn .sapMSwtHandle {
-					left: 1rem;
-				}
-			}
 			.sapMSwtHandle {
-				height: 1.625rem;
-				width: 1.625rem;
-				left: 1.88rem;
+				height: 1rem;
+				width: 1.75rem;
 			}
 			.sapMSwtText {
 				line-height: 1.25rem;
+				&.sapMSwtTextOn {
+					left: 2.0625rem;
+				}
 				&.sapMSwtTextOff {
-					left: 3.5rem;
+					left: 2.0625rem;
 				}
 				.sapMSwtLabel {
 					width: 1.75rem;
+					line-height: 1.125rem;
+				}
+			}
+			.sapMSwtOn .sapMSwtHandle {
+				left: 2.125rem;
+			}
+			&.sapMSwtNoLabel,
+			&.sapMSwtAcceptReject {
+				width: 2rem;
+				height: 1.25rem;
+				.sapMSwtHandle {
+					width: 1.25rem;
+				}
+				&.sapMSwtOn .sapMSwtHandle{
+					left: 1.88rem;
+				}
+				.sapMSwtText {
+					&.sapMSwtTextOn {
+						left: 1.325rem;
+					}
+					&.sapMSwtTextOff {
+						left: 1.625rem;
+					}
+				}
+				&.sapMSwtOn .sapMSwtHandle {
+					left: 1.8125rem;
 				}
 			}
 		}
 	}
-}
-.sapMSwtCont .sapMSwt.sapMSwtNoLabel.sapMSwtOn .sapMSwtHandle {
-	left: 1.9375rem;
-}
-
-.sapMSwtCont .sapMSwt.sapMSwtNoLabel {
-	width: 3.75rem;
-}
-
-.sapUiSizeCompact .sapMSwtCont .sapMSwt.sapMSwtNoLabel.sapMSwtOn .sapMSwtHandle {
-	left: 1.88rem;
-}
-
-.sapUiSizeCompact .sapMSwtCont .sapMSwt.sapMSwtNoLabel {
-	width: 3.375rem;
-	height: 1.25rem;
-}
-
-.sapMSwtOn.sapMSwtNoLabel .sapMSwtLabelOn::before {
-	font-family: SAP-icons;
-	content: "\e05b";
-	position: absolute;
-	right: 0.375rem;
-	overflow: hidden;
-	vertical-align: middle;
-	font-size: 0.875rem;
-	color: @sapButton_Track_Selected_TextColor;
-}
-
-.sapMSwtOff.sapMSwtNoLabel .sapMSwtLabelOff::before {
-	font-family: SAP-icons;
-	content: "\e069";
-	position: absolute;
-	right: 0.5rem;
-	overflow: hidden;
-	vertical-align: middle;
-	font-size: 0.875rem;
-	color: @sapButton_Track_TextColor;
+	.sapMSwtOn.sapMSwtNoLabel .sapMSwtLabelOn::before,
+	.sapMSwtOn.sapMSwtAcceptReject .sapMSwtLabelOn::before,
+	.sapMSwtOff.sapMSwtNoLabel .sapMSwtLabelOff::before,
+	.sapMSwtOff.sapMSwtAcceptReject .sapMSwtLabelOff::before {
+		font-size: @sapMFontMediumSize;
+		right: 0.3125rem;
+	}
+	.sapMSwtOff.sapMSwtAcceptReject .sapMSwtLabelOff::before {
+		right: 0.4375rem;
+	}
 }

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

@@ -29,16 +29,22 @@
 				padding: 0 0 0 0.5rem;
 				border-bottom: 0;
 				margin-right: 0.5rem;
+				.sapMTabStripItemLabel {
+					font-family: @sapFontBoldFamily;
+				}
 				&:last-child {
 					margin-right: 0;
 				}
 				&:hover {
-					color: @_sap_m_TabStrip_ItemHoverTextColor;
-					background-color: @sapUiListHoverBackground;
+					color: @sapTextColor;
+					background-color: @sapList_Hover_Background;
 				}
 				&.sapMTabStripItemSelected {
-					color: @sapUiSelected;
-					background: @sapUiListBackground;
+					color: @sapContent_Selected_ForegroundColor;
+					background: @sapList_Background;
+					.sapMTabStripItemLabel {
+						font-family: @sapFontBoldFamily;
+					}
 				}
 				.sapMTSItemCloseBtnCnt {
 					width: 2rem;
@@ -77,6 +83,9 @@
 
 .sapMTabStrip .sapMTSTabsContainer .sapMTSTabs .sapMTabStripItem:focus::before {
 	top: 0.25rem;
+	left: 0;
+	right: 0;
+	bottom: 0;
 	border-radius: 0.25rem;
 	border: 0.125rem solid @sapUiContentFocusColor;
 }
@@ -96,8 +105,8 @@
 					padding: 0 2rem 0 0.5rem;
 				}
 				&.sapMTabStripItemSelected {
-					color: @sapUiSelected;
-					background: @sapUiListBackground;
+					color: @sapContent_Selected_ForegroundColor;
+					background: @sapList_Background;
 					padding: 0 2rem 0 0.5rem;
 				}
 				.sapMTSItemCloseBtnCnt {

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

@@ -25,10 +25,6 @@
 	border-top-color: transparent;
 }
 
-.sapMListTblCell {
-	padding: 0 0.5rem;
-}
-
 .sapMTableRowCustomFocus:focus > :not(.sapMListTblDummyCell:last-child)::before {
 	margin-right: 0; // Avoid gaps in the focus viszualization between the cells
 }
@@ -38,9 +34,21 @@
 .sapMListShowSeparatorsAll .sapMLIBShowSeparator:last-child > td.sapMListTblDummyCell,
 .sapMListShowSeparatorsAll .sapMListTblSubRow:last-child > td.sapMListTblDummyCell,
 :not(.sapMListHasGrowing):not(.sapMListShowSeparatorsInner):not(.sapMListShowSeparatorsNone) > .sapMTableTBody .sapMListTblRow:last-child > .sapMListTblDummyCell:last-child {
-    border-bottom: none;
+	border-bottom: none;
 }
 
 .sapMListTblDummyCell:last-child {
 	background-color: @sapUiListBackground;
+}
+
+/* overwrite text control styles */
+.sapUiSizeCompact .sapMListTblCell {
+	.sapMLnk,
+	.sapMText,
+	.sapMLabel,
+	.sapMObjectNumber,
+	.sapMObjectIdentifier,
+	.sapMObjStatus {
+		line-height: 1.5rem;
+	}
 }

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

@@ -8,4 +8,8 @@
 	min-height: 2.75rem; /* for empty text */
 	padding-top: 0.6875rem;
 	padding-bottom: 0.6875rem;
+}
+
+.sapMTB-Info-CTX > .sapMText {
+	font-style: italic;
 }

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

@@ -101,6 +101,6 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMToggleBtnPressed.sapMFo
 	border-radius: 0.5rem;
 }
 
-.sapMBtn:not(.sapMBtnDisabled):focus > span.sapMBtnInner.sapMBtnEmphasized.sapMToggleBtnPressed {
-	border-color: @sapUiContentContrastFocusColor;
+.sapUiSizeCompact .sapMBar-CTX .sapMBtnDefault.sapMBtnInner.sapMToggleBtnPressed:not(.sapMBtnDisabled) {
+	border-color: @sapUiButtonSelectedBorderColor;
 }

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

@@ -10,46 +10,32 @@
 @_sap_m_Token_TokenCompactSize: @sapMFontSmallSize  + @_sap_m_Token_TokenCompactPadding;
 
 .sapMToken {
-	background: @sapButton_TokenBackground;
-	border: 1px solid @sapButton_TokenBorderColor;
-	border-radius: @sapButton_BorderCornerRadius;
-	font-size: @sapMFontMediumSize;
-	padding-left: 0.3125rem;
-	color: @sapUiBaseText;
-}
-
-.sapMTokenText {
-	max-width: calc(~"100% - " @_sap_m_Token_TokenSize);
+	overflow: visible;
+	padding-left: @_sap_m_Token_LeftPadding;
 }
 
 .sapMTokenSelected:not(:focus),
 .sapMToken.sapMTokenReadOnly.sapMTokenSelected {
-	background: @sapUiButtonSelectedHoverBackground;
-	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedHoverBorderColor;
-	border-radius: @sapButton_BorderCornerRadius;
-	box-shadow: @sapContent_Selected_Shadow;
+	background: @sapUiButtonSelectedBackground;
+	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedBorderColor;
+	border-radius: @sapUiButtonBorderCornerRadius;
 }
 
-.sapMTokenSelected .sapMTokenIcon {
-	color: @sapUiButtonSelectedTextColor;
+html.sap-desktop .sapMToken:not(.sapMTokenSelected):not(.sapMTokenReadOnly):not(:focus):hover {
+	background: @sapUiButtonTokenBackground;
+	border: 1px solid @sapUiButtonTokenBorderColor;
+	border-radius: @sapUiButtonBorderCornerRadius;
+	box-shadow: @sapUiContentInteractionShadow;
 }
 
-html.sap-desktop .sapMToken:not(.sapMTokenSelected):not(:focus):hover {
-	background: @sapButton_TokenBackground;
-	border: 1px solid @sapButton_TokenBorderColor;
-	border-radius: @sapButton_BorderCornerRadius;
-	box-shadow: @sapContent_Interaction_Shadow;
+html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
+	background: @sapUiButtonSelectedBackground;
+	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedBorderColor;
+	border-radius: @sapUiButtonBorderCornerRadius;
 }
 
-html.sap-desktop .sapMToken.sapMTokenSelected:hover {
-	background: @sapUiButtonSelectedHoverBackground;
-	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedHoverBorderColor;
-	border-radius: @sapButton_BorderCornerRadius;
-}
-
-.sapMTokenIcon {
-	font-size: @sapMFontSmallSize;
-	line-height: 1.5625rem;
+html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):not(:focus):hover {
+	box-shadow: @sapUiContentInteractionShadow;
 }
 
 .sapMToken.sapMTokenReadOnly,
@@ -59,16 +45,33 @@ html.sap-desktop .sapMToken.sapMTokenSelected:hover {
 
 html.sap-desktop .sapMToken:focus {
 	outline: none;
-	border: 1px solid @sapContent_FocusColor;
-	box-shadow: 0 0 0 1px @sapContent_FocusColor;
-	border-radius: @sapButton_BorderCornerRadius;
 }
 
-html.sap-desktop .sapMToken.sapMTokenSelected:focus {
-	outline: none;
-	color: @sapUiButtonSelectedTextColor;
+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;
+}
+
+html.sap-desktop .sapMToken:not(.sapMTokenSelected):not(.sapMTokenReadOnly):focus:hover {
+	border: @sapUiButtonBorderWidth solid @sapUiButtonTokenBorderColor;
 }
 
-.sapUiSizeCompact .sapMTokenIcon {
-	line-height: 1.1875rem;
+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 .sapMToken.sapMTokenSelected:focus {
+	color: @sapUiButtonSelectedTextColor;
 }