@openui5/themelib_sap_horizon 1.128.0 → 1.130.0

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

@@ -4,32 +4,34 @@
 /* =========================== */
 
 .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 {
 		border-radius: 0.125rem;
-		background-color: @sapUiContentFocusColor;
-		color: @sapUiContentContrastTextColor;
+		background-color: var(--sapContent_FocusColor);
+		color: var(--sapContent_ContrastTextColor);
 		text-shadow: none;
 		outline: none;
 
@@ -39,23 +41,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/RatingIndicator.less

@@ -56,7 +56,6 @@ html.sap-desktop .sapMRI:focus:not(.sapMRIDisabled):not(.sapMRIDisplayOnly){
 .sapMRIDisplayOnly .sapMRIUnsel .sapMRIunratedIcon,
 .sapMRIDisabled .sapMRIUnsel .sapMRIunratedIcon {
 	font-size: 75% !important;
-	vertical-align: baseline;
 }
 
 .sapUiSizeCompact {
@@ -67,7 +66,6 @@ html.sap-desktop .sapMRI:focus:not(.sapMRIDisabled):not(.sapMRIDisplayOnly){
 	&.sapMRIDisabled .sapMRIUnsel .sapMRIunratedIcon,
 	&.sapMRIDisabled .sapMRIIconSel .sapMRIunratedIcon {
 		font-size: 75% !important;
-		vertical-align: baseline;
 	}
 
 	& .sapMRISel,

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

@@ -3,7 +3,7 @@
 /* Horizon theme                    */
 /* ================================ */
 
-html.sap-desktop .sapMST:active{
+.sapMST:active{
 	background-color: @sapTile_Active_Background;
 	.sapMSTFocusDiv{
 		border: 1px solid @sapTile_Interactive_BorderColor;
@@ -19,8 +19,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;
@@ -33,14 +33,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;
 }
@@ -72,19 +72,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 {
@@ -94,7 +94,7 @@ html.sap-desktop .sapMST:hover {
 
 }
 
-html.sap-desktop .sapMST:active{
+.sapMST:active{
 	.sapMGT{
 		opacity: 0.8;
 	}

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

@@ -277,6 +277,24 @@
 	border-color: @sapUiContentContrastFocusColor;
 }
 
+.sapMSB.sapMSBEmphasized:focus {
+	.sapMSBInner:has(.sapMBtn):has(.sapMBtnActive)::after {
+		border-color: transparent;
+	}
+	.sapMBtnActive.sapMFocusable:not(.sapMBadgeIndicator)::before {
+		content: '';
+		position: absolute;
+		box-sizing: border-box;
+		left: 0.0625rem;
+		top: 0.0625rem;
+		right: 0.0625rem;
+		bottom: 0.0625rem;
+		border: 0.125rem solid var(--sapContent_FocusColor);
+		pointer-events: none;
+		border-radius: 0.375rem;
+	}
+}
+
 .sapMSB .sapMSBText:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
 	margin-right: 2.25rem;
 }

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

@@ -3,17 +3,18 @@
 /* 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;
@@ -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_dark/ActionSelect.less

@@ -8,8 +8,9 @@
 /* ----------------------------- */
 
 html.sap-desktop .sapMActionSelectPicker .sapMBtn {
+
 	.sapMBtnInner {
-		border-top: 1px solid @sapUiListBorderColor;
+		border-top: 1px solid var(--sapList_BorderColor);
 		border-bottom: 0;
 		border-left: 0;
 		border-right: 0;
@@ -30,19 +31,19 @@ html.sap-phone .sapMActionSelectPicker .sapMBtn .sapMBtnInner {
 }
 
 html.sap-phone .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent > .sapMBtn {
-	border: 1px solid @sapUiListBorderColor;
+	border: 1px solid var(--sapList_BorderColor);
 	border-bottom: none;
 }
 
 html.sap-phone .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent > .sapMBtn ~ .sapMBtn {
-	border: 1px solid @sapUiListBorderColor;
+	border: 1px solid var(--sapList_BorderColor);
 }
 
 /* override standard buttons inside the action select */
 
 .sapMActionSelectPicker .sapMBtnDefault {
-	background: @sapUiListBackground;
-	border-color: @sapUiListBorderColor;
+	background: var(--sapList_Background);
+	border-color: var(--sapList_BorderColor);
 
 	/* override the default text-shadow */
 	text-shadow: none;
@@ -50,11 +51,11 @@ 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 {
-	background: @sapUiListHoverBackground;
+	background: var(--sapList_Hover_Background);
 }
 
 /* ================================================================================ */
@@ -75,18 +76,18 @@ 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;
 	}
 }
 
-.sapMActionSelectPicker.sapMSltPicker-CTX .sapMSelectListItemBaseSelected.sapMActionSelectItemWithoutFocus:after {
+.sapMActionSelectPicker.sapMSltPicker-CTX .sapMSelectListItemBaseSelected.sapMActionSelectItemWithoutFocus::after {
 	border: none;
 }
 
-html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled):focus > .sapMBtnInner:before {
+html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled):focus > .sapMBtnInner::before {
 	border-radius: 0;
 	left: 0.125rem;
 	top: 0.125rem;

package/src/sap/m/themes/sap_horizon_dark/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;
+	color: var(--sapPageHeader_TextColor);
+	font-size: var(--sapFontHeader5Size);
 	font-weight: bold;
 }
 
 .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 {

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

@@ -10,10 +10,10 @@
 @_sap_m_Avatar_Font_Size_XS: 1rem;
 
 .sapFAvatarSquare {
-	border-radius: @sapUiElementBorderCornerRadius;
+	border-radius: var(--sapElement_BorderCornerRadius);
 
 	.sapFAvatarImageHolder {
-		border-radius: @sapUiElementBorderCornerRadius;
+		border-radius: var(--sapElement_BorderCornerRadius);
 	}
 }
 
@@ -22,23 +22,24 @@
 }
 
 .sapFAvatarFocusable.sapMAvatarPressed {
-	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+	box-shadow: 0 0 0 0.125rem var(--sapContent_FocusColor);
 
 	&:hover {
-		box-shadow: 0px 0px 0px 0.125rem @sapUiButtonSelectedHoverBorderColor;
+		box-shadow: 0 0 0 0.125rem var(--sapButton_Selected_Hover_BorderColor);
 	}
 }
 
 .sapFAvatarFocusable:focus {
-	outline-offset: .125rem;
+	outline-offset: 0.125rem;
+
 	&.sapFAvatarSquare {
-		outline-offset: .125rem;
+		outline-offset: 0.125rem;
 	}
 }
 
 .sapFAvatarColorTileIcon {
-	background-color: @sapUiTileBackground;
-	color: @sapUiTileIconColor;
+	background-color: var(--sapTile_Background);
+	color: var(--sapTile_IconColor);
 
 	.sapFAvatarInitialsHolder {
 		color: currentColor;
@@ -46,8 +47,9 @@
 }
 
 .sapFAvatarColorPlaceholder {
-	background-color: @sapUiContentImagePlaceholderBackground;
-	color: @sapUiContentImagePlaceholderForegroundColor;;
+	background-color: var(--sapContent_ImagePlaceholderBackground);
+	color: var(--sapContent_ImagePlaceholderForegroundColor);
+
 	.sapFAvatarInitialsHolder {
 		color: currentColor;
 	}

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

@@ -7,7 +7,7 @@
 	text-shadow: none;
 }
 
-.sapMBarLeft{
+.sapMBarLeft {
 	padding-left: 1rem;
 	padding-right: 0.25rem;
 }
@@ -24,25 +24,25 @@
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:first-child,
 .sapMBar .sapMBarLeft.sapMBarContainer > *:first-child,
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child{
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child {
 	margin: 0 0.25rem 0 0;
 }
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:last-child,
 .sapMBar .sapMBarLeft.sapMBarContainer > *:last-child,
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:last-child{
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:last-child {
 	margin: 0 0 0 0.25rem;
 }
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:not(:first-child):not(:last-child),
 .sapMBar .sapMBarLeft.sapMBarContainer > *:not(:first-child):not(:last-child),
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:not(:first-child):not(:last-child){
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:not(:first-child):not(:last-child) {
 	margin: 0 0.5rem;
 }
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:first-child:last-child,
 .sapMBar .sapMBarLeft.sapMBarContainer > *:first-child:last-child,
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child:last-child{
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child:last-child {
 	margin: 0;
 }
 
@@ -51,7 +51,9 @@
 	line-height: 2.75rem;
 }
 
-.sapMBarLeft, .sapMBarRight, .sapMBarPH {
+.sapMBarLeft,
+.sapMBarRight,
+.sapMBarPH {
 	height: 2.75rem;
 	line-height: 2.75rem;
 }
@@ -59,17 +61,17 @@
 /* in Master page the bar should have different color */
 .sapMSplitContainerMaster .sapMIBar .sapMHeader-CTX,
 .sapMSplitContainerMaster .sapMIBar.sapMSubHeader-CTX {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 /* in Master page the bar should have a different color shadow only if we don't have subHeader (e.g. another bar) */
 .sapMSplitContainerMaster .sapMIBar .sapMHeader-CTX:only-of-type {
-	box-shadow: inset 0 -0.0625rem @sapUiGroupContentBorderColor;
+	box-shadow: inset 0 -0.0625rem var(--sapGroup_ContentBorderColor);
 }
 
 /* in Master page the bar should have a different color shadow */
 .sapMSplitContainerMaster .sapMIBar.sapMSubHeader-CTX {
-	box-shadow: inset 0 -0.0625rem @sapUiGroupContentBorderColor;
+	box-shadow: inset 0 -0.0625rem var(--sapGroup_ContentBorderColor);
 }
 
 /* Bar Title Alignment */
@@ -82,5 +84,5 @@ html[data-sap-ui-browser^="ff"].sap-desktop .sapMBarTitleAlignAuto .sapMBarPH {
 }
 
 .sapMIBar-CTX.sapMFooter-CTX {
-	border-top: 0.0625rem solid @sapUiPageFooterBorderColor;
+	border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
 }

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

@@ -10,6 +10,8 @@
 @_sap_m_Carousel_BackgroundColorSolid: var(--sapGroup_ContentBackground);
 @_sap_m_Carousel_BackgroundColorTranslucent: var(--sapBackgroundColor);
 @_sap_m_Carousel_MinWidth: 15.5rem;
+@_sap_m_Carousel_PageIndicatorBarHeight: 2.75rem;
+@_sap_m_Carousel_BottomArrowsOffset: calc(~'2.75rem + 1px');
 @_sap_m_Carousel_ControlsNoArrowsHeight: 2.75rem;
 @_sap_m_Carousel_NumericIndicatorTextColor: var(--sapPageFooter_TextColor);
 @_sap_m_Carousel_PrevAndNextSize: 2.125rem;

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/ColumnListItem.less

@@ -10,19 +10,19 @@
 /* note: adding border-top to the sibling row is not suitable as the sibling row can be hidden and in such case the selection border is lost */
 .sapMTableTBody:not(.sapMListTblHasPopin) > .sapMLIBSelected,
 .sapMTableTBody.sapMListTblHasPopin > .sapMLIBSelected + .sapMListTblSubRow {
-	box-shadow: inset 0px -0.0625rem @sapUiListSelectionBorderColor;
+	box-shadow: inset 0px -0.0625rem var(--sapList_SelectionBorderColor);
 }
 
 /* selection border indicator was not visible on the last row as the td elements within the last row have a bottom border */
 /* hence applying -0.125rem so that the selection border is visible */
 .sapMTableTBody:not(.sapMListTblHasPopin) > .sapMLIBSelected:last-child,
 .sapMTableTBody.sapMListTblHasPopin > .sapMLIBSelected + .sapMListTblSubRow:last-child {
-	box-shadow: inset 0px -0.125rem @sapUiListSelectionBorderColor;
+	box-shadow: inset 0px -0.125rem var(--sapList_SelectionBorderColor);
 }
 
-// Safari work-around as box-shadow is not supported on the <tr> element,
-// hence adding the selection indicator box-shadow to the <td> element
+/* Safari work-around as box-shadow is not supported on the <tr> element, */
+/* hence adding the selection indicator box-shadow to the <td> element */
 html[data-sap-ui-browser^="sf"] .sapMTableTBody:not(.sapMListTblHasPopin) > .sapMLIBSelected > td,
 html[data-sap-ui-browser^="sf"] .sapMTableTBody.sapMListTblHasPopin > .sapMLIBSelected + .sapMListTblSubRow > td {
-	box-shadow: inset 0px -0.0625rem @sapUiListSelectionBorderColor;
+	box-shadow: inset 0px -0.0625rem var(--sapList_SelectionBorderColor);
 }