@sapui5/sap.suite.ui.commons 1.145.1 → 1.147.0

package/src/sap/suite/ui/commons/themes/base/TimelineItem.less

@@ -1,6 +1,7 @@
-/* ============================================= */
-/* CSS for control sap.suite.ui.commons/TimelineItem.control */
-/* ============================================= */
+/* ================================================== */
+/* CSS for control sap.suite.ui.commons/TimelineItem  */
+/* Base theme                                         */
+/* ================================================== */
 
 .sapSuiteUiCommonsTimelineItemUserPicture {
 	margin: 0.3rem;
@@ -10,10 +11,10 @@
 }
 
 .sapSuiteUiCommonsTimelineItemHeader {
-	margin: 0rem;
+	margin: 0;
 	line-height: normal;
 	word-wrap: break-word;
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
@@ -28,7 +29,7 @@
 }
 
 .sapSuiteUiCommonsTimelineItemShellBottom > .sapMTB {
-	border-bottom: 0px;
+	border-bottom: 0;
 	height: auto;
 }
 
@@ -59,7 +60,7 @@
 }
 
 .sapSuiteUiCommonsTimelineItemHTop .sapSuiteUiCommonsTimelineItemArrow {
-	transform: translateX(0px) translateY(0px) rotate(225deg);
+	transform: translateX(0) translateY(0) rotate(225deg);
 }
 
 .sapMFeedListItemLinkExpandCollapse {
@@ -67,7 +68,7 @@
 }
 
 .sapSuiteUiCommonsTimelineItem {
-	border-bottom: 0px;
+	border-bottom: 0;
 	height: 90pt;
 	width: 100%;
 	border-bottom: 0;
@@ -76,7 +77,7 @@
 }
 
 .sapSuiteUiCommonsTimelineItemOdd {
-	border-bottom: 0px;
+	border-bottom: 0;
 	height: auto;
 	width: 100%;
 	border-bottom: 0;
@@ -89,7 +90,7 @@
 }
 
 .sapSuiteUiCommonsTimelineItemEven {
-	border-bottom: 0px;
+	border-bottom: 0;
 	height: auto;
 	width: 100%;
 	border-bottom: 0;
@@ -121,7 +122,7 @@
 	width: 100%;
 }
 
-.sapSuiteUiCommonsTimelineItemUlWrapper:after {
+.sapSuiteUiCommonsTimelineItemUlWrapper::after {
 	clear: both;
 }
 
@@ -154,7 +155,7 @@
 	width: 0.0625rem;
 	height: 100%;
 	top: 2.1rem;
-	left: 22.930rem;
+	left: 22.93rem;
 }
 
 .sapSuiteUiCommonsTimelineItemBarEven {
@@ -171,18 +172,17 @@
 	left: 0.5rem;
 	height: 2rem;
 	width: 1.875rem;
-	padding: 0.375rem 0rem 0rem 0rem;
-
+	padding: 0.375rem 0 0 0;
 }
 
 .sapSuiteUiCommonsTimelineItemWrapper .sapSuiteUiCommonsTimelineItemIconOdd {
 	position: absolute;
 	font-size: 1.375rem;
-	top: 0rem;
+	top: 0;
 	left: 22rem;
 	height: 2rem;
 	width: 1.875rem;
-	padding: 0.375rem 0rem 0rem 0rem;
+	padding: 0.375rem 0 0 0;
 }
 
 .sapSuiteUiCommonsTimelineItemWrapper .sapSuiteUiCommonsTimelineItemNoIconOdd {
@@ -199,16 +199,13 @@
 	width: 12px;
 	height: 12px;
 	border: 1px solid;
-	-webkit-transform: translateX(0px) translateY(0px) rotate(45deg);
-	transform: translateX(0px) translateY(0px) rotate(45deg);
-	-moz-transform: translateX(0px) translateY(0px) rotate(45deg);
+	transform: translateX(0) translateY(0) rotate(45deg);
 	z-index: 1;
 }
 
 .sapSuiteUiCommonsTimelineItemWrapperV.sapSuiteUiCommonsTimelineItemWrapperVLeft .sapSuiteUiCommonsTimelineItemArrow {
 	border-bottom: none;
 	border-left: none;
-
 	left: 8px;
 	margin-left: auto;
 }
@@ -224,12 +221,12 @@
 }
 
 .sapSuiteUiCommonsTimelineItemOutline:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: 1px;
 }
 
 .sapSuiteUiCommonsTimelineGroupHeaderMainWrapper:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: 1px;
 }
 
@@ -264,8 +261,10 @@
 	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
 }
 
-.sapSuiteUiCommonsTimeline .sapMLIBContent span, .sapSuiteUiCommonsTimeline .sapMLIBContent .sapMText,
-.sapSuiteUiCommonsTimelineH .sapMLIBContent span, .sapSuiteUiCommonsTimelineH .sapMLIBContent .sapMText{
+.sapSuiteUiCommonsTimeline .sapMLIBContent span,
+.sapSuiteUiCommonsTimeline .sapMLIBContent .sapMText,
+.sapSuiteUiCommonsTimelineH .sapMLIBContent span,
+.sapSuiteUiCommonsTimelineH .sapMLIBContent .sapMText {
 	cursor: pointer;
 }
 
@@ -287,7 +286,7 @@
 }
 
 .sapSuiteUiCommonsTimelineItemShellDateTime {
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-size: 0.75rem;
 	font-weight: normal;
 }
@@ -324,7 +323,7 @@
 	height: 92px;
 }
 
-.sapSuiteUiCommonsTimelineGroupCollapsed .sapSuiteUiCommonsTimelineGroupHeaderBarWrapper .sapSuiteUiCommonsTimelineItemBarNoIcon.sapSuiteUiCommonsTimelineGroupNextExpanded.sapSuiteUiCommonsTimelineItemBarV{
+.sapSuiteUiCommonsTimelineGroupCollapsed .sapSuiteUiCommonsTimelineGroupHeaderBarWrapper .sapSuiteUiCommonsTimelineItemBarNoIcon.sapSuiteUiCommonsTimelineGroupNextExpanded.sapSuiteUiCommonsTimelineItemBarV {
 	height: 100px;
 }
 
@@ -347,43 +346,36 @@
 	left: 50%;
 	width: 1px;
 	height: calc(~"100% - 26px");
-	height: webkit-calc(~"100% - 26px");
 	top: 45px;
 }
 
 .sapSuiteUiCommonsTimelineItemBarNoIcon.sapSuiteUiCommonsTimelineItemBarV {
 	top: 39px;
 	height: calc(~"100% - 13px");
-	height: webkit-calc(~"100% - 13px");
 }
 
 .sapSuiteUiCommonsTimelineItemUlWrapper > li:last-child .sapSuiteUiCommonsTimelineItemBarV {
 	height: 100%;
 	height: calc(~"100% - 12px");
-	height: webkit-calc(~"100% - 12px");
 }
 
 .sapSuiteUiCommonsTimelineItemUlWrapper > li:last-child .sapSuiteUiCommonsTimelineItemBarNoIcon.sapSuiteUiCommonsTimelineItemBarV {
 	height: 100%;
 	height: calc(~"100% - 5px");
-	height: webkit-calc(~"100% - 5px");
 }
 
 .sapSuiteUiCommonsTimelineItemUlWrapper > li:last-child .sapSuiteUiCommonsTimelineItemBarV.sapSuiteUiCommonsTimelineGroupNextExpanded {
 	height: 100%;
 	height: calc(~"100% + 33px");
-	height: webkit-calc(~"100% + 33px");
 }
 
 .sapSuiteUiCommonsTimelineItemUlWrapper > li:last-child .sapSuiteUiCommonsTimelineItemBarNoIcon.sapSuiteUiCommonsTimelineItemBarV.sapSuiteUiCommonsTimelineGroupNextExpanded {
 	height: 100%;
 	height: calc(~"100% + 47px");
-	height: webkit-calc(~"100% + 47px");
 }
 
 .sapSuiteUiCommonsTimelineItemUlWrapper:last-of-type > li:last-child .sapSuiteUiCommonsTimelineItemBarV {
 	height: calc(~"100% - 42px");
-	height: webkit-calc(~"100% - 42px");;
 }
 
 .sapSuiteUiCommonsTimelineItemBarWrapperV {
@@ -403,7 +395,7 @@
 }
 
 .sapSuiteUiCommonsTimelineItemBar.sapSuiteUiCommonsTimelineItemBarBottom {
-	height: 0px;
+	height: 0;
 	top: 0;
 }
 
@@ -419,12 +411,11 @@
 .sapSuiteUiCommonsTimelineItemWrapper .sapSuiteUiCommonsTimelineItemIcon {
 	position: absolute;
 	font-size: 1.375rem;
-	top: 0rem;
+	top: 0;
 	left: 0.5rem;
 	height: 2rem;
 	width: 1.875rem;
-	padding: 0.375rem 0rem 0rem 0rem;
-
+	padding: 0.375rem 0 0 0;
 }
 
 .sapSuiteUiCommonsTimelineItemWrapper {
@@ -447,7 +438,7 @@
 	height: auto;
 	border: 0.0625rem solid;
 	padding: 0 0 0 0;
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	border-radius: 3px;
 	cursor: pointer;
 }
@@ -473,9 +464,7 @@
 }
 
 .sapSuiteUiCommonsTimelineItemArrow {
-	-webkit-transform: translateX(0px) translateY(0px) rotate(45deg);
-	transform: translateX(0px) translateY(0px) rotate(45deg);
-	-moz-transform: translateX(0px) translateY(0px) rotate(45deg);
+	transform: translateX(0) translateY(0) rotate(45deg);
 }
 
 .sapSuiteUiCommonsTimelineItemDot.sapSuiteUiCommonsTimelineItemDotBottom {
@@ -591,7 +580,8 @@
 	vertical-align: top;
 }
 
-.sapUiSizeCozy .sapSuiteUiCommonsTimelineHorizontalMiddleLine li, .sapUiSizeCondensed .sapSuiteUiCommonsTimelineHorizontalMiddleLine li {
+.sapUiSizeCozy .sapSuiteUiCommonsTimelineHorizontalMiddleLine li,
+.sapUiSizeCondensed .sapSuiteUiCommonsTimelineHorizontalMiddleLine li {
 	height: 36px;
 }
 
@@ -615,18 +605,18 @@
 
 .sapSuiteUiCommonsTimelineItemUlWrapperV {
 	display: inline-block;
-	padding-left: 0px;
+	padding-left: 0;
 }
 
 .sapSuiteUiCommonsTimelineItemUlWrapper {
-	padding-left: 0px;
-	margin-bottom: 0px;
-	margin-top: 0px;
+	padding-left: 0;
+	margin-bottom: 0;
+	margin-top: 0;
 }
 
 .sapSuiteUiCommonsTimelineGetMoreUlWrapper {
-	padding-left: 0px;
-	margin-top: 0px;
+	padding-left: 0;
+	margin-top: 0;
 }
 
 .sapSuiteUiCommonsTimelineItem {
@@ -638,7 +628,7 @@
 	padding-bottom: 5px;
 }
 
-.sapSuiteUiCommonsTimelineHorizontalScrollingLine>li:last-of-type:not(.sapSuiteUiCommonsTimelineItemGetMoreButton) {
+.sapSuiteUiCommonsTimelineHorizontalScrollingLine > li:last-of-type:not(.sapSuiteUiCommonsTimelineItemGetMoreButton) {
 	width: 300px;
 }
 
@@ -654,16 +644,17 @@
 	vertical-align: top;
 	position: relative;
 }
-.sapSuiteUiCommonsTimelineContentsH .sapSuiteUiCommonsTimelineGroupHeader.sapSuiteUiCommonsTimelineGroupCollapsed{
+
+.sapSuiteUiCommonsTimelineContentsH .sapSuiteUiCommonsTimelineGroupHeader.sapSuiteUiCommonsTimelineGroupCollapsed {
 	padding-right: 200px;
 	min-height: 60px;
 }
 
-.sapSuiteUiCommonsTimelineContentsH .sapSuiteUiCommonsTimelineGroupHeader .sapSuiteUiCommonsTimelineGroupExpanded{
-	padding-right: 0px;
+.sapSuiteUiCommonsTimelineContentsH .sapSuiteUiCommonsTimelineGroupHeader .sapSuiteUiCommonsTimelineGroupExpanded {
+	padding-right: 0;
 }
 
-.sapSuiteUiCommonsTimelineContentsH .sapSuiteUiCommonsTimelineGroupHeader{
+.sapSuiteUiCommonsTimelineContentsH .sapSuiteUiCommonsTimelineGroupHeader {
 	margin-right: -40px;
 	margin-left: 5px;
 	padding-top: 20.25px;
@@ -719,15 +710,14 @@
 	justify-content: center;
 	align-items: center;
 	z-index: 15;
-	color: @sapUiButtonIconColor;
+	color: var(--sapButton_IconColor);
 }
 
 .sapUiSizeCompact .sapSuiteUiCommonsTimelineGroupHeaderIconWrapper {
-	margin-top: 0px;
-	margin-bottom: 0px;
+	margin-top: 0;
+	margin-bottom: 0;
 }
 
-
 .sapSuiteUiCommonsTimelineGroupHeaderIconWrapper span {
 	font-size: 18px;
 }
@@ -780,12 +770,11 @@
 	position: absolute;
 	height: 100%;
 	height: calc(~"100% - 40px");
-	height: webkit-calc(~"100% - 40x");
 	width: 1px;
 	border-left: 1px dashed;
 }
 
-.sapSuiteUiCommonsTimelineScrollH .sapSuiteUiCommonsTimelineGroupHeaderLine{
+.sapSuiteUiCommonsTimelineScrollH .sapSuiteUiCommonsTimelineGroupHeaderLine {
 	margin-left: 21px;
 }
 
@@ -797,7 +786,7 @@
 	position: relative;
 	align-self: center;
 	bottom: auto;
-	margin-right: 0px;
+	margin-right: 0;
 	margin-left: auto;
 	left: -4px;
 	border-bottom: none;
@@ -826,16 +815,18 @@
 .sapSuiteUiCommonsTimelineItemGroupCollapsedBar {
 	width: 200px;
 }
-.sapSuiteUiCommonsTimelineContentsH .sapSuiteUiCommonsTimelineGroupHeader .sapSuiteUiCommonsTimelineGroupHeaderMainWrapper{
+
+.sapSuiteUiCommonsTimelineContentsH .sapSuiteUiCommonsTimelineGroupHeader .sapSuiteUiCommonsTimelineGroupHeaderMainWrapper {
 	max-width: 190px;
 	padding-right: 2px;
 }
 
-.sapSuiteUiCommonsTimelineScrollH .sapSuiteUiCommonsTimelineGroupHeader .sapSuiteUiCommonsTimelineGroupHeaderSpanWrapper{
+.sapSuiteUiCommonsTimelineScrollH .sapSuiteUiCommonsTimelineGroupHeader .sapSuiteUiCommonsTimelineGroupHeaderSpanWrapper {
 	overflow: hidden;
 }
 
-.sapSuiteUiCommonsTimelineItemShowMore .sapMBtnInner, .sapSuiteUiCommonsTimelineItemShowMore .sapMBtn {
+.sapSuiteUiCommonsTimelineItemShowMore .sapMBtnInner,
+.sapSuiteUiCommonsTimelineItemShowMore .sapMBtn {
 	height: auto;
 }
 
@@ -863,7 +854,6 @@
 	width: 29px;
 }
 
-
 .sapSuiteUiCommonsTimelineItemBarDivWrapper {
 	display: flex;
 	height: 100%;
@@ -881,7 +871,8 @@
 	align-items: flex-end;
 }
 
-.sapSuiteUiCommonsTimelineItemBarIconWrapperV, .sapSuiteUiCommonsTimelineItemIconWrapper {
+.sapSuiteUiCommonsTimelineItemBarIconWrapperV,
+.sapSuiteUiCommonsTimelineItemIconWrapper {
 	min-width: 26px;
 	height: 100%;
 	display: flex;
@@ -894,7 +885,7 @@
 	height: 27px;
 }
 
-.sapSuiteUiCommonsTimelineGroupHeaderBarWrapper .sapSuiteUiCommonsTimelineItemBarIconWrapperV{
+.sapSuiteUiCommonsTimelineGroupHeaderBarWrapper .sapSuiteUiCommonsTimelineItemBarIconWrapperV {
 	height: auto;
 }
 
@@ -902,16 +893,17 @@
 	font-size: 1.375rem;
 }
 
-.sapSuiteUiCommonsTimelineItemGroupBarIconWrapper{
+.sapSuiteUiCommonsTimelineItemGroupBarIconWrapper {
 	display: flex;
 	align-items: center;
 }
 
 .sapSuiteUiCommonsTimelineHorizontalBottomLine .sapSuiteUiCommonsTimelineGroupHeaderMainWrapper {
 	align-self: flex-end;
-	bottom: 0px;
+	bottom: 0;
 }
-.sapSuiteUiCommonsTimelineHorizontalBottomLine .sapSuiteUiCommonsTimelineGroupHeaderDirectChild{
+
+.sapSuiteUiCommonsTimelineHorizontalBottomLine .sapSuiteUiCommonsTimelineGroupHeaderDirectChild {
 	height: 100%;
 	display: flex;
 	position: absolute;
@@ -959,7 +951,7 @@
 	position: relative;
 	width: 100%;
 	height: 1px;
-	margin-top: 0px;
+	margin-top: 0;
 	border-left: none;
 	margin-right: -6px;
 	border-bottom: 1px dashed;
@@ -977,7 +969,8 @@
 	margin-top: -14px;
 }
 
-.sapUiSizeCozy .sapSuiteUiCommonsTimelineItemGetMoreButtonH, .sapUiSizeCondensed .sapSuiteUiCommonsTimelineItemGetMoreButtonH{
+.sapUiSizeCozy .sapSuiteUiCommonsTimelineItemGetMoreButtonH,
+.sapUiSizeCondensed .sapSuiteUiCommonsTimelineItemGetMoreButtonH {
 	margin-top: -0.25rem;
 	height: 40px !important;
 }
@@ -989,13 +982,13 @@
 .sapSuiteUiCommonsTimelineItemTextWrapper {
 	overflow: hidden;
 	position: relative;
-	-webkit-box-orient: vertical;
 	display: -webkit-box;
+	-webkit-box-orient: vertical;
 	text-overflow: ellipsis;
 }
 
 .sapSuiteUiCommonsTimelineGroupExpanded .sapSuiteUiCommonsTimelineGroupHeaderLineWrapper,
-.sapSuiteUiCommonsTimelineGroupExpanded .sapSuiteUiCommonsTimelineGroupHeaderLine{
+.sapSuiteUiCommonsTimelineGroupExpanded .sapSuiteUiCommonsTimelineGroupHeaderLine {
 	border: none;
 }
 
@@ -1025,85 +1018,84 @@
 	bottom: -6px;
 }
 
-.sapSuiteUiCommonsTimelineGroupExpanded .sapSuiteUiCommonsTimelineItemArrow{
+.sapSuiteUiCommonsTimelineGroupExpanded .sapSuiteUiCommonsTimelineItemArrow {
 	display: none;
 }
 
 /* COLORS */
 .sapSuiteUiCommonsTimelineNoStatus {
-	color: @sapUiContentNonInteractiveIconColor;
+	color: var(--sapContent_NonInteractiveIconColor);
 }
 
 .sapSuiteUiCommonsTimelineStatusInformation,
 .sapSuiteUiCommonsTimelineItemWrapperV .sapSuiteUiCommonsTimelineItemNoIcon.sapSuiteUiCommonsTimelineStatusInformation,
 .sapSuiteUiCommonsTimelineItemWrapper .sapSuiteUiCommonsTimelineItemNoIcon.sapSuiteUiCommonsTimelineStatusInformation {
-	color: @sapUiInformativeElement;
+	color: var(--sapInformativeElementColor);
 	text-shadow: @sapUiShadowText;
 }
 
 .sapSuiteUiCommonsTimelineStatusSuccess,
 .sapSuiteUiCommonsTimelineItemWrapperV .sapSuiteUiCommonsTimelineItemNoIcon.sapSuiteUiCommonsTimelineStatusSuccess,
 .sapSuiteUiCommonsTimelineItemWrapper .sapSuiteUiCommonsTimelineItemNoIcon.sapSuiteUiCommonsTimelineStatusSuccess {
-	color: @sapUiPositiveElement;
+	color: var(--sapPositiveElementColor);
 	text-shadow: @sapUiShadowText;
 }
 
 .sapSuiteUiCommonsTimelineStatusError,
 .sapSuiteUiCommonsTimelineItemWrapperV .sapSuiteUiCommonsTimelineItemNoIcon.sapSuiteUiCommonsTimelineStatusError,
 .sapSuiteUiCommonsTimelineItemWrapper .sapSuiteUiCommonsTimelineItemNoIcon.sapSuiteUiCommonsTimelineStatusError {
-	color: @sapUiNegativeElement;
+	color: var(--sapNegativeElementColor);
 	text-shadow: @sapUiShadowText;
 }
 
 .sapSuiteUiCommonsTimelineStatusWarning,
 .sapSuiteUiCommonsTimelineItemWrapperV .sapSuiteUiCommonsTimelineItemNoIcon.sapSuiteUiCommonsTimelineStatusWarning,
 .sapSuiteUiCommonsTimelineItemWrapper .sapSuiteUiCommonsTimelineItemNoIcon.sapSuiteUiCommonsTimelineStatusWarning {
-	color: @sapUiCriticalElement;
+	color: var(--sapCriticalElementColor);
 	text-shadow: @sapUiShadowText;
 }
 
 .sapSuiteUiCommonsTimelineItemNoIcon {
-	border: 1px solid @sapUiContentNonInteractiveIconColor;
-	background-color: @sapUiContentNonInteractiveIconColor;
+	border: 1px solid var(--sapContent_NonInteractiveIconColor);
+	background-color: var(--sapContent_NonInteractiveIconColor);
 }
 
 .sapSuiteUiCommonsTimelineItemBarV, .sapSuiteUiCommonsTimelineItemBarH {
-	background-color: @sapUiContentForegroundBorderColor;
+	background-color: var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteUiCommonsTimelineItemBox {
-	border-color: @sapUiGroupContentBorderColor;
-	background-color: @sapUiGroupContentBackground;
+	border-color: var(--sapGroup_ContentBorderColor);
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 .sapSuiteUiCommonsTimelineItemArrow, .sapSuiteUiCommonsTimelineGroupHeaderLineWrapper {
-	border-color: @sapUiGroupContentBorderColor;
-	color: @sapUiGroupContentBorderColor;
+	border-color: var(--sapGroup_ContentBorderColor);
+	color: var(--sapGroup_ContentBorderColor);
 }
 
 .sapSuiteUiCommonsTimelineItemArrow {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 .sapSuiteUiCommonsTimelineItemShellDateTime {
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 }
 
 .sapSuiteUiCommonsTimelineItemTextWrapper, .sapSuiteUiCommonsTimelineItemShellHdr {
-	color: @sapUiListTextColor;
+	color: var(--sapList_TextColor);
 }
 
 .sapSuiteUiCommonsTimelineGroupHeaderWrapper {
-	color: @sapUiButtonTextColor;
+	color: var(--sapButton_TextColor);
 }
 
 .sapSuiteUiCommonsTimelineGroupHeaderWrapper,
 .sapSuiteUiCommonsTimelineGroupHeaderMainWrapper .sapSuiteUiCommonsTimelineItemArrow,
 .sapSuiteUiCommonsTimelineScrollerIconWrapper {
-	border-color: @sapUiButtonBorderColor;
+	border-color: var(--sapButton_BorderColor);
 }
 
-
 .sapSuiteUiCommonsTimelineGroupExpanded .sapSuiteUiCommonsTimelineGroupHeaderWrapper,
 .sapSuiteUiCommonsTimelineGroupExpanded .sapSuiteUiCommonsTimelineGroupHeaderMainWrapper .sapSuiteUiCommonsTimelineItemArrow,
 .sapSuiteUiCommonsTimelineGroupExpanded .sapSuiteUiCommonsTimelineScrollerIconWrapper {
@@ -1119,19 +1111,18 @@
 	background-color: @sapUiFieldActiveBackground
 }
 
-
 .sapSuiteUiCommonsTimelineGroupCollapsed .sapSuiteUiCommonsTimelineGroupHeaderWrapper:hover,
 .sapSuiteUiCommonsTimelineGroupCollapsed .sapSuiteUiCommonsTimelineGroupHeaderWrapper:hover .sapSuiteUiCommonsTimelineItemArrow,
 .sapSuiteUiCommonsTimelineGroupCollapsed .sapSuiteUiCommonsTimelineGroupHeaderMainWrapper:hover .sapSuiteUiCommonsTimelineItemArrow {
-	background-color: @sapUiButtonHoverBackground;
-	border-color: @sapUiButtonHoverBorderColor;
+	background-color: var(--sapButton_Hover_Background);
+	border-color: var(--sapButton_Hover_BorderColor);
 }
 
 .sapSuiteUiCommonsTimelineGroupCollapsed .sapSuiteUiCommonsTimelineGroupHeaderWrapper,
 .sapSuiteUiCommonsTimelineGroupCollapsed .sapSuiteUiCommonsTimelineGroupHeaderWrapper .sapSuiteUiCommonsTimelineItemArrow,
 .sapSuiteUiCommonsTimelineGroupCollapsed .sapSuiteUiCommonsTimelineGroupHeaderMainWrapper .sapSuiteUiCommonsTimelineItemArrow {
-	background-color: @sapUiButtonBackground;
-	border-color: @sapUiButtonBorderColor;
+	background-color: var(--sapButton_Background);
+	border-color: var(--sapButton_BorderColor);
 }
 
 .sapSuiteUiCommonsTimelineGroupExpanded .sapSuiteUiCommonsTimelineGroupHeaderWrapper:hover {
@@ -1139,7 +1130,7 @@
 	border-color: @sapUiToggleButtonPressedHoverBorderColor;
 }
 
-.sapSuiteUiCommonsTimelineGroupExpanded .sapSuiteUiCommonsTimelineGroupHeaderWrapper{
+.sapSuiteUiCommonsTimelineGroupExpanded .sapSuiteUiCommonsTimelineGroupHeaderWrapper {
 	color: @sapUiToggleButtonPressedTextColor;
 	border-color: @sapUiToggleButtonPressedBorderColor;
 }
@@ -1152,14 +1143,15 @@
 	background-color: @sapUiFieldActiveBackground !important;
 }
 
-.sapSuiteUiCommonsTimelineInfoBarFilter, .sapSuiteUiCommonsTimelineInfoBarRangeFilter, .sapSuiteUiCommonsTimelineCustomMessageWrapper {
-	border: 1px solid @sapUiListBorderColor;
+.sapSuiteUiCommonsTimelineInfoBarFilter, .sapSuiteUiCommonsTimelineInfoBarRangeFilter,
+.sapSuiteUiCommonsTimelineCustomMessageWrapper {
+	border: 1px solid var(--sapList_BorderColor);
 }
 
 .sapSuiteUiCommonsTimelineScrollV .sapSuiteUiCommonsTimelineGroupHeaderLineWrapper {
-	border-bottom-color: @sapUiContentForegroundBorderColor;
+	border-bottom-color: var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteUiCommonsTimelineGroupHeaderLine {
-	border-left-color: @sapUiContentForegroundBorderColor;
-}
+	border-left-color: var(--sapContent_ForegroundBorderColor);
+}

package/src/sap/suite/ui/commons/themes/base/UnifiedThingGroup.less

@@ -1,10 +1,12 @@
-/* ============================================= */
-/* CSS for control sap.suite.ui.commons/UnifiedThingGroup.control */
-/* ============================================= */
+/* ======================================================= */
+/* CSS for control sap.suite.ui.commons/UnifiedThingGroup  */
+/* Base theme                                              */
+/* ======================================================= */
 
 .sapSuiteUtg {
 	padding: 20px 32px;
 }
+
 .sap-phone .sapSuiteUtg {
 	margin: 0;
 }
@@ -37,14 +39,10 @@
 	padding: 1rem 1rem 0.5rem 1rem;
 }
 
-.sapSuiteUtgContent {
-}
-
 .sapSuiteUtg > .sapSuiteUtgContent .sapMLabel {
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 }
 
 .sapSuiteUtgContentTopIndent {
 	padding-top: 1.5rem;
-}
-
+}