@openui5/themelib_sap_horizon 1.135.0 → 1.136.0

package/src/sap/f/themes/sap_horizon_hcw/DynamicPageTitle.less

@@ -5,11 +5,11 @@
 
 html.sap-desktop .sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
 	outline-width: 0.125rem;
-	outline-offset: -0.25rem; // due to bottom border overlapping
+	outline-offset: -0.25rem; /* due to bottom border overlapping */
 }
 
 .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnappedTitleOnMobile > .sapFDynamicPageTitle {
-	border-bottom: 1px solid @sapUiObjectHeaderBorderColor;
+	border-bottom: 1px solid var(--sapObjectHeader_BorderColor);
 }
 
 .sapFDynamicPageTitle {
@@ -18,7 +18,7 @@ html.sap-desktop .sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
 
 	&.sapFDynamicPageTitleTransparent,
 	&.sapFDynamicPageTitleTranslucent {
-		background: @sapUiObjectHeaderBackground;
+		background: var(--sapObjectHeader_Background);
 	}
 }
 
@@ -27,19 +27,21 @@ html.sap-desktop .sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
 }
 
 .sapFDynamicPage-Std-Tablet {
+
 	.sapFDynamicPageTitle,
 	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
 		padding: 0.5rem 2rem;
 	}
 
-	// Needed because on some high-end phones in landscape mode,
-	// the width of the viewport is bigger than 600 (Tablet breakpoint).
+	/* Needed because on some high-end phones in landscape mode,
+	the width of the viewport is bigger than 600 (Tablet breakpoint). */
 	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnappedTitleOnMobile > .sapFDynamicPageTitle {
 		padding: 0 2rem;
 	}
 }
 
 .sapFDynamicPage-Std-Phone {
+
 	.sapFDynamicPageTitle,
 	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleOnly > .sapFDynamicPageTitle,
 	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
@@ -56,7 +58,7 @@ html.sap-desktop .sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
 	padding: 0;
 }
 
-// General alignment styles for header text
+/* General alignment styles for header text */
 .sapFDynamicPageTitleMain > .sapFDynamicPageTitleMainInner .sapFDynamicPageTitleMainHeading {
 	align-self: center;
 }
@@ -69,49 +71,32 @@ html.sap-desktop .sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
 	margin-left: 0;
 }
 
-/* IE and Edge ignores outline-offset. Use an overlay: */
-/* TODO remove after the end of support for Internet Explorer */
-html[data-sap-ui-browser^="ie"].sap-desktop,
-html[data-sap-ui-browser^="ed"].sap-desktop {
-	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
-		outline: none;
-		position: relative;
-	}
-	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus:before {
-		content: " ";
-		box-sizing: border-box;
-		width: 100%;
-		height: 98%; // due to bottom border overlapping
-		position: absolute;
-		left: 0;
-		top: 0;
-		border: 0.125rem dashed @sapUiContentFocusColor;
-		pointer-events: none;
-	}
-}
-
 /* Firefox fix due to focus cut out from top and left */
-html[data-sap-ui-browser^="ff"].sap-desktop {
+html[data-sap-ui-browser^='ff'].sap-desktop {
+
 	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
 		outline: none;
 		position: relative;
 	}
-	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus:before {
-		content: " ";
+
+	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus::before {
+		content: '';
 		box-sizing: border-box;
 		width: 100%;
-		height: 98%; // due to bottom border overlapping
+		height: 98%; /* due to bottom border overlapping */
 		position: absolute;
 		left: 0;
 		top: 0;
-		border: 0.125rem dotted @sapUiContentFocusColor;
+		border: 0.125rem dotted  var(--sapContent_FocusColor);
 		pointer-events: none;
 	}
 }
 
 .sapFDynamicPageNavigation .sapFDynamicPageTitleWrapper {
+
 	&.sapFDynamicPageTitleSnapped,
 	&.sapFDynamicPageTitleOnly {
+
 		& > .sapFDynamicPageTitle {
 			box-shadow: none;
 		}
@@ -119,6 +104,7 @@ html[data-sap-ui-browser^="ff"].sap-desktop {
 }
 
 .sapUiSizeCompact {
+
 	.sapFDynamicPageTitle .sapMTB {
 		height: 2.75rem;
 	}

package/src/sap/f/themes/sap_horizon_hcw/FlexibleColumnLayout.less

@@ -3,32 +3,33 @@
 /* Horizon High Contrast White theme           */
 /* =========================================== */
 
-// Cozy mode
+/* Cozy mode */
 .sapFFCL > {
+
 	&.sapFFCLBackgroundDesignSolid {
-		background: @sapUiContentForegroundColor;
+		background: var(--sapContent_ForegroundColor);
 	}
 
 	&.sapFFCLBackgroundDesignTranslucent {
-		background: @sapUiBaseBG;
+		background: var(--sapBackgroundColor);
 	}
 
 	&.sapFFCLBackgroundDesignTransparent {
-		background: @sapUiBaseBG;
+		background: var(--sapBackgroundColor);
 	}
 
 	& > .sapFFCLColumnMid.sapFFCLColumnActive {
-		border-left: 0.0625rem solid @sapUiGroupContentBorderColor;
-		border-right: 0.0625rem solid @sapUiGroupContentBorderColor;
+		border-left: 0.0625rem solid var(--sapGroup_ContentBorderColor);
+		border-right: 0.0625rem solid var(--sapGroup_ContentBorderColor);
 	}
 
 	& > .sapFFCLColumnActive.sapFFCLColumnLastActive {
 		border-right: none;
-		border-left: 0.0625rem solid @sapUiGroupContentBorderColor;
+		border-left: 0.0625rem solid var(--sapGroup_ContentBorderColor);
 	}
 
 	& > .sapFFCLColumnActive.sapFFCLColumnFirstActive {
-		border-right: 0.0625rem solid @sapUiGroupContentBorderColor;
+		border-right: 0.0625rem solid var(--sapGroup_ContentBorderColor);
 		border-left: none;
 	}
 
@@ -39,25 +40,29 @@
 }
 
 .sapFFCL {
+
 	.sapFFCLNavigationButton {
+
 		.sapMBtnInner {
-			border: 0.0625rem solid @sapUiButtonBorderColor;
+			border: 0.0625rem solid var(--sapButton_BorderColor);
 
 			.sapMBtnIcon {
 				width: auto;
 			}
 		}
-		&:before,
-		&:after {
+
+		&::before,
+		&::after {
 			background-size: 0.125rem 100%;
 			background-position-x: calc(50% - 0.0625rem);
 		}
-		&:before {
-			background-image: linear-gradient(to top, @sapUiObjectHeaderBorderColor, fade(@sapUiObjectHeaderBorderColor, 0));
+
+		&::before {
+			background-image: linear-gradient(to top, var(--sapObjectHeader_BorderColor), fade(@sapUiObjectHeaderBorderColor, 0));
 		}
 
-		&:after {
-			background-image: linear-gradient(to bottom, @sapUiObjectHeaderBorderColor, fade(@sapUiObjectHeaderBorderColor, 0));
+		&::after {
+			background-image: linear-gradient(to bottom, var(--sapObjectHeader_BorderColor), fade(@sapUiObjectHeaderBorderColor, 0));
 		}
 	}
-}
+}

package/src/sap/f/themes/sap_horizon_hcw/GridList.less

@@ -1,6 +1,6 @@
-/* ================================= */
-/* CSS for control sap.f/GridList    */
-/* Horizon High Contrast White theme */
-/* ================================= */
+/* ================================== */
+/* CSS for control sap.f/GridList     */
+/* Horizon High Contrast White theme  */
+/* ================================== */
 
 @_sap_f_GridList_ItemFocusBorderRadius: unset;

package/src/sap/f/themes/sap_horizon_hcw/SidePanel.less

@@ -1,30 +1,37 @@
-/* ================================= */
-/* CSS for control sap.f/SidePanel   */
-/* Horizon High Contrast White theme */
-/* ================================= */
+/* ================================== */
+/* CSS for control sap.f/SidePanel    */
+/* Horizon High Contrast White theme  */
+/* ================================== */
 
-@_sap_ui_layout_Splitter_BarDecorationColors: @sapUiObjectHeaderBorderColor, fade(@sapUiObjectHeaderBorderColor, 0);
-@_sap_ui_layout_Splitter_BarActiveDecorationColors: @sapUiObjectHeaderBorderColor, @sapUiObjectHeaderBorderColor;
+@_sap_ui_layout_Splitter_BarDecorationColors: var(--sapObjectHeader_BorderColor), fade(@sapUiObjectHeaderBorderColor, 0);
+@_sap_ui_layout_Splitter_BarActiveDecorationColors: var(--sapObjectHeader_BorderColor), var(--sapObjectHeader_BorderColor);
 
 .sapFSP {
+
 	.sapFSPSplitterBar {
+
 		&:hover {
+
 			.sapFSPSplitterBarGripIcon {
-				background: @sapUiHighlight;
+				background: var(--sapHighlightColor);
 			}
 		}
 	}
+
 	.sapFSPSide {
+
 		.sapFSPSideInner {
-			border: 0.0625rem solid @sapUiGroupContentBorderColor;
+			border: 0.0625rem solid var(--sapGroup_ContentBorderColor);
 			box-sizing: content-box;
 
 			.sapFSPActionBar {
 
 				.sapFSPItem {
+
 					&.sapFSPSelected {
+
 						.sapUiIcon {
-							background-color: @sapUiContentSelectedBackground;
+							background-color: var(--sapContent_Selected_Background);
 							border-width: 0.125rem;
 						}
 
@@ -34,8 +41,9 @@
 					}
 
 					&:focus {
+
 						&::after {
-							border: 0.125rem dotted @sapUiContentFocusColor;
+							border: 0.125rem dotted var(--sapContent_FocusColor);
 						}
 					}
 				}

package/src/sap/f/themes/sap_horizon_hcw/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

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

@@ -6,7 +6,7 @@
 .sapMTB-Info-CTX > .sapMLabel {
 	font-style: italic;
 
-	& > .sapMLabelTextWrapper {
+	.sapMLabelTextWrapper {
 		padding-right: 5px;
 	}
 }
@@ -15,4 +15,12 @@
 .sapMListTbl .sapMColumnHeader .sapMLabel {
 	font-family: var(--sapFontSemiboldDuplexFamily);
 	font-weight: normal;
+}
+
+/* ========================================================== */
+/* Checkbox overrides */
+/* ========================================================== */
+
+.sapMCb .sapMLabel {
+	color: var(--sapField_TextColor);
 }

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

@@ -37,7 +37,6 @@
 /* Bulleted indicator of multiple tiles */
 .sapMSTBulleted .sapMSTIndicator {
 	border: solid 0.0625rem var(--sapTile_OverlayForegroundColor);
-	opacity: 0.6;
 	box-shadow: 0 0 0.125rem var(--sapContent_ShadowColor);
 	margin: 0 0.094rem;
 }

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

@@ -8,7 +8,8 @@
 
 .sapMTileCnt.News {
 	background-color: var(--sapTile_OverlayBackground);
-	.sapMTileCntContent{
+
+	.sapMTileCntContent {
 		height: 3.625rem;
 	}
 }

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

@@ -12,17 +12,17 @@
 .sapMToken {
 	padding-left: @_sap_m_Token_LeftPadding;
 	border-radius: 0.375rem;
-	color: @sapTextColor;
-	font-size: @sapFontSize;
+	color: var(--sapTextColor);
+	font-size: var(--sapFontSize);
 	overflow: visible;
 }
 
 .sapMTokenSelected,
 .sapMToken.sapMTokenReadOnly.sapMTokenSelected {
-	background: @sapUiButtonSelectedBackground;
-	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedBorderColor;
+	background: var(--sapButton_Selected_Background);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
 	border-radius: 0.375rem;
-	font-family: @sapFontSemiboldDuplexFamily;
+	font-family: var(--sapFontSemiboldDuplexFamily);
 }
 
 .sapMTokenIcon::before {
@@ -41,18 +41,18 @@
 	left: 0;
 	right: 0;
 	height: 2px;
-	background-color: @sapUiButtonSelectedBorderColor;
+	background-color: var(--sapButton_Selected_BorderColor);
 }
 
 html.sap-desktop .sapMToken:not(.sapMTokenSelected):not(.sapMTokenReadOnly):not(:focus):hover {
-	background: @sapUiButtonHoverBackground;
-	border: @sapUiButtonBorderWidth solid @sapUiButtonTokenBorderColor;
+	background: var(--sapButton_Hover_Background);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);
 	border-radius: 0.375rem;
 }
 
 html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
-	background: @sapUiButtonSelectedHoverBackground;
-	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedBorderColor;
+	background: var(--sapButton_Selected_Hover_Background);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
 }
 
 .sapMToken.sapMTokenReadOnly {
@@ -65,13 +65,13 @@ html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
 }
 
 html.sap-desktop .sapMToken:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: 0.5rem;
 	outline-offset: 0.0625rem;
 }
 
 html.sap-desktop .sapMToken:not(.sapMTokenSelected):not(.sapMTokenReadOnly):focus:hover {
-	border: @sapUiButtonBorderWidth solid @sapUiButtonTokenBorderColor;
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);
 }
 
 html.sap-desktop .sapUiSizeCompact .sapMToken:focus,
@@ -99,7 +99,7 @@ html.sap-desktop .sapUiSizeCondensed .sapMToken:focus {
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
-	right: -@sapUiButtonBorderWidth;
+	right: ~"calc(var(--sapButton_BorderWidth) * -1)";
 }
 
 .sapUiSizeCompact .sapMTokenIcon {

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

@@ -21,9 +21,9 @@
 }
 
 html.sap-desktop .sapMTokenizer:focus {
-	outline: 2px solid @sapContent_FocusColor;
+	outline: 2px solid var(--sapContent_FocusColor);
 	outline-offset: -0.125rem;
-	border-radius: @sapField_BorderCornerRadius;
+	border-radius: var(--sapField_BorderCornerRadius);
 }
 
 /* editable tokens in read-only tokenizer */
@@ -36,50 +36,51 @@ html.sap-desktop .sapMTokenizer:focus {
 }
 
 .sapUiSizeCompact {
+
 	.sapMTokenizer {
 		padding-left: 0.25rem;
+
 		&.sapMTokenizerReadonly .sapMToken.sapMTokenReadOnly {
 			padding: 0.125rem 0.25rem;
 		}
+
 		.sapMToken {
 			margin-right: 0.25rem;
 		}
 	}
 }
 
-/* ------------------------------ */
-/* Disabled                       */
-/* ------------------------------ */
+/* Disabled */
+
+.sapMTokenizer.sapMTokenizerDisabled .sapMToken {
 
-.sapMTokenizer.sapMTokenizerDisabled .sapMToken  {
 	&:hover,
 	&:focus,
 	&.sapMTokenSelected,
 	&.sapMTokenSelected:focus,
 	&.sapMToken.sapMTokenSelected:hover,
 	&.sapMToken:not(.sapMTokenSelected):not(:focus):hover {
-		background: @sapButton_TokenBackground;
+		background: var(--sapButton_TokenBackground);
 		cursor: default;
-		color: @sapUiBaseText;
+		color: var(--sapTextColor);
 		outline: none;
-		border: 1px solid @sapButton_TokenBorderColor;
-		border-radius: @sapButton_BorderCornerRadius;
+		border: 1px solid var(--sapButton_TokenBorderColor);
+		border-radius: var(--sapButton_BorderCornerRadius);
 		box-shadow: none;
 	}
 
-	&:focus:after {
+	&:focus::after {
 		content: none;
 	}
 
 	.sapMTokenText,
 	.sapMTokenIcon {
-		color: @sapUiBaseText;
+		color: var(--sapTextColor);
 	}
 
 	.sapMTokenIcon {
 		cursor: default;
 	}
-
 }
 
 .sapMTokenizer.sapMTokenizerDisabled .sapMTokenizerIndicator {
@@ -88,5 +89,5 @@ html.sap-desktop .sapMTokenizer:focus {
 
 .sapMTokenizer.sapMTokenizerReadonly .sapMTokenizerIndicator,
 .sapMTokenizer .sapMTokenizerIndicator {
-	color: @sapLinkColor;
-}
+	color: var(--sapLinkColor);
+}

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

@@ -4,7 +4,7 @@
 /* ============================== */
 
 html.sap-desktop .sapMTBActive.sapMTBFocused {
-	outline: 0.0625rem dotted @sapUiContentFocusColor;
+	outline: 0.0625rem dotted var(--sapContent_FocusColor);
 	outline-offset: -0.1875rem;
 }
 
@@ -24,30 +24,30 @@ html.sap-desktop .sapMTBActive.sapMTBFocused {
 
 /* Info Toolbar Context */
 .sapMTB-Info-CTX.sapMTB {
-	background: @sapUiInfobarNonInteractiveBackground;
-	color: @sapUiListTextColor;
+	background: var(--sapInfobar_NonInteractive_Background);
+	color: var(--sapList_TextColor);
 	height: 2rem;
 
 	> .sapUiIcon {
 		width: 1rem;
 		height: 1rem;
-		color: @sapUiListTextColor;
+		color: var(--sapList_TextColor);
 	}
 
 	> .sapUiIcon:focus {
-		color: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		color: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	}
 
 	&.sapMTBActive {
-		background: @sapUiInfobarBackground;
-		color: @sapUiInfobarTextColor;
+		background: var(--sapInfobar_Background);
+		color: var(--sapInfobar_TextColor);
 
 		&:active {
-			background: @sapUiInfobarActiveBackground;
+			background: var(--sapInfobar_Active_Background);
 		}
 
 		&:hover {
-			background: @sapUiInfobarHoverBackground;
+			background: var(--sapInfobar_Hover_Background);
 		}
 
 		.sapMText,
@@ -59,32 +59,30 @@ html.sap-desktop .sapMTBActive.sapMTBFocused {
 }
 
 html.sap-desktop .sapMTB-Info-CTX.sapMTBActive.sapMTBFocused {
-	outline-color: @sapUiContentContrastFocusColor;
+	outline-color: var(--sapContent_ContrastFocusColor);
 }
 
 .sapMTB.sapMTBStandard {
-	border-bottom: solid 0.0625rem @sapUiGroupTitleBorderColor;
+	border-bottom: solid 0.0625rem var(--sapGroup_TitleBorderColor);
 }
 
-// =====================================
-// solid toolbar context
-// =====================================
+/* solid toolbar context */
 .sapMTB-Solid-CTX.sapMTB {
-	background-color: @sapUiToolbarBackground;
+	background-color: var(--sapToolbar_Background);
 }
 
 html.sap-desktop .sapMTBActive.sapMTBFocused {
 	outline: none;
-	box-shadow: inset 0px 0px 0px @sapUiContentFocusWidth  @sapUiContentFocusColor;
+	box-shadow: inset 0 0 0 var(--sapContent_FocusWidth) var(--sapContent_FocusColor);
 }
 
 .sapMTB .sapMTBSeparator {
-	background: @sapUiToolbarSeparatorColor;
+	background: var(--sapToolbar_SeparatorColor);
 }
 
-// Styles suporting Table inside ObjectPageSubSection scenario
+/* Styles suporting Table inside ObjectPageSubSection scenario */
 .sapUxAPObjectPageLayout .sapUiTableOnObjectPageAdjustmentsForSection .sapMIBar.sapMTB.sapMTBHeader-CTX {
-	background: @sapUiGlobalBackgroundColor;
+	background: var(--sapBackgroundColor);
 	padding: 0;
 }
 

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

@@ -7,5 +7,5 @@
 .sapMLIB.sapMUCListFirstItem,
 .sapMLIB.sapMUCListLastItem,
 .sapMLIB.sapMUCListItem {
-	border-bottom-color: @sapUiListBorderColor;
+	border-bottom-color: var(--sapList_BorderColor);
 }

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

@@ -1,56 +1,61 @@
+/* ============================== */
+/* CSS for control sap.m/Toolbar  */
+/* Horizon theme                  */
+/* ============================== */
+
 .sapMValueStateHeaderRoot {
 	padding: 0.5rem 0.5rem 0.5rem 1.875rem;
 	line-height: 1rem;
 }
 
-.sapMValueStateHeaderSuccess:before {
-	font-family: SAP-icons;
-	content: "\e1c1";
+.sapMValueStateHeaderSuccess::before {
+	font-family: var(--sapContent_IconFontFamily);
+	content: '\e1c1';
 	position: absolute;
 	top: 0.5rem;
-	left: 0rem;
+	left: 0;
 	vertical-align: middle;
 	font-size: 1rem;
-	color: @sapPositiveElementColor;
+	color: var(--sapPositiveElementColor);
 	padding-left: 0.5rem;
 	padding-right: 0.375rem;
 }
 
-.sapMValueStateHeaderError:before {
-	font-family: SAP-icons;
-	content: "\e1ec";
+.sapMValueStateHeaderError::before {
+	font-family: var(--sapContent_IconFontFamily);
+	content: '\e1ec';
 	position: absolute;
 	top: 0.5rem;
-	left: 0rem;
+	left: 0;
 	vertical-align: middle;
 	font-size: 1rem;
-	color: @sapNegativeElementColor;
+	color: var(--sapNegativeElementColor);
 	padding-left: 0.5rem;
 	padding-right: 0.375rem;
 }
 
-.sapMValueStateHeaderWarning:before {
-	font-family: SAP-icons;
-	content: "\e053";
+.sapMValueStateHeaderWarning::before {
+	font-family: var(--sapContent_IconFontFamily);
+	content: '\e053';
 	position: absolute;
 	top: 0.5rem;
-	left: 0rem;
+	left: 0;
 	vertical-align: middle;
 	font-size: 1rem;
-	color: @sapCriticalElementColor;
+	color: var(--sapCriticalElementColor);
 	padding-left: 0.5rem;
 	padding-right: 0.375rem;
 }
 
-.sapMValueStateHeaderInformation:before {
-	font-family: SAP-icons;
-	content: "\e289";
+.sapMValueStateHeaderInformation::before {
+	font-family: var(--sapContent_IconFontFamily);
+	content: '\e289';
 	position: absolute;
 	top: 0.5rem;
-	left: 0rem;
+	left: 0;
 	vertical-align: middle;
 	font-size: 1rem;
-	color: @sapInformativeElementColor;
+	color: var(--sapInformativeElementColor);
 	padding-left: 0.5rem;
 	padding-right: 0.375rem;
 }