@openui5/themelib_sap_horizon 1.128.0 → 1.130.0

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

@@ -3,11 +3,11 @@
 /* Horizon High Contrast White theme  */
 /* ================================== */
 
-// ==========================================================================
-// Variables overriding
-// ==========================================================================
+/* ========================================================================== */
+/* Variables overriding */
+/* ========================================================================== */
 
-@_sap_m_IconTabBar_TextColor: @sapUiContentLabelColor;
+@_sap_m_IconTabBar_TextColor: var(--sapContent_LabelColor);
 @_sap_m_IconTabBar_TextShadow: none;
 @_sap_m_IconTabBar_HeaderFocusBorderTopOffset: -1px;
 @_sap_m_IconTabBar_HeaderFocusBorderBottomOffset: -1px;
@@ -15,31 +15,31 @@
 @_sap_m_IconTabBar_HeaderFocusBorderLeftOffset: -1px;
 @_sap_m_IconTabBar_More_Button_Border_Radius: 0px;
 
-// ==================== Cozy size ====================
+/* ==================== Cozy size ==================== */
 
-// Content arrow
+/* Content arrow */
 @_sap_m_IconTabBar_ContentArrowBorderWidth: 0.313rem;
 @_sap_m_IconTabBar_ContentArrowHeight: 0.875rem;
 
-// Inline mode
+/* Inline mode */
 @_sap_m_IconTabBar_InLineFilterMargin: 0.875rem 0 0 0;
 @_sap_m_IconTabBar_InLineTextOnlyVerticalHeight: 2.75rem;
 @_sap_m_IconTabBar_InLineTextOnlyContentArrowHeight: @_sap_m_IconTabBar_ContentArrowHeight;
 
-// TextOnly mode
+/* TextOnly mode */
 @_sap_m_IconTabBar_TextOnlyTabPadding: 0 0 0.125rem 0;
 @_sap_m_IconTabBar_TextOnlyVerticalHeight: 3rem;
 
-// NoText mode
+/* NoText mode */
 @_sap_m_IconTabBar_NoTextFilterWidth: 3.125rem;
 @_sap_m_IconTabBar_NoTextVerticalHeight: 3.75rem;
 
-// All tabs
+/* All tabs */
 @_sap_m_IconTabBar_AllTabHeight: 2.875rem;
 @_sap_m_IconTabBar_AllTabLineHeight: 2.875rem;
 @_sap_m_IconTabBar_AllTabMarginBottom: 0.375rem;
 
-// Horizontal tabs
+/* Horizontal tabs */
 @_sap_m_IconTabBar_HorizontalFilterHeight: 3.75rem;
 @_sap_m_IconTabBar_HorizontalTabHeight: 2.75rem;
 @_sap_m_IconTabBar_HorizontalWrapperHeight: 2.75rem;
@@ -48,20 +48,20 @@
 @_sap_m_IconTabBar_HorizontalTextPaddingTop: 0.375rem;
 @_sap_m_IconTabBar_HorizontalTextPaddingLeft: 0.125rem;
 
-// Vertical tabs
+/* Vertical tabs */
 @_sap_m_IconTabBar_VerticalHeight: 4.625rem;
 @_sap_m_IconTabBar_VerticalContentArrowHeight: 0.625rem;
 
-// Filter icon
+/* Filter icon */
 @_sap_m_IconTabBar_FilterIconHeight: 2.75rem;
 @_sap_m_IconTabBar_FilterIconWidth: 2.75rem;
 @_sap_m_IconTabFilter_Icon_Border_Radius: 0.375rem;
-@_sap_m_IconTabFilter_Icon_Border_Color: @sapUiButtonBorderColor;
+@_sap_m_IconTabFilter_Icon_Border_Color: var(--sapButton_BorderColor);
 
-// Filter text
+/* Filter text */
 @_sap_m_IconTabBar_FilterTextLineHeight: 0.875rem;
 
-// Separator
+/* Separator */
 @_sap_m_IconTabBar_SeparatorHeight: 2rem;
 @_sap_m_IconTabBar_SeparatorMargin: 0.75rem 0.25rem 0;
 @_sap_m_IconTabBar_TextOnlySeparatorMargin: 0.375rem 0.25rem 0.375rem;
@@ -69,83 +69,83 @@
 @_sap_m_IconTabBar_SeparatorIconHeight: 2.75rem;
 @__sap_m_IconTabBar_SeparatorIconLineHeight: 2.75rem;
 
-// Left and Right arrows
+/* Left and Right arrows */
 @_sap_m_IconTabBar_ArrowScrollPadding: 0.875rem 0.4rem;
 @_sap_m_IconTabBar_SplitContainerArrowScrollPadding: 0.875rem 0.4rem;
 
-// Header
-@_sap_m_IconTabBar_HeaderBackgroundTranslucent: @sapUiObjectHeaderBackground;
+/* Header */
+@_sap_m_IconTabBar_HeaderBackgroundTranslucent: var(--sapObjectHeader_Background);
 
 @_sap_m_IconTabBar_HeaderBorderBottom: none;
 @_sap_m_IconTabBar_HeaderShadow: none;
 
-// Content
-@_sap_m_IconTabBar_ContentBackground: @sapUiBaseBG;
-@_sap_m_IconTabBar_ContentBackgroundTranslucent: @sapUiGroupContentBackground;
+/* Content */
+@_sap_m_IconTabBar_ContentBackground: var(--sapBackgroundColor);
+@_sap_m_IconTabBar_ContentBackgroundTranslucent: var(--sapGroup_ContentBackground);
 
-// ==================== Compact size ====================
+/* ==================== Compact size ==================== */
 
-// Content arrow
+/* Content arrow */
 @_sap_m_IconTabBar_Compact_NoTextContentArrowHeight: 1rem;
 @_sap_m_IconTabBar_Compact_ContentArrowHeight: 1rem;
 @_sap_m_IconTabBar_Compact_NoTextContentArrowWidth: 2.375rem;
 
-// Inline mode (same as cozy)
+/* Inline mode (same as cozy) */
 @_sap_m_IconTabBar_Compact_InLineVerticalTabHeight: @_sap_m_IconTabBar_InLineTextOnlyVerticalHeight;
 @_sap_m_IconTabBar_Compact_InLineFilterTextMargin: @_sap_m_IconTabBar_InLineFilterMargin;
 @_sap_m_IconTabBar_Compact_TextOnlyContentArrowHeight: @_sap_m_IconTabBar_VerticalContentArrowHeight;
 
-// TextOnly (same as cozy)
+/* TextOnly (same as cozy) */
 @_sap_m_IconTabBar_Compact_TextOnlyVerticalHeight: @_sap_m_IconTabBar_TextOnlyVerticalHeight;
 @_sap_m_IconTabBar_Compact_TextOnlyTabPadding: @_sap_m_IconTabBar_TextOnlyTabPadding;
 @_sap_m_IconTabBar_Compact_TextOnlyHeadPadding: 0 0.925rem 0 0.1875rem;
 @_sap_m_IconTabBar_Compact_TextOnlyTextLineHeight: 1rem;
 @_sap_m_IconTabBar_Compact_TextOnlyTextPadding: 0;
 
-// NoText
+/* NoText */
 @_sap_m_IconTabBar_Compact_NoTextTabWidth: 2.375rem;
 @_sap_m_IconTabBar_Compact_NoTextVerticalHeight: 3rem;
 
-// Horizontal
+/* Horizontal */
 @_sap_m_IconTabBar_Compact_HorizontalHeight: 3rem;
 @_sap_m_IconTabBar_Compact_HorizontalContentArrowHeight: 1rem;
 
-// Vertical
+/* Vertical */
 @_sap_m_IconTabBar_Compact_VerticalHeight: 3.875rem;
 
-// Filter text
+/* Filter text */
 @_sap_m_IconTabBar_Compact_FilterTextPadding: 0.375rem 0 0;
 
-// Focus border
+/* Focus border */
 @_sap_m_IconTabBar_Compact_HorizontalFocusBottom: 1rem;
 
-// =========== Phone ===========
+/* =========== Phone =========== */
 
-// Content arrow
+/* Content arrow */
 @_sap_m_IconTabBar_Phone_ContentArrowHeight: 0.625rem;
 
 @_sap_m_IconTabBar_Phone_TextOnlyContentArrowHeight: 0.5rem;
 @_sap_m_IconTabBar_Phone_Compact_TextOnlyContentArrowHeight: 0.75rem;
 
-// ==========================================================================
-// Variables
-// ==========================================================================
+/* ========================================================================== */
+/* Variables */
+/* ========================================================================== */
 
 @_sap_m_IconTabBar_TextHoverColor: darken(@sapUiGroupTitleTextColor, 10);
-@_sap_m_IconTabBar_SelectedTextColor: @sapUiContentLabelColor;
+@_sap_m_IconTabBar_SelectedTextColor: var(--sapContent_LabelColor);
 @_sap_m_IconTabBar_SelectedTextHoverColor: darken(@sapUiSelected, 10);
 @_sap_m_IconTabBar_ArrowScroll_AfterHeight: 1px;
 
-// =========== Shell ===========
-@_sap_m_IconTabBar_ShellHeaderShadow: @sapUiShellShadow;
+/* =========== Shell =========== */
+@_sap_m_IconTabBar_ShellHeaderShadow: var(--sapShell_Shadow);
 @_sap_m_IconTabBar_ShellContentArrowHeight: 0.313rem;
-@_sap_m_IconTabBar_ShellOverflowBorderColor: @sapUiButtonBorderColor;
-@_sap_m_IconTabBar_ShellOverflowHoverBorderColor: @sapUiButtonHoverBorderColor;
-@_sap_m_IconTabBar_ShellOverflowPressedBorderColor: @sapUiButtonActiveBorderColor;
+@_sap_m_IconTabBar_ShellOverflowBorderColor: var(--sapButton_BorderColor);
+@_sap_m_IconTabBar_ShellOverflowHoverBorderColor: var(--sapButton_Hover_BorderColor);
+@_sap_m_IconTabBar_ShellOverflowPressedBorderColor: var(--sapButton_Active_BorderColor);
 
 /* Head Container */
 .sapMITH {
-	z-index: 1; // shows the bottom shadow of the ITHeader over the content of the ITB
+	z-index: 1; /* shows the bottom shadow of the ITHeader over the content of the ITB */
 
 	.sapMITBHead {
 		padding-top: 0.875rem;
@@ -246,9 +246,9 @@
 	border-bottom: none;
 	position: relative;
 
-	// creates border bottom with rounded top corners
+	/* creates border bottom with rounded top corners */
 	&::after {
-		content: "";
+		content: '';
 		position: absolute;
 		bottom: 0;
 		left: 0;
@@ -269,12 +269,13 @@
 /* Content Container */
 
 .sapMITBContent {
-	border: 0.125rem solid @sapUiObjectHeaderBorderColor;
+	border: 0.125rem solid var(--sapObjectHeader_BorderColor);
 }
 
 .sapMITBContainerContent {
+
 	&.sapMITBContentClosed {
-		border-bottom: 0.125rem solid @sapUiObjectHeaderBorderColor;
+		border-bottom: 0.125rem solid var(--sapObjectHeader_BorderColor);
 	}
 }
 
@@ -294,17 +295,17 @@
 }
 
 .sapMITBFilterIcon {
-	border: 1px solid @sapUiGroupTitleTextColor;
+	border: 1px solid var(--sapGroup_TitleTextColor);
 }
 
 .sapMITBFilterDefault {
-	color: @sapUiContentContrastIconColor;
+	color: var(--sapContent_ContrastIconColor);
 }
 
 .sapMITBSelected {
 
 	.sapMITBContentArrow::after {
-		background: @sapUiListSelectionBorderColor;
+		background: var(--sapList_SelectionBorderColor);
 	}
 
 	.sapMITBFilterDefault,
@@ -312,8 +313,8 @@
 	.sapMITBFilterPositive,
 	.sapMITBFilterNegative,
 	.sapMITBFilterCritical {
-		background: @sapUiSelected;
-		color: @sapUiContentContrastIconColor;
+		background: var(--sapSelectedColor);
+		color: var(--sapContent_ContrastIconColor);
 	}
 }
 
@@ -337,6 +338,7 @@
 }
 
 .sapMITH.sapMITBNoText .sapMITBHead {
+
 	> .sapMITBSepLine {
 		margin: 0.25rem 0.25rem 0 0;
 	}
@@ -345,6 +347,7 @@
 .sapMITH.sapUiSizeCompact {
 
 	&.sapMITBNoText .sapMITBHead {
+
 		> .sapMITBSepLine {
 			margin: 0 0.125rem 0 0.125rem;
 		}
@@ -352,7 +355,7 @@
 
 	.sapMITBSepLine {
 		border: unset;
-		border-right: 1px solid @sapUiGroupTitleBorderColor;
+		border-right: 1px solid var(--sapGroup_TitleBorderColor);
 		margin: 0.625rem 0.125rem 0 0.125rem;
 	}
 }
@@ -364,9 +367,11 @@
 	}
 
 	&.sapMITBHorizontal {
+
 		.sapMITBTab {
 			margin-top: 0;
 		}
+
 		+ .sapMITBSepLine {
 			margin-top: 0.5rem;
 		}
@@ -375,7 +380,7 @@
 
 .sapMITBSepLine {
 	border: unset;
-	border-right: 1px solid @sapUiGroupTitleBorderColor;
+	border-right: 1px solid var(--sapGroup_TitleBorderColor);
 }
 
 .sapUiMedia-Std-Phone {
@@ -387,7 +392,9 @@
 
 /* Custom focus outline */
 html.sap-desktop {
+
 	.sapMITBTextOnly .sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBText {
+
 		&::after {
 			top: -0.1875rem;
 			bottom: -0.1875rem;
@@ -397,6 +404,7 @@ html.sap-desktop {
 	}
 
 	.sapMITBItem:not(.sapUiDnDDragging):focus.sapMITBAll {
+
 		&::after {
 			top: 0.75rem;
 			bottom: 1.75rem;
@@ -406,6 +414,7 @@ html.sap-desktop {
 	.sapMITH.sapUiSizeCompact {
 
 		.sapMITBItem:focus.sapMITBAll {
+
 			&::after {
 				bottom: 1.3rem;
 				top: 0.125rem;
@@ -420,55 +429,55 @@ html.sap-desktop {
 	position: relative;
 }
 
-.sapMITBFilter .sapMITBText:before,
-.sapMITBFilter.sapMITBVertical .sapMITBTab:after,
-.sapMITBSelectItem .sapMITBText:before {
-	font-family: 'SAP-icons';
+.sapMITBFilter .sapMITBText::before,
+.sapMITBFilter.sapMITBVertical .sapMITBTab::after,
+.sapMITBSelectItem .sapMITBText::before {
+	font-family: var(--sapContent_IconFontFamily);
 	font-size: 0.75rem;
 	margin-right: 0.5rem;
 	speak: none;
 	-webkit-font-smoothing: antialiased;
 }
 
-.sapMITBHorizontal.sapMITBFilterPositive .sapMITBText:before,
-.sapMITBTextOnly .sapMITBFilterPositive .sapMITBText:before,
-.sapMITBVertical.sapMITBFilterPositive .sapMITBTab:after,
-.sapMITBSelectItem.sapMITBFilterPositive .sapMITBText:before {
-	color: @sapUiPositiveText;
-	content: "\e1c1";
+.sapMITBHorizontal.sapMITBFilterPositive .sapMITBText::before,
+.sapMITBTextOnly .sapMITBFilterPositive .sapMITBText::before,
+.sapMITBVertical.sapMITBFilterPositive .sapMITBTab::after,
+.sapMITBSelectItem.sapMITBFilterPositive .sapMITBText::before {
+	color: var(--sapPositiveTextColor);
+	content: '\e1c1';
 }
 
-.sapMITBHorizontal.sapMITBFilterNegative .sapMITBText:before,
-.sapMITBTextOnly .sapMITBFilterNegative .sapMITBText:before,
-.sapMITBVertical.sapMITBFilterNegative .sapMITBTab:after,
-.sapMITBSelectItem.sapMITBFilterNegative .sapMITBText:before {
-	color: @sapUiNegativeText;
-	content: "\e1ec";
+.sapMITBHorizontal.sapMITBFilterNegative .sapMITBText::before,
+.sapMITBTextOnly .sapMITBFilterNegative .sapMITBText::before,
+.sapMITBVertical.sapMITBFilterNegative .sapMITBTab::after,
+.sapMITBSelectItem.sapMITBFilterNegative .sapMITBText::before {
+	color: var(--sapNegativeTextColor);
+	content: '\e1ec';
 }
 
-.sapMITBHorizontal.sapMITBFilterCritical .sapMITBText:before,
-.sapMITBTextOnly .sapMITBFilterCritical .sapMITBText:before,
-.sapMITBVertical.sapMITBFilterCritical .sapMITBTab:after,
-.sapMITBSelectItem.sapMITBFilterCritical .sapMITBText:before {
-	color: @sapUiCriticalText;
-	content: "\e053";
+.sapMITBHorizontal.sapMITBFilterCritical .sapMITBText::before,
+.sapMITBTextOnly .sapMITBFilterCritical .sapMITBText::before,
+.sapMITBVertical.sapMITBFilterCritical .sapMITBTab::after,
+.sapMITBSelectItem.sapMITBFilterCritical .sapMITBText::before {
+	color: var(--sapCriticalTextColor);
+	content: '\e053';
 }
 
-.sapMITBVertical.sapMITBFilter .sapMITBTab:after {
+.sapMITBVertical.sapMITBFilter .sapMITBTab::after {
 	bottom: 0;
 	margin-right: -1rem;
 	position: absolute;
 }
 
-.sapMITBTextOnly .sapMITBTab:after {
+.sapMITBTextOnly .sapMITBTab::after {
 	display: none;
 }
 
-.sapMITBHorizontal.sapMITBFilter .sapMITBText:before {
+.sapMITBHorizontal.sapMITBFilter .sapMITBText::before {
 	margin-right: 0.25rem;
 }
 
-// Semantic icons in Select List
+/* Semantic icons in Select List */
 .sapMITBSelectItem .sapMITBText::before {
 	position: absolute;
 	margin-left: -3.5rem;
@@ -480,6 +489,7 @@ html.sap-desktop {
 }
 
 .sapUiSizeCompact {
+
 	.sapMITBSelectItem .sapMITBText::before {
 		position: absolute;
 		margin-left: -2.75rem;
@@ -492,11 +502,13 @@ html.sap-desktop {
 }
 
 /* ------------------------------------------------ */
-/* IconTabBar Badge									*/
+/* IconTabBar Badge */
 /* ------------------------------------------------ */
 
-.sapMITH, .sapMITBFilterPopover {
+.sapMITH,
+.sapMITBFilterPopover {
+
 	.sapMBadge .sapMBadgeAttention {
-		background-color: @sapUiContentIconColor;
+		background-color: var(--sapContent_IconColor);
 	}
 }

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

@@ -4,30 +4,32 @@
 /* ================================== */
 
 .sapMLnkDsbl {
-	opacity: @sapUiContentDisabledOpacity;
+	opacity: var(--sapContent_DisabledOpacity);
 	outline: none;
 	cursor: default;
 }
 
 .sapMLIBActive .sapMLnk {
-	color: @sapUiListActiveTextColor;
+	color: var(--sapList_Active_TextColor);
 	text-decoration: underline;
 }
 
 .sapMLnk.sapMLnkSubtle {
-	color: @sapUiLinkSubtleColor;
+	color: var(--sapLink_SubtleColor);
 	text-decoration: underline;
 
 	&:not(.sapMLnkDsbl) {
+
 		&:active {
-			color: @sapUiLinkSubtleColor;
+			color: var(--sapLink_SubtleColor);
 		}
 	}
 }
 
 html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {
+
 	&:focus {
-		outline: 0.125rem dotted @sapUiContentFocusColor;
+		outline: 0.125rem dotted var(--sapContent_FocusColor);
 
 		&:hover:not(:active) {
 			text-decoration: none;
@@ -35,23 +37,24 @@ html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {
 	}
 
 	&.sapMLnkSubtle {
+
 		&:hover:not(:active):not(:focus) {
-			color: @sapUiLinkSubtleColor;
+			color: var(--sapLink_SubtleColor);
 			text-decoration: none;
 		}
 	}
 }
 
 .sapMLnk:not(.sapMLnkDsbl) {
-	text-shadow: @sapUiContentTextShadow;
+	text-shadow: var(--sapContent_TextShadow);
 }
 
 /* align Link in Form with Label */
 .sapUiFormEdit .sapMLnk {
 	margin-top: 0.875rem; /* don't use padding as this would stretch the focus outline */
-	margin-bottom: 0.625rem; /* for some reason browser adds 4px, display: block would lead to stretched focus outline*/
+	margin-bottom: 0.625rem; /* for some reason browser adds 4px, display: block would lead to stretched focus outline */
 }
 
 .sapMListTblRow.sapMLIBSelected .sapMLnk:not(.sapMLnkDsbl) {
-	text-shadow: @sapUiContentTextShadow;
+	text-shadow: var(--sapContent_TextShadow);
 }

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

@@ -7,7 +7,7 @@
 	border-radius: 0.25rem;
 }
 
-html.sap-desktop .sapMST:active .sapMGTFocusDiv {
+.sapMST:active .sapMGTFocusDiv {
 	left: 0;
 	top: 0;
 	right: 0;
@@ -15,19 +15,19 @@ html.sap-desktop .sapMST:active .sapMGTFocusDiv {
 	border: 0.125rem dotted @sapUiContentFocusColor;
 }
 
-html.sap-desktop .sapMST:focus:not([tabindex]) {
+.sapMST:focus:not([tabindex]) {
 	border-color: transparent;
 }
 
 /* Bulleted indicator of multiple tiles*/
-.sapMSTBulleted > span {
+.sapMSTBulleted .sapMSTIndicator{
 	border: solid 0.0625rem @sapTile_OverlayForegroundColor;
 	opacity: 0.6;
 	box-shadow : 0 0 0.125rem @sapContent_ShadowColor;
 	margin: 0 0.094rem;
 }
 
-.sapMSTBulleted > span.sapMSTActive {
+.sapMSTBulleted .sapMSTIndicator.sapMSTActive {
 	background: @sapTile_OverlayForegroundColor;
 	box-shadow: 0 0 0.063rem @sapContent_ShadowColor;
 }
@@ -60,12 +60,12 @@ html.sap-desktop .sapMST:focus:not([tabindex]) {
 	border: none;
 }
 
-html.sap-desktop .sapMST.sapMSTIconPressed .sapMSTIconClickTapArea:hover ~.sapMSTIconDisplayArea {
+.sapMST.sapMSTIconPressed .sapMSTIconClickTapArea:hover ~.sapMSTIconDisplayArea {
 	border-color: @sapButton_Active_BorderColor;
 	background-color: @sapButton_Active_Background;
 }
 
-html.sap-desktop .sapMST.sapMSTIconPressed{
+.sapMST.sapMSTIconPressed{
 	.sapMSTIconNestedArea{
 		.sapUiIcon{
 			color: @sapButton_Active_TextColor !important;

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

@@ -3,17 +3,25 @@
 /* Horizon High Contrast White theme  */
 /* ================================== */
 
-@_sap_m_Token_TokenPadding: 0.5rem;
-@_sap_m_Token_TokenCompactPadding: 0.25rem;
 @_sap_m_Token_LeftPadding: 0.3125rem;
-@_sap_m_Token_TokenSize: @sapMFontSmallSize + (2 * @_sap_m_Token_TokenPadding) - @_sap_m_Token_LeftPadding;
-@_sap_m_Token_TokenCompactSize: @sapMFontSmallSize  + @_sap_m_Token_TokenCompactPadding;
+@_sap_m_Token_IconWidth: 1.75rem;
+@_sap_m_Token_CompactIconWidth: 1.5rem;
+@_sap_m_Token_DeleteIconHeight: 2.25rem;
+@_sap_m_Token_DeleteIconCompactHeight: 1.625rem;
 
 .sapMToken {
 	padding-left: @_sap_m_Token_LeftPadding;
 	border-radius: 0.25rem;
 	color: @sapTextColor;
 	font-size: @sapFontSize;
+	overflow: visible;
+}
+
+.sapMTokenIcon::before {
+	display: inline-block;
+	width: 0.75rem;
+	height: 0.75rem;
+	line-height: 1;
 }
 
 html.sap-desktop .sapMToken:not(.sapMTokenReadOnly):hover {
@@ -57,4 +65,21 @@ html.sap-desktop .sapMToken {
 	.sapMTokenText {
 		line-height: 0.875rem;
 	}
+}
+
+.sapMTokenIcon {
+	box-sizing: border-box;
+	top: ~"calc((@{_sap_m_Token_TokenHeight} / 2) - (@{_sap_m_Token_DeleteIconHeight} / 2) - @{sapUiButtonBorderWidth})";
+	width: @_sap_m_Token_IconWidth;
+	height: @_sap_m_Token_DeleteIconHeight;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	right: -@sapUiButtonBorderWidth;
+}
+
+.sapUiSizeCompact .sapMTokenIcon {
+	top: ~"calc((@{_sap_m_Token_TokenCompactHeight} / 2) - (@{_sap_m_Token_DeleteIconCompactHeight} / 2) - @{sapUiButtonBorderWidth})";
+	width: @_sap_m_Token_CompactIconWidth;
+	height: @_sap_m_Token_DeleteIconCompactHeight;
 }

package/src/sap/ui/core/themes/sap_horizon/.theme

@@ -6,7 +6,7 @@
 	<copyright>OpenUI5
  * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-	<version>1.128.0</version>
+	<version>1.130.0</version>
 
 	<documentation>SAPUI5 Horizon theme library.</documentation>