@openui5/themelib_sap_horizon 1.128.0 → 1.129.0

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

@@ -8,68 +8,79 @@
 
 html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare {
 	border-radius: 0.25rem;
+
 	&:hover,
 	&.sapMColorPaletteSquareSelected {
 		border-radius: 0.4375rem;
 		margin: 0.0625rem;
 		width: 2.25rem;
 		height: 2.25rem;
+
 		& > div {
 			border-radius: 0.375rem;
 		}
 	}
+
 	div {
 		border-radius: 0.1875rem;
 	}
 }
 
 .sap-desktop .sapMColorPalette .sapMBtn:focus {
-	&:after {
-		border-color: @sapUiContentFocusColor;
+
+	&::after {
+		border-color: var(--sapContent_FocusColor);
 	}
 }
 
 .sap-desktop .sapContrast,
 .sap-desktop.sapContrast {
 	.sapMColorPalette .sapMBtn {
-		&:focus:after {
-			border-color: @sapUiContentFocusColor;
+
+		&:focus::after {
+			border-color: var(--sapContent_FocusColor);
 
 		}
+
 		&:active,
 		> .sapMBtnActive,
 		&:hover > .sapMBtnActive,
 		&:active > .sapMBtnActive {
-			color: @sapUiListTextColor;
+			color: var(--sapList_TextColor);
 		}
 	}
 }
 
 html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare:focus {
-	&:after {
+
+	&::after {
 		display: none;
 	}
-	&:before {
-		border: 0.125rem solid @sapUiContentFocusColor;
+
+	&::before {
+		border: 0.125rem solid var(--sapContent_FocusColor);
 		border-radius: 0.4375rem;
 		top: -0.3125rem;
 		left: -0.3125rem;
 		bottom: -0.3125rem;
 		right: -0.3125rem;
 	}
+
 	&:hover,
 	&.sapMColorPaletteSquareSelected {
-		&:after {
+
+		&::after {
 			display: block;
-			border: 0.0625rem solid @sapUiContentContrastFocusColor;
+			border: 0.0625rem solid var(--sapContent_ContrastFocusColor);
 			border-radius: 0.3125rem;
 			top: 0.0625rem;
 			left: 0.0625rem;
 			bottom: 0.0625rem;
 			right: 0.0625rem;
 		}
-		&:before {
-			border: 0.125rem solid @sapUiContentFocusColor;
+
+		&::before {
+			border: 0.125rem solid var(--sapContent_FocusColor);
 			border-radius: 0.4375rem;
 			top: -0.0625rem;
 			left: -0.0625rem;
@@ -81,38 +92,50 @@ html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare:focus {
 
 html:not(.sap-phone) .sapMColorPalette,
 .sapMColorPalette {
+
 	.sapMBtn {
+
 		&:focus {
+
 			.sap-desktop & {
-				&:after {
+
+				&::after {
 					border-radius: 0.5rem;
-					border: 0.125rem solid @sapUiContentFocusColor;
+					border: 0.125rem solid var(--sapContent_FocusColor);
 				}
 			}
 		}
+
 		.sapMBtnInner {
 			height: 2.75rem;
+
 			.sapMBtnContent {
 				line-height: 2.75rem;
 			}
+
 			&.sapMBtnText {
 				padding: 0;
 			}
 		}
 	}
+
 	.sapMBtnInner {
 		border-radius: 0;
 	}
 }
 
 html:not(.sap-phone) .sapUiSizeCompact .sapMColorPalette {
+
 	.sapMBtn .sapMBtnInner {
 		height: 2rem;
+
 		.sapMBtnContent {
 			line-height: 2rem;
 		}
 	}
+
 	.sapMColorPaletteSquare {
+
 		&:hover,
 		&.sapMColorPaletteSquareSelected {
 			margin: 0.0625rem;
@@ -120,7 +143,8 @@ html:not(.sap-phone) .sapUiSizeCompact .sapMColorPalette {
 			height: 1.625rem;
 		}
 	}
-	.sapMColorPaletteSquare:focus:not(:hover):not(.sapMColorPaletteSquareSelected):before {
+
+	.sapMColorPaletteSquare:focus:not(:hover):not(.sapMColorPaletteSquareSelected)::before {
 		top: -0.25rem;
 		left: -0.25rem;
 		bottom: -0.25rem;
@@ -128,13 +152,15 @@ html:not(.sap-phone) .sapUiSizeCompact .sapMColorPalette {
 	}
 }
 
-html.sap-desktop .sapMColorPalette .sapMBtn:focus > .sapMFocusable:before {
+html.sap-desktop .sapMColorPalette .sapMBtn:focus > .sapMFocusable::before {
 	display: none;
 }
 
 .sap-phone .sapMColorPalette .sapMColorPaletteSquare {
+
 	& > div {
 		border-radius: 0.25rem;
+
 		&:active {
 			border-radius: 0.4375rem;
 		}

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

@@ -9,11 +9,11 @@
 	box-shadow: none;
 
 	&:active {
-		background-color: @sapField_Focus_Background;
-		box-shadow: @sapContent_Interaction_Shadow;
+		background-color: var(--sapField_Focus_Background);
+		box-shadow: var(--sapContent_Interaction_Shadow);
 	}
 }
 
 .sapMInputBaseIconPressed .sapMComboBoxBaseClearIcon::before {
-	color: @sapUiContentIconColor;
+	color: var(--sapContent_IconColor);
 }

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

@@ -3,27 +3,27 @@
 /* Evening Horizon theme         */
 /* ============================= */
 
-// ==========================================================================
-// Variables
-// ==========================================================================
+/* ========================================================================== */
+/* Variables */
+/* ========================================================================== */
 
 @_sap_m_Dialog_VerticalMargin: 3%;
 @_sap_m_Dialog_BarHeight: 2.75rem;
 @_sap_m_Dialog_SubHeaderCompactHeight: 2.25rem;
 
-@_sap_m_Dialog_NoStateHeaderShadow: @sapUiContentHeaderShadow;
-@_sap_m_Dialog_SuccessHeaderShadow: inset 0 -0.0625rem @sapUiSuccessBorder, @sapUiContentHeaderShadow;
-@_sap_m_Dialog_ErrorHeaderShadow: inset 0 -0.0625rem @sapUiErrorBorder, @sapUiContentHeaderShadow;
-@_sap_m_Dialog_WarningHeaderShadow: inset 0 -0.0625rem @sapUiWarningBorder, @sapUiContentHeaderShadow;
-@_sap_m_Dialog_InformationHeaderShadow: inset 0 -0.0625rem @sapUiInformationBorder, @sapUiContentHeaderShadow;
+@_sap_m_Dialog_NoStateHeaderShadow: var(--sapContent_HeaderShadow);
+@_sap_m_Dialog_SuccessHeaderShadow: inset 0 -0.0625rem var(--sapSuccessBorderColor), var(--sapContent_HeaderShadow);
+@_sap_m_Dialog_ErrorHeaderShadow: inset 0 -0.0625rem var(--sapErrorBorderColor), var(--sapContent_HeaderShadow);
+@_sap_m_Dialog_WarningHeaderShadow: inset 0 -0.0625rem var(--sapWarningBorderColor), var(--sapContent_HeaderShadow);
+@_sap_m_Dialog_InformationHeaderShadow: inset 0 -0.0625rem var(--sapInformationBorderColor), var(--sapContent_HeaderShadow);
 
 @_sap_m_Dialog_HeaderFocusBorderBottomOffset: 0.125rem;
 @_sap_m_Dialog_HeaderFocusBorderTopOffset: 0.0625rem;
 @_sap_m_Dialog_HeaderFocusBorderLeftOffset: 0.0625rem;
 @_sap_m_Dialog_HeaderFocusBorderRightOffset: 0.0625rem;
-@_sap_m_Dialog_HeaderFocusBorderRadius: @sapUiElementBorderCornerRadius;
+@_sap_m_Dialog_HeaderFocusBorderRadius: var(--sapElement_BorderCornerRadius);
 
-// This parameter is used in sap.m.Select. TODO: remove it when it is removed from there.
+/* This parameter is used in sap.m.Select. TODO: remove it when it is removed from there. */
 @_sap_m_Dialog_HeaderShadowColor: darken(@sapUiGroupContentBackground, 8);
 
 .sapMDialogSubHeader .sapMIBar {
@@ -41,21 +41,23 @@
 }
 
 .sapMDialogTitleGroup {
-	z-index: 3; // to hide the shadow from the header when there is sub-header
+	z-index: 3; /* to hide the shadow from the header when there is sub-header */
 }
 
-// buttons on phone must be to the right side (in LTR mode)
+/* buttons on phone must be to the right side (in LTR mode) */
 html.sap-phone .sapMDialog {
+
 	& > footer .sapMFooter-CTX {
 		justify-content: flex-end;
 	}
 }
 
-// ==========================================================================
-// header, sub-header, footer
-// ==========================================================================
+/* ========================================================================== */
+/* header, sub-header, footer */
+/* ========================================================================== */
 
 .sapMDialog {
+
 	header .sapMBarLeft,
 	header .sapMBarPH {
 		padding-left: 1rem;
@@ -72,11 +74,17 @@ html.sap-phone .sapMDialog {
 	}
 }
 
-// Responsive paddings
-.sapMDialogTitleGroup, .sapMDialogSubHeader {
-	.sapUi-Std-PaddingS, .sapUi-Std-PaddingM,
-	.sapUi-Std-PaddingL, .sapUi-Std-PaddingXL {
+/* Responsive paddings */
+.sapMDialogTitleGroup,
+.sapMDialogSubHeader {
+
+	.sapUi-Std-PaddingS,
+	.sapUi-Std-PaddingM,
+	.sapUi-Std-PaddingL,
+	.sapUi-Std-PaddingXL {
+
 		&.sapMIBar {
+
 			.sapMBarMiddle .sapMBarPH {
 				padding-left: 0;
 				padding-right: 0;
@@ -102,6 +110,7 @@ html.sap-phone .sapMDialog {
 }
 
 .sapMDialog:not(.sapUiResponsiveContentPadding):not(.sapUiContentPadding) {
+
 	&.sapMDialog-NoHeader .sapMDialogScroll {
 		padding-top: 0.25rem;
 
@@ -117,5 +126,4 @@ html.sap-phone .sapMDialog {
 			padding-bottom: 0;
 		}
 	}
-}
-
+}

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

@@ -4,7 +4,7 @@
 /* ======================================= */
 
 .sapUiIcon.sapMDDRDateOption {
-	color: @sapUiButtonActiveTextColor;
+	color: var(--sapButton_Active_TextColor);
 }
 
 .sapMDynamicDateRangePopover section > .sapMLabel {

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

@@ -85,14 +85,14 @@
 	background: transparent;
 }
 
-.sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
+.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
 	&:not(.sapMGTLineModePress):hover {
 		background: @sapTile_Hover_Background;
 		box-shadow: @sapContent_Shadow2;
 	}
 }
 
-html.sap-desktop .sapMGT.sapMGTLineMode:active{
+.sapMGT.sapMGTLineMode:active{
 	background-color: @sapTile_Active_Background;
 	outline: 0.125rem solid @sapContent_FocusColor !important;
 	outline-offset: -0.125rem;
@@ -154,7 +154,7 @@ html.sap-desktop .sapMGT.sapMGTLineMode:active{
 
 /************************ LINE MODE FLOATING VIEW *****************/
 
-.sapUiMedia-GenericTileDeviceSet-large.sap-desktop {
+.sapUiMedia-GenericTileDeviceSet-large {
 	.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
 		&:focus, &.sapMGTLineModePress {
 			.sapMGTLineStyleHelperInner:before {
@@ -171,7 +171,7 @@ html.sap-desktop .sapMGT.sapMGTLineMode:active{
 	}
 }
 .sapUiMedia-GenericTileDeviceSet-large {
-	&.sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
+	.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
 		&:hover .sapMGTLineStyleHelperInner {
 			background: @sapUiTileHoverBackground;
 		}
@@ -241,8 +241,8 @@ html.sap-desktop .sapMGT.sapMGTLineMode:active{
 	text-shadow: @sapUiShadowText;
 }
 
-html.sap-desktop .sapMGTWithoutImageHoverOverlay,
-html.sap-desktop .sapMGTWithImageHoverOverlay {
+.sapMGTWithoutImageHoverOverlay,
+.sapMGTWithImageHoverOverlay {
 	z-index: 1;
 	position: absolute;
 	pointer-events: none;
@@ -282,7 +282,7 @@ html.sap-tablet .sapMGTWithImageHoverOverlay {
 	background: fade(@sapUiTileActiveBackground, 20%);
 }
 
-html.sap-desktop .sapMGT:hover:not(.sapMGTPressActive) {
+ .sapMGT:hover:not(.sapMGTPressActive) {
 	box-shadow: 0 0 0 1px fade(@sapUiContentShadowColor, 30);
 	transition: background 0.2s;
 
@@ -301,21 +301,21 @@ html.sap-desktop .sapMGT:hover:not(.sapMGTPressActive) {
 	}
 }
 
-html.sap-desktop .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, // focus inside GridContainer
-html.sap-desktop .sapMGT:focus .sapMGTFocusDiv,
-html.sap-desktop .sapMGT:active .sapMGTFocusDiv,
-html.sap-desktop .sapMGTLineModePress .sapMGTFocusDiv {
+.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, // focus inside GridContainer
+.sapMGT:focus .sapMGTFocusDiv,
+.sapMGT:active .sapMGTFocusDiv,
+.sapMGTLineModePress .sapMGTFocusDiv {
 	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 }
 
-html.sap-desktop .sapMGTActionButtonPress.sapMGT:active
+.sapMGTActionButtonPress.sapMGT:active
 {
 	.sapMGTFocusDiv{
 		border: none;
 	}
 }
 
-html.sap-desktop .sapMGTActionButtonPress.sapMGT:focus-visible
+.sapMGTActionButtonPress.sapMGT:focus-visible
 {
 	.sapMGTFocusDiv{
 	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
@@ -323,8 +323,8 @@ html.sap-desktop .sapMGTActionButtonPress.sapMGT:focus-visible
 	}
 }
 
-html.sap-desktop .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv,
-html.sap-desktop .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv {
+.sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv,
+.sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv {
 	&:after {
 		content: "";
 		.sapMGTOverlayMixin();
@@ -412,21 +412,21 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
 	}
 }
 
-.sap-desktop .sapMGT.sapMGTLineMode.sapMGTInfoRendered:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
+.sapMGT.sapMGTLineMode.sapMGTInfoRendered:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
 	border: transparent !important;
 }
 
-.sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
+.sapMGT.sapMGTLineMode:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
 	background: @sapTile_Hover_Background;
 	border: 1px solid @sapTile_BorderColor !important;
 	box-shadow: @sapContent_Shadow2 !important;
 }
 
-html.sap-desktop .sapMGT:hover:not(.sapMGTPressActive) {
+.sapMGT:hover:not(.sapMGTPressActive) {
 	box-shadow: @sapContent_Shadow2 !important;
 }
 
-html.sap-desktop .sapMGTIconMode.sapMGT:hover:not(.sapMGTPressActive) {
+.sapMGTIconMode.sapMGT:hover:not(.sapMGTPressActive) {
 	border: none !important;
 }
 
@@ -436,12 +436,12 @@ html.sap-desktop .sapMGTIconMode.sapMGT:hover:not(.sapMGTPressActive) {
 	margin-right: 1px;
 }
 
-html.sap-desktop .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, html.sap-desktop .sapMGT:focus .sapMGTFocusDiv, html.sap-desktop .sapMGT:active .sapMGTFocusDiv, html.sap-desktop .sapMGTLineModePress .sapMGTFocusDiv {
+.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, .sapMGT:focus .sapMGTFocusDiv, .sapMGT:active .sapMGTFocusDiv, .sapMGTLineModePress .sapMGTFocusDiv {
 	border-radius:  @sapTile_BorderCornerRadius;
 	inset: -1px;
 }
 
-html.sap-desktop .sapMGT:active{
+.sapMGT:active{
 	background-color: @sapTile_Active_Background;
 	border: 0.0625rem solid @sapTile_Interactive_BorderColor;
 	&.sapMGTIconMode{
@@ -457,13 +457,13 @@ html.sap-desktop .sapMGT:active{
 	}
 }
 
-html.sap-desktop .sapMGT:focus .sapMGTFocusDiv{
+.sapMGT:focus .sapMGTFocusDiv{
 	border-radius:  @sapTile_BorderCornerRadius;
 	box-shadow: none;
 	inset: -1px;
 }
 
-html.sap-desktop .sapMGT.sapMGTOneByOne:focus .sapMGTFocusDiv{
+.sapMGT.sapMGTOneByOne:focus .sapMGTFocusDiv{
 	inset: 0;
 }
 
@@ -475,7 +475,7 @@ html.sap-desktop .sapMGT.sapMGTOneByOne:focus .sapMGTFocusDiv{
 	}
 }
 
-html.sap-desktop .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv:after, html.sap-desktop .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv:after {
+.sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv:after, .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv:after {
 	border: none;
 	border-radius: @sapElement_BorderCornerRadius;
 }

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

@@ -3,7 +3,7 @@
 /* Evening Horizon theme            */
 /* ================================ */
 
-html.sap-desktop .sapMST:active{
+.sapMST:active{
 	background-color: @sapTile_Active_Background;
 	.sapMSTFocusDiv{
 		border: 1px solid @sapTile_Interactive_BorderColor;
@@ -17,8 +17,8 @@ html.sap-desktop .sapMST:active{
 }
 
 /* This part is used to achieve dotted white black interlace border*/
-html.sap-desktop .sapMST:focus .sapMSTFocusDiv:after,
-html.sap-desktop .sapMST:active .sapMSTFocusDiv:after {
+.sapMST:focus .sapMSTFocusDiv:after,
+.sapMST:active .sapMSTFocusDiv:after {
 	content: "";
 	position: absolute;
 	top: 0;
@@ -31,14 +31,14 @@ html.sap-desktop .sapMST:active .sapMSTFocusDiv:after {
 }
 
 /* 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;
 }
@@ -74,19 +74,19 @@ html.sap-desktop .sapMST:active .sapMSTFocusDiv:after {
 	text-shadow: 0px 1px @sapUiButtonEmphasizedTextShadow;
 }
 
-html.sap-desktop .sapMST:focus .sapMSTFocusDiv {
+.sapMST:focus .sapMSTFocusDiv {
 	border-radius: @sapTile_BorderCornerRadius;
 	box-shadow: none;
 	inset: 0;
 }
 
-html.sap-desktop .sapMST:focus .sapMSTFocusDiv:after,
-html.sap-desktop .sapMST:active .sapMSTFocusDiv:after {
+.sapMST:focus .sapMSTFocusDiv:after,
+.sapMST:active .sapMSTFocusDiv:after {
 	border: none;
 	border-radius: @sapElement_BorderCornerRadius;
 }
 
-html.sap-desktop .sapMST:hover {
+.sapMST:hover {
 	box-shadow: @sapContent_Shadow2 !important;
 
 	.sapMGT:hover {
@@ -96,7 +96,7 @@ html.sap-desktop .sapMST:hover {
 
 }
 
-html.sap-desktop .sapMST:active{
+.sapMST:active{
 	.sapMGT{
 		opacity: 0.8;
 	}

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

@@ -3,17 +3,18 @@
 /* Evening Horizon 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.375rem;
 	color: @sapTextColor;
 	font-size: @sapFontSize;
+	overflow: visible;
 }
 
 .sapMTokenSelected,
@@ -24,6 +25,13 @@
 	font-family: @sapFontSemiboldDuplexFamily;
 }
 
+.sapMTokenIcon::before {
+	display: inline-block;
+	width: 0.75rem;
+	height: 0.75rem;
+	line-height: 1;
+}
+
 .sapMToken.sapMTokenSelected::before {
 	content: '';
 	position: absolute;
@@ -57,7 +65,7 @@ html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
 }
 
 html.sap-desktop .sapMToken:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiFieldActiveBorderColor;
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 	border-radius: 0.5rem;
 	outline-offset: 0.0625rem;
 }
@@ -83,7 +91,19 @@ html.sap-desktop .sapUiSizeCondensed .sapMToken:focus {
 	}
 }
 
-.sapUiSizeCompact .sapMToken .sapMTokenIcon {
-	line-height: 1.25rem;
-	padding: 0 0.375rem;
+.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/m/themes/sap_horizon_hcb/ActionSelect.less

@@ -8,6 +8,7 @@
 /* ----------------------------- */
 
 html.sap-desktop .sapMActionSelectPicker .sapMBtn {
+
 	.sapMBtnInner {
 		border-top: 1px solid @sapUiButtonActionSelectBorderColor;
 		border-bottom: 0;
@@ -34,7 +35,7 @@ html.sap-phone .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent .sapMBtn .
 
 .sapMActionSelectPicker .sapMBtnDefault {
 	background: @sapUiButtonActionSelectBackground;
-	border-color: @sapUiListBorderColor;
+	border-color: var(--sapList_BorderColor);
 
 	/* override the default text-shadow */
 	text-shadow: none;
@@ -42,7 +43,7 @@ html.sap-phone .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent .sapMBtn .
 
 .sapMActionSelectPicker .sapMBtn,
 .sapMActionSelectPicker .sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
-	border-color: @sapUiListBorderColor;
+	border-color: var(--sapList_BorderColor);
 }
 
 html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled) .sapMBtnDefault:not(.sapMBtnActive):hover {
@@ -67,7 +68,7 @@ html.sap-desktop .sapUiSizeCompact.sapMActionSelectPicker .sapMBtnInner {
 	height: 2rem;
 	border-radius: 0;
 	border: 0;
-	border-top: 1px solid @sapUiListBorderColor;
+	border-top: 1px solid var(--sapList_BorderColor);
 
 	.sapMBtnContent {
 		line-height: 2rem;

package/src/sap/m/themes/sap_horizon_hcb/ActionSheet.less

@@ -4,26 +4,26 @@
 /* ================================== */
 
 .sapMActionSheetPopover.sapMPopover {
-	box-shadow: @sapUiContentShadow2;
+	box-shadow: var(--sapContent_Shadow2);
 }
 
 .sapMActionSheetDialog .sapMBar.sapMHeader-CTX > .sapMBarMiddle > .sapMBarPH > .sapMDialogTitle {
-	color: @sapUiPageHeaderTextColor;
-	font-size: @sapMFontHeader5Size;
-	font-family: @sapFontHeaderFamily;
+	color: var(--sapPageHeader_TextColor);
+	font-size: var(--sapFontHeader5Size);
+	font-family: var(--sapFontHeaderFamily);
 }
 
 .sapMDialog.sapMActionSheetDialog {
-	background-color: @sapUiPageHeaderBackground;
-	border-top-left-radius: @sapUiElementBorderCornerRadius;
-	border-top-right-radius: @sapUiElementBorderCornerRadius;
-	box-shadow: @sapUiContentShadow3;
+	background-color: var(--sapPageHeader_Background);
+	border-top-left-radius: var(--sapElement_BorderCornerRadius);
+	border-top-right-radius: var(--sapElement_BorderCornerRadius);
+	box-shadow: var(--sapContent_Shadow3);
 
 	&.sapMDialogPhone .sapMIBar.sapMHeader-CTX {
-		box-shadow: @sapUiContentHeaderShadow;
-		background-color: @sapUiPageHeaderBackground;
-		border-top-left-radius: @sapUiElementBorderCornerRadius;
-		border-top-right-radius: @sapUiElementBorderCornerRadius;
+		box-shadow: var(--sapContent_HeaderShadow);
+		background-color: var(--sapPageHeader_Background);
+		border-top-left-radius: var(--sapElement_BorderCornerRadius);
+		border-top-right-radius: var(--sapElement_BorderCornerRadius);
 	}
 
 	&.sapUiPopupWithPadding:not(.sapUiNoContentPadding) .sapMDialogScrollCont {