@openui5/themelib_sap_horizon 1.128.0 → 1.129.0

package/THIRDPARTY.txt

@@ -468,7 +468,7 @@ License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: lib/jsdoc/ui5/plugin.js
 
-Component: SAP Theming Base Content, version: 11.16.1
+Component: SAP Theming Base Content, version: 11.18.0
 Copyright: SAP SE or an SAP affiliate company and Theming Base Content contributors
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt

package/package.json

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

package/src/sap/m/themes/sap_horizon/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;
@@ -26,23 +27,22 @@ html.sap-desktop .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent .sapMBtn
 }
 
 html.sap-phone .sapMActionSelectPicker .sapMBtn .sapMBtnInner {
-   border: none;
+	border: none;
 }
 
 html.sap-phone .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent > .sapMBtn {
-   border: 1px solid @sapUiListBorderColor;
-   border-bottom: none;
+	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 +50,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 +75,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 {
 	display: 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/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 {

package/src/sap/m/themes/sap_horizon/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 @sapUiButtonBorderWidth @sapUiButtonSelectedBorderColor;
+	box-shadow: 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Selected_BorderColor);
 
 	&:hover {
-		box-shadow: 0px 0px 0px @sapUiButtonBorderWidth @sapUiButtonSelectedHoverBorderColor;
+		box-shadow: 0 0 0 var(--sapButton_BorderWidth) 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/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,14 +61,14 @@
 /* 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,
 /* 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 */
@@ -79,5 +81,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/ColorPalette.less

@@ -8,68 +8,80 @@
 
 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 +93,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 +144,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 +153,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/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/Dialog.less

@@ -3,27 +3,27 @@
 /* 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,4 +126,4 @@ html.sap-phone .sapMDialog {
 			padding-bottom: 0;
 		}
 	}
-}
+}

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

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