@openui5/themelib_sap_horizon 1.116.0 → 1.117.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/themelib_sap_horizon",
-  "version": "1.116.0",
+  "version": "1.117.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.116.0",
-    "@openui5/sap.m": "1.116.0",
-    "@openui5/sap.tnt": "1.116.0",
-    "@openui5/sap.ui.codeeditor": "1.116.0",
-    "@openui5/sap.ui.commons": "1.116.0",
-    "@openui5/sap.ui.core": "1.116.0",
-    "@openui5/sap.ui.dt": "1.116.0",
-    "@openui5/sap.ui.fl": "1.116.0",
-    "@openui5/sap.ui.mdc": "1.116.0",
-    "@openui5/sap.ui.integration": "1.116.0",
-    "@openui5/sap.ui.layout": "1.116.0",
-    "@openui5/sap.ui.rta": "1.116.0",
-    "@openui5/sap.ui.suite": "1.116.0",
-    "@openui5/sap.ui.table": "1.116.0",
-    "@openui5/sap.ui.unified": "1.116.0",
-    "@openui5/sap.ui.ux3": "1.116.0",
-    "@openui5/sap.uxap": "1.116.0"
+    "@openui5/sap.f": "1.117.0",
+    "@openui5/sap.m": "1.117.0",
+    "@openui5/sap.tnt": "1.117.0",
+    "@openui5/sap.ui.codeeditor": "1.117.0",
+    "@openui5/sap.ui.commons": "1.117.0",
+    "@openui5/sap.ui.core": "1.117.0",
+    "@openui5/sap.ui.dt": "1.117.0",
+    "@openui5/sap.ui.fl": "1.117.0",
+    "@openui5/sap.ui.mdc": "1.117.0",
+    "@openui5/sap.ui.integration": "1.117.0",
+    "@openui5/sap.ui.layout": "1.117.0",
+    "@openui5/sap.ui.rta": "1.117.0",
+    "@openui5/sap.ui.suite": "1.117.0",
+    "@openui5/sap.ui.table": "1.117.0",
+    "@openui5/sap.ui.unified": "1.117.0",
+    "@openui5/sap.ui.ux3": "1.117.0",
+    "@openui5/sap.uxap": "1.117.0"
   }
 }

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

@@ -21,9 +21,19 @@
 	font-size: inherit;
 }
 
-.sapFAvatarFocusable:focus {
-	outline: none;
+.sapFAvatarFocusable.sapMAvatarPressed {
 	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+
+	&:hover {
+		box-shadow: 0px 0px 0px 0.125rem @sapUiButtonSelectedHoverBorderColor;
+	}
+}
+
+.sapFAvatarFocusable:focus {
+	outline-offset: .125rem;
+	&.sapFAvatarSquare {
+		outline-offset: .125rem;
+	}
 }
 
 .sapFAvatarColorTileIcon {

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

@@ -9,10 +9,9 @@
 
 @_sap_m_IconTabBar_TextColor: @sapTextColor;
 @_sap_m_IconTabBar_TextShadow: none;
-@_sap_m_IconTabBar_Separator_Icon: @sapUiContentNonInteractiveIconColor;
 @_sap_m_IconTabBar_Separator_Font_Size:@sapFontLargeSize;
 @_sap_m_IconTabBar_More_Button_Focus_Offset: -0.3125rem;
-@_sap_m_IconTabBar_Arrow_SubItem_Left_Padding: 0.875rem;
+@_sap_m_IconTabBar_Arrow_SubItem_Left_Padding: 0.5rem;
 
 
 // ==================== Cozy size ====================
@@ -142,15 +141,17 @@
 @_sap_m_IconTabBar_HeaderFocusBorderBottomOffset: -4px;
 @_sap_m_IconTabBar_HeaderFocusBorderRightOffset: -3px;
 @_sap_m_IconTabBar_HeaderFocusBorderLeftOffset: -3px;
-@_sap_m_IconTabBar_HeaderBorderRadius: 0.375rem;
+@_sap_m_IconTabBar_HeaderBorderRadius: 0.25rem;
 @_sap_m_IconTab_Bar_Separator_Line: @sapUiGroupTitleBorderColor;
 
 // =========== Overflow ===========
+@_sap_m_IconTabBar_Overflow_TextColor: @sapTextColor;
+@_sap_m_IconTabBar_Overflow_Icon_Color: @sapTextColor;
 @_sap_m_IconTabBar_Overflow_BorderColorHover: @sapUiButtonHoverBorderColor;
 @_sap_m_IconTabBar_Overflow_BackgroundColorHover: @sapUiButtonHoverBackground;
-@_sap_m_IconTabBar_Overflow_BoxShadowHover: @sapUiContentInteractionShadow;
-@_sap_m_IconTabBar_Overflow_TextColorHover: @sapUiButtonHoverTextColor;
-@_sap_m_IconTabBar_Overflow_Icon_ColorHover: @sapUiButtonHoverTextColor;
+@_sap_m_IconTabBar_Overflow_BoxShadowHover: none;
+@_sap_m_IconTabBar_Overflow_TextColorHover: @sapTextColor;
+@_sap_m_IconTabBar_Overflow_Icon_ColorHover: @sapTextColor;
 
 @_sap_m_IconTabBar_Overflow_BackgroundColorPressed: @sapUiButtonActiveBackground;
 @_sap_m_IconTabBar_Overflow_BorderColorPressed: @sapUiButtonActiveBorderColor;
@@ -190,24 +191,38 @@
 		}
 	}
 	.sapMITBDisabled {
-	  .sapMITHTextContent {
-		color: @sapTextColor;
-		font-family: @sapFontBoldFamily;
-		font-size: @sapFontSize;
-	  }
+		.sapMITHTextContent {
+			color: @sapTextColor;
+			font-family: @sapFontBoldFamily;
+			font-size: @sapFontSize;
+	 	}
 	}
 
-  .sapMITBSelected {
-	  .sapMITBContentArrow::after {
-		  background: @sapContent_Selected_ForegroundColor;
-	  }
-  }
+	.sapMITBSelected {
+		.sapMITBContentArrow::after {
+			background: @sapContent_Selected_ForegroundColor;
+		}
+	}
+
+	.sapMITBFilterExpandBtnSeparator {
+		border-right: 0.0625rem solid;
+		margin-left: 0.625rem;
+		border-color: @_sap_m_IconTabBar_TextColor;
+		height: 1rem;
+		margin-top: 0.875rem;
+	}
+
+	.sapMITBFilterExpandBtn:hover .sapMBtnInner {
+		border-radius: 0.25rem;
+	}
+
+
   //More Button
   .sapMITHStartOverflow,
   .sapMITHEndOverflow {
 	.sapMITBItem {
 	  color: @sapButton_TextColor;
-	  background: @sapButton_Background;
+	  background: @sapButton_Hover_Background;
 	  border: 1px solid @sapButton_BorderColor;
 
 	  .sapMITHShowSubItemsIcon {
@@ -216,16 +231,25 @@
 	}
   }
 
-.sapMITHEndOverflow,
-.sapMITHStartOverflow {
-	.sapMITHShowSubItemsIcon {
-		padding-left: 0.375rem;
+	.sapMITHEndOverflow,
+	.sapMITHStartOverflow {
+		.sapMITBItem:hover {
+			background: @sapButton_Background;
+			border: 1px solid @_sap_m_IconTabBar_ShellOverflowHoverBorderColor;
+		}
+	}
+
+	.sapMITHEndOverflow,
+	.sapMITHStartOverflow {
+		.sapMITHShowSubItemsIcon {
+			padding-left: 0.375rem;
+		}
+	}
+
+	//Arrow button
+	.sapMITBFilterWithItems .sapMITBFilterExpandBtn .sapMBtnIcon  {
+		color: @sapButton_TextColor;
 	}
-}
-  //Arrow button
-  .sapMITBFilterWithItems .sapMITBFilterExpandBtn .sapMBtnIcon:hover  {
-	color: @_sap_m_IconTabBar_TextHoverColor !important;
-  }
 }
 
 /* Head Container - compact */
@@ -324,50 +348,113 @@
 
 /* Tab Filter Item */
 
-.sapMITBTextOnly {
-
-	.sapMITBFilterDefault:hover .sapMITBText {
-		color: @_sap_m_IconTabBar_TextHoverColor;
+.sapMITH:not(.sapMITBTextOnly) .sapMITBHorizontal {
+	.sapMBtn {
+		margin-bottom: 0.9375rem;
 	}
+}
 
-	.sapMITBFilterDefault.sapMITBSelected .sapMITBText{
-		color: @_sap_m_IconTabBar_SelectedTextColor;
+.sapMITH:not(.sapMITBTextOnly):not(.sapMITBNoText) .sapMITBVertical {
+	.sapMBtn {
+		margin-bottom: 1.875rem;
 	}
+}
 
-	.sapMITBFilterDefault.sapMITBSelected:hover .sapMITBText {
-		color: @_sap_m_IconTabBar_SelectedTextHoverColor;
+.sapMITBNoText.sapMITH {
+	.sapMBtn {
+		margin-bottom: 0.9375rem;
 	}
+}
 
-	.sapMITBFilterNeutral .sapMITBText {
-		color: @sapUiNeutralText;
+.sapMITBNoContentPadding .sapMITBTextOnly {
+	.sapMITBFilterExpandBtnSeparator {
+		margin-top: 1.125rem;
 	}
-
-	.sapMITBFilterNeutral:hover .sapMITBText {
-	  color: darken(@sapUiNeutralText, 10);
+	.sapMBtn {
+		margin-top: 0.25rem;
 	}
+}
 
-	.sapMITBFilterPositive .sapMITBText {
-		color: @sapUiPositiveText;
-	}
+.sapMITBTextOnly {
 
-	.sapMITBFilterPositive:hover .sapMITBText {
-		color: darken(@sapUiPositiveText, 10);
+	.sapMITBFilterDefault.sapMITBSelected {
+		.sapMITBText {
+			color: @sapContent_Selected_ForegroundColor;
+		}
+		.sapMITBFilterExpandBtnSeparator {
+			border-color: @sapContent_Selected_ForegroundColor;
+		}
+		.sapMBtnIcon {
+			color: @_sap_m_IconTabBar_SelectedTextColor;
+		}
 	}
 
-	.sapMITBFilterNegative .sapMITBText {
-		color: @sapUiNegativeText;
+	.sapMITBFilterNeutral {
+		.sapMITBText {
+			color: @sapUiNeutralText;
+		}
+		.sapMITBFilterWrapper:hover .sapMITBText {
+			color: @sapUiNeutralText;
+		}
+		.sapMITBFilterExpandBtn:hover{
+			.sapMBtnIcon {
+				color: @sapUiNeutralText;
+			}
+		}
+		&.sapMITBSelected .sapMITBFilterExpandBtnSeparator {
+			border-color: @sapUiNeutralText;
+		}
 	}
 
-	.sapMITBFilterNegative:hover .sapMITBText {
-		color: darken(@sapUiNegativeText, 10);
+	.sapMITBFilterPositive {
+		.sapMITBText {
+			color: @sapUiPositiveText;
+		}
+		.sapMITBFilterWrapper:hover .sapMITBText {
+			color: @sapUiPositiveText;
+		}
+		.sapMITBFilterExpandBtn:hover{
+			.sapMBtnIcon {
+				color: @sapUiPositiveText !important;
+			}
+		}
+		&.sapMITBSelected .sapMITBFilterExpandBtnSeparator {
+			border-color: @sapUiPositiveText;
+		}
 	}
 
-	.sapMITBFilterCritical .sapMITBText {
-		color: @sapUiCriticalText;
+	.sapMITBFilterNegative {
+		 .sapMITBText {
+			color: @sapUiNegativeText;
+		}
+		.sapMITBFilterWrapper:hover .sapMITBText {
+			color: @sapUiNegativeText;
+		}
+		.sapMITBFilterExpandBtn:hover{
+			.sapMBtnIcon {
+				color: @sapUiNegativeText;
+			}
+		}
+		&.sapMITBSelected .sapMITBFilterExpandBtnSeparator {
+			border-color: @sapUiNegativeText;
+		}
 	}
 
-	.sapMITBFilterCritical:hover .sapMITBText {
-		color: darken(@sapUiCriticalText, 10);
+	.sapMITBFilterCritical {
+		.sapMITBText {
+			color: @sapUiCriticalText;
+		}
+		.sapMITBFilterWrapper:hover .sapMITBText {
+			color: @sapUiCriticalText;
+		}
+		.sapMITBFilterExpandBtn:hover{
+			.sapMBtnIcon {
+				color: @sapUiCriticalText;
+			}
+		}
+		&.sapMITBSelected .sapMITBFilterExpandBtnSeparator {
+			border-color: @sapUiCriticalText;
+		}
 	}
 }
 
@@ -376,28 +463,97 @@
 }
 
 .sapMITBFilterDefault {
-  	border-color: @sapUiContentSelectedForegroundColor;
+	border-color: @sapUiContentSelectedForegroundColor;
 	color: @sapUiContentSelectedForegroundColor;
 }
 
 .sapMITBFilterNeutral {
-	color: @sapUiNeutralText;
+	color: @sapUiNeutralElement;
 	border-color: @sapUiNeutralElement;
+
+	.sapMITBFilterExpandBtnSeparator {
+		border-color: @sapUiNeutralText;
+	}
+
+	.sapMBtnIcon {
+		color: @sapUiNeutralText !important;
+	}
 }
 
 .sapMITBFilterPositive {
-	color: @sapUiPositiveText;
+	color: @sapUiPositiveElement;
 	border-color: @sapUiPositiveElement;
+
+	.sapMITBFilterExpandBtnSeparator {
+		border-color: @sapUiPositiveText;
+	}
+
+	.sapMBtnIcon {
+		color: @sapUiPositiveText !important;
+	}
 }
 
-.sapMITBFilterNegative {
-	color: @sapUiNegativeText;
+.sapMITBFilterNegative:not(.sapMITBTextOnly) {
+	color: @sapUiNegativeElement;
 	border-color: @sapUiNegativeElement;
+
+	.sapMITBFilterExpandBtnSeparator {
+		border-color: @sapUiNegativeText;
+	}
+
+	.sapMBtnIcon {
+		color: @sapUiNegativeText !important;
+	}
 }
 
 .sapMITBFilterCritical {
-	color: @sapUiCriticalText;
+	color: @sapUiCriticalElement;
 	border-color: @sapUiCriticalElement;
+
+	.sapMITBFilterExpandBtnSeparator {
+		border-color: @sapUiCriticalText;
+	}
+
+	.sapMBtnIcon {
+		color: @sapUiCriticalText !important;
+	}
+}
+.sapMITH:not(.sapMITBTextOnly) {
+
+	.sapMITBFilterNeutral {
+		.sapMITBFilterExpandBtnSeparator {
+			border-color: @sapUiNeutralElement;
+		}
+		.sapMBtnIcon {
+			color: @sapUiNeutralElement !important;
+		}
+	}
+
+	.sapMITBFilterPositive {
+		.sapMITBFilterExpandBtnSeparator {
+			border-color: @sapUiPositiveElement;
+		}
+		.sapMBtnIcon {
+			color: @sapUiPositiveElement !important;
+		}
+	}
+
+	.sapMITBFilterNegative {
+		.sapMITBFilterExpandBtnSeparator {
+			border-color: @sapUiNegativeElement;
+		}
+		.sapMBtnIcon {
+			color: @sapUiNegativeElement !important;
+		}
+	}
+	.sapMITBFilterCritical {
+		.sapMITBFilterExpandBtnSeparator {
+			border-color: @sapUiCriticalElement;
+		}
+		.sapMBtnIcon {
+			color: @sapUiCriticalElement !important;
+		}
+	}
 }
 
 .sapMITBSelected {
@@ -573,6 +729,9 @@ html.sap-desktop {
 		.sapMITHStartOverflow,
 		.sapMITHEndOverflow {
 			.sapMITBItem {
+				&:active{
+					background-color: @_sap_m_IconTabBar_Overflow_BackgroundColorPressed;
+				}
 				&:active::after {
 					// when overflow is pressed, make the focus white
 					border-color: @_sap_m_IconTabBar_Overflow_TextColorPressed;
@@ -689,11 +848,13 @@ html.sap-desktop {
 .sapMITH,
 .sapMITBFilterPopover {
 
-	.sapMITBText .sapMBadgeAttention {
-		right: -0.75rem;
-	}
-
 	.sapMITFExpandButtonBadge {
 		left: 0.5rem;
 	}
+}
+
+.sapMITH {
+	.sapMITBFilterWithItems .sapMITBFilterExpandBtn {
+		margin-left: -1px; // to hide the separator on hover over the button
+	}
 }

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

@@ -19,11 +19,6 @@
 @_sap_m_InputBase_FocusOffset_Busy: @_sap_m_InputBase_FocusOffset;
 @_sap_m_InputBase_FocusBorderRadius: 0.25rem;
 
-.sapMILI-CTX .sapMInputBaseContentWrapperError,
-.sapMInputBaseContentWrapper {
-	border: none;
-}
-
 .sapMInputBase:not(.sapMInputBaseReadonly) .sapMInputBaseIconContainer .sapMInputBaseIcon {
 	width: @_sap_m_InputBase_IconWidth;
 	height: 2.1875rem;
@@ -119,6 +114,9 @@
 	.sapMInputBase .sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) .sapMInputBaseIconContainer .sapMInputBaseIcon {
 		height: 1.25rem;
 	}
+	.sapMInputBase {
+		line-height: 1.25rem;
+	}
 }
 
 /* List specific styles */

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

@@ -21,6 +21,33 @@
 .sapMLnk.sapMLnkSubtle {
 	color: @sapUiLinkSubtleColor;
 	text-decoration: underline;
+
+	&:not(.sapMLnkDsbl) {
+		&:active {
+			color: @sapUiLinkSubtleColor;
+		}
+	}
+}
+
+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) {
@@ -35,17 +62,4 @@
 
 .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:hover:not(:active):not(.sapMLnkDsbl).sapMLnkSubtle,
-html.sap-desktop .sapMLnk:focus:hover:not(:active):not(.sapMLnkDsbl) {
-	text-decoration: none;
 }

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

@@ -4,7 +4,7 @@
 /* ================================== */
 
 .sapMPanel {
-	min-height: 2.5rem;
+	min-height: 2.75rem;
 	border-radius: @sapElement_BorderCornerRadius;
 
 	.sapMPanelWrappingDiv:not(.sapMPanelWrappingDivExpanded),
@@ -75,9 +75,15 @@
 	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;
@@ -98,4 +104,8 @@
 
 .sapMPanelWrappingDiv .sapUiIcon {
 	color: @sapButton_Lite_TextColor;
+}
+
+.sapMPanelStickyHeadingDiv {
+	background-color: @sapUiGroupTitleBackground;
 }

package/src/sap/m/themes/sap_horizon/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,
-.sapMToken.sapMTokenReadOnly.sapMTokenSelected {
+.sapMToken.sapMTokenReadOnly {
+	padding: 0.25rem 0.3125rem;
 	color: @sapUiContentLabelColor;
-}
 
-html.sap-desktop .sapMToken:focus {
-	outline: none;
+	.sapMTokenText {
+		line-height: 1rem;
+	}
 }
 
-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:focus {
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	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 .sapMToken.sapMTokenSelected:focus {
-	color: @sapUiButtonSelectedTextColor;
+html.sap-desktop .sapUiSizeCondensed .sapMToken:focus {
+	outline-width: 1px;
+}
+
+.sapUiSizeCompact .sapMToken.sapMTokenReadOnly {
+	padding: 0.125rem 0.25rem;
+
+	.sapMTokenText {
+		line-height: 0.875rem;
+	}
 }

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

@@ -31,9 +31,16 @@ html.sap-desktop .sapMTokenizer:focus {
 		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;
 		}