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

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

@@ -308,6 +308,61 @@
     }
 }
 
+// Mixin to apply outline-color based on semantic color
+.sapSuiteOutlineSemanticColor(@classPrefix) {
+    &.@{classPrefix}None {
+      outline-color: @sapSuiteSemanticColorNoneBorder !important;
+    }
+    &.@{classPrefix}Neutral {
+      outline-color: @sapSuiteSemanticColorNeutralBorder !important;
+    }
+    &.@{classPrefix}Good {
+      outline-color: @sapSuiteSemanticColorGoodBorder !important;
+    }
+    &.@{classPrefix}Critical {
+      outline-color: @sapSuiteSemanticColorCriticalBorder !important;
+    }
+    &.@{classPrefix}Error {
+      outline-color: @sapSuiteSemanticColorErrorBorder !important;
+    }
+    &.@{classPrefix}Sequence1 {
+      outline-color: @sapSuiteSemanticColorSequence1Border !important;
+    }
+    &.@{classPrefix}Sequence2 {
+      outline-color: @sapSuiteSemanticColorSequence2Border !important;
+    }
+    &.@{classPrefix}Sequence3 {
+      outline-color: @sapSuiteSemanticColorSequence3Border !important;
+    }
+    &.@{classPrefix}Sequence4 {
+      outline-color: @sapSuiteSemanticColorSequence4Border !important;
+    }
+    &.@{classPrefix}Sequence5 {
+      outline-color: @sapSuiteSemanticColorSequence5Border !important;
+    }
+    &.@{classPrefix}Sequence6 {
+      outline-color: @sapSuiteSemanticColorSequence6Border !important;
+    }
+    &.@{classPrefix}Sequence7 {
+      outline-color: @sapSuiteSemanticColorSequence7Border !important;
+    }
+    &.@{classPrefix}Sequence8 {
+      outline-color: @sapSuiteSemanticColorSequence8Border !important;
+    }
+    &.@{classPrefix}Sequence9 {
+      outline-color: @sapSuiteSemanticColorSequence9Border !important;
+    }
+    &.@{classPrefix}Sequence10 {
+      outline-color: @sapSuiteSemanticColorSequence10Border !important;
+    }
+    &.@{classPrefix}Sequence11 {
+      outline-color: @sapSuiteSemanticColorSequence11Border !important;
+    }
+    &.@{classPrefix}Sequence12 {
+      outline-color: @sapSuiteSemanticColorSequence12Border !important;
+    }
+}
+
 // Mixin to apply stroke colors based on semantic color
 .sapSuiteStrokeSemanticColor(@classPrefix) {
     &.@{classPrefix}None {

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

@@ -1,36 +1,31 @@
-/* ============================================= */
-/* CSS for control sap.suite.ui.commons/SplitButton.control */
-/* ============================================= */
+/* ================================================= */
+/* CSS for control sap.suite.ui.commons/SplitButton  */
+/* Base theme                                        */
+/* ================================================= */
 
 .sapSuiteUiCommonsSplitButton {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 	white-space: nowrap;
 }
 
 .sapSuiteUiCommonsSplitButton > .sapUiBtnS {
-	-moz-border-radius: 2px 0 0 2px;
 	border-radius:  2px 0 0 2px;
 }
 
-
 .sapUiMenuButton.sapUiBtnS.sapSuiteUiCommonsSplitButton-menuButton {
 	border-radius:  0 2px 2px 0;
-	-moz-border-radius: 0 2px 2px 0;
 	border-left-width: 0;
 }
 
-
 .sapUiMenuButton.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd.sapSuiteUiCommonsSplitButton-menuButton {
 	box-shadow: 0 1px 0 0 #FEFEFE inset, 1px 0 0 0 #FEFEFE inset;
 }
 
-
 .sapUiMenuButton.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd.sapSuiteUiCommonsSplitButton-menuButton:focus,
 .sapUiMenuButton.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd.sapSuiteUiCommonsSplitButton-menuButton:hover {
 	box-shadow: 0 1px 0 0 #83b9d6 inset;
 }
 
-
 .sapUiMenuButton.sapUiBtnS.sapUiBtnStd.sapSuiteUiCommonsSplitButton-menuButton.sapUiBtnAccept {
 	box-shadow: 0 1px 0 0 #5bc88a inset, 1px 0 0 0 #5bc88a inset;
 }
@@ -63,15 +58,7 @@
 	margin-bottom: -2px;
 }
 
-html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsSplitButton > .sapUiMenuButton > .sapUiMenuButtonIco {
-	margin-right: -1px;
-	margin-bottom: -1px;
-}
-
-
-.sapUiMenuButton.sapUiBtnS.sapSuiteUiCommonsSplitButton-menuButton,
-html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsSplitButton-menuButton.sapUiBtnS.sapUiBtnAct,
-html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsSplitButton-menuButton.sapUiBtnS.sapUiBtnDsbl:active {
+.sapUiMenuButton.sapUiBtnS.sapSuiteUiCommonsSplitButton-menuButton {
 	padding-left: 5.5px;
 	padding-right: 5.5px;
-}
+}

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

@@ -1,6 +1,7 @@
-/* ============================================= */
-/* CSS for control sap.suite.ui.commons/StatusIndicator*/
-/* ============================================= */
+/* ===================================================== */
+/* CSS for control sap.suite.ui.commons/StatusIndicator  */
+/* Base theme                                            */
+/* ===================================================== */
 
 @_sap_suite_ui_commons_StatusIndicator_SmallLabelMargin: 0.375rem;
 @_sap_suite_ui_commons_StatusIndicator_MediumLabelMargin: 0.5rem;
@@ -31,7 +32,7 @@
 }
 
 .sapSuiteUiCommonsStatusIndicator:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: 1px;
 }
 
@@ -39,12 +40,12 @@
  * Label classes
  */
 .sapSuiteUiCommonsStatusIndicatorLabel {
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	white-space: nowrap;
 }
 
 .sapSuiteUiCommonsStatusIndicatorSmallLabel {
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 }
 
 .sapSuiteUiCommonsStatusIndicatorMediumLabel {
@@ -52,11 +53,11 @@
 }
 
 .sapSuiteUiCommonsStatusIndicatorLargeLabel {
-	font-size: @sapFontHeader5Size;
+	font-size: var(--sapFontHeader5Size);
 }
 
 .sapSuiteUiCommonsStatusIndicatorExtraLargeLabel {
-	font-size: @sapFontHeader2Size;
+	font-size: var(--sapFontHeader2Size);
 }
 
 /**
@@ -162,7 +163,7 @@
 	height: 6.25rem;
 }
 
-// auto-create border-color class with all different semantic colors
+/* auto-create border-color class with all different semantic colors */
 .sapSuiteStrokeSemanticColor(strokeSemanticColor);
 
 .sapSuiteFillSemanticColor(fillSemanticColor);

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

@@ -1,15 +1,19 @@
+/* ============================================== */
+/* CSS for control sap.suite.ui.commons/TAccount  */
+/* Base theme                                     */
+/* ============================================== */
+
 .sapSuiteUiCommonsAccount {
 	width: 100%;
-	border: 1px solid @sapUiContentForegroundBorderColor;
-	border-bottom: 5px solid @sapUiContentForegroundBorderColor;
+	border: 1px solid var(--sapContent_ForegroundBorderColor);
+	border-bottom: 5px solid var(--sapContent_ForegroundBorderColor);
 	border-radius: 5px;
 	position: relative;
-
 	max-width: 400px;
 }
 
 .sapSuiteUiCommonsAccountPanel .sapMPanelContent {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 .sapSuiteUiCommonsAccountPanelOverlay {
@@ -34,14 +38,12 @@
 .sapSuiteUiCommonsTAccountBaseInfoIconWrapper {
 	width: 18px;
 	height: 18px;
-
-	background-color: @sapUiActive;
-	border: 1px solid @sapUiActive;
-	color: @sapUiContentContrastIconColor;
-
+	background-color: var(--sapActiveColor);
+	border: 1px solid var(--sapActiveColor);
+	color: var(--sapContent_ContrastIconColor);
 	border-radius: 50%;
-	font-family: "SAP-icons";
-	font-size: @sapMFontLargeSize;
+	font-family: var(--sapContent_IconFontFamily);
+	font-size: var(--sapFontLargeSize);
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -64,7 +66,7 @@
 	text-align: right;
 }
 
-html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountContent{
+html[dir='rtl'] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountContent{
 	text-align: left;
 }
 
@@ -84,21 +86,21 @@ html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountContent{
 }
 
 .sapSuiteUiCommonsAccount:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 .sapSuiteUiCommonsAccountTHeader {
 	display: flex;
 	justify-content: space-between;
-	border-bottom: 1px solid @sapUiContentForegroundBorderColor;
+	border-bottom: 1px solid var(--sapContent_ForegroundBorderColor);
 	align-items: center;
 	height: 2rem;
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 	margin: 0 1rem 0 1rem;
 }
 
 .sapSuiteUiCommonsAccountTHeader.sapSuiteUiCommonsAccountTHeaderOpening {
-	border-bottom: 0.125rem solid @sapUiContentForegroundBorderColor;
+	border-bottom: 0.125rem solid var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteUiCommonsAccountEmpty .sapSuiteUiCommonsAccountTHeader.sapSuiteUiCommonsAccountTHeaderOpening {
@@ -112,17 +114,19 @@ html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountContent{
 .sapSuiteUiCommonsAccountOpeningHeader,
 .sapSuiteUiCommonsAccountClosingHeader {
 	display: flex;
-	border-bottom: 0.0625rem solid @sapUiContentForegroundBorderColor;
+	border-bottom: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
 	align-items: center;
 	height: auto;
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 	margin: 0 1rem;
 	outline: none;
 	position: relative;
+
 	&:focus {
+
 		.sapSuiteUiCommonsAccountFocus {
 			position: absolute;
-			outline: @sapContent_FocusWidth @sapContent_FocusStyle @sapContent_FocusColor;
+			outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 			right: -15px;
 			left: -15px;
 			top: 1px;
@@ -141,21 +145,21 @@ html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountContent{
 }
 
 .sapSuiteUiCommonsAccountClosingHeader {
-	border-top: 0.0625rem solid @sapUiContentForegroundBorderColor;
+	border-top: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
 	border-bottom: 0;
 }
 
 .sapSuiteUiCommonsAccountClosingHeaderLine {
-	border-top: 0.0625rem solid @sapUiContentForegroundBorderColor;
+	border-top: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
 	height: 0.0625rem;
 	margin: 0 1rem;
 }
 
 .sapSuiteUiCommonsAccountHeader {
-  	cursor: grab;
+	cursor: grab;
 	min-height: 2rem;
-	background-color: @sapUiObjectHeaderBackground;
-	border-bottom: 1px solid @sapUiContentForegroundBorderColor;
+	background-color: var(--sapObjectHeader_Background);
+	border-bottom: 1px solid var(--sapContent_ForegroundBorderColor);
 	display: flex;
 	align-items: center;
 	flex-direction: row;
@@ -163,7 +167,6 @@ html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountContent{
 	border-top-right-radius: 5px;
 	border-top-left-radius: 5px;
 	font-size: @sapMFontMediumSize;
-
 }
 
 .sapSuiteUiCommonsInfoIcon {
@@ -189,14 +192,15 @@ html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountContent{
 	overflow: hidden;
 	text-overflow: ellipsis;
 	margin: 0.875rem 0.2608rem 0.5rem 0.2608rem;
-  	max-height: 4.2rem;
-  	min-height: 1rem;
-  	display: -webkit-box;
-  	-webkit-box-orient: vertical;
-  	-webkit-line-clamp: 4;
+	max-height: 4.2rem;
+	min-height: 1rem;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 4;
 }
 
 .sapUiSizeCompact {
+
 	.sapSuiteUiCommonsAccountHeaderTitle {
 		margin: 0.5rem 0.2608rem;
 	}
@@ -212,19 +216,19 @@ html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountContent{
 
 .sapSuiteUiCommonsAccountTHeaderOpeningDebitTitle{
 	text-align: left;
-	border-right: 1px dashed @sapUiContentForegroundBorderColor;
+	border-right: 1px dashed var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteUiCommonsAccountTHeaderOpeningCreditTitle {
 	text-align: right;
 }
 
-html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountTHeaderOpeningCreditTitle {
+html[dir='rtl'] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountTHeaderOpeningCreditTitle {
 	text-align: left;
 }
 
 .sapSuiteUiCommonsAccountHeaderTitleWrapper {
-  	margin: 0.5rem 0.2608rem;
+	margin: 0.5rem 0.2608rem;
 }
 
 .sapSuiteUiCommonsAccountHeaderTitleWithSubtitle {
@@ -237,7 +241,7 @@ html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountTHeaderOp
 }
 
 .sapSuiteUiCommonsAccountHeaderSubtitle {
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	max-height: 2rem;
@@ -259,7 +263,7 @@ html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountTHeaderOp
 }
 
 .sapSuiteUiCommonsAccountTWrapper {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 /** ITEM **/
@@ -268,7 +272,6 @@ html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountTHeaderOp
 	flex-direction: row;
 	padding-top: 0.25rem;
 	padding-bottom: 0.5rem;
-
 	overflow: hidden;
 }
 
@@ -288,7 +291,7 @@ html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountTHeaderOp
 	pointer-events: none;
 	left: 50%;
 	height: 100%;
-	border-left: 1px dashed @sapUiContentForegroundBorderColor;
+	border-left: 1px dashed var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteUiCommonsAccountBlankItem {
@@ -297,16 +300,16 @@ html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountTHeaderOp
 }
 
 .sapSuiteUiCommonsAccountContent:hover {
-	background-color: @sapUiListHoverBackground;
+	background-color: var(--sapList_Hover_Background);
 }
 
 .sapSuiteUiCommonsAccountItem.sapSuiteUiCommonsAccountItemSelected .sapSuiteUiCommonsAccountContent,
 .sapSuiteUiCommonsAccountItem.sapSuiteUiCommonsAccountItemSelectedByGroup .sapSuiteUiCommonsAccountContent {
-	background-color: @sapUiListSelectionBackgroundColor;
+	background-color: var(--sapList_SelectionBackgroundColor);
 }
 
 .sapSuiteUiCommonsAccountItem:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountItem {
@@ -326,11 +329,11 @@ html[dir=rtl] .sapSuiteUiCommonsAccountCredit .sapSuiteUiCommonsAccountTHeaderOp
 	width: 50%;
 }
 
-html[dir=rtl] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItemLeft.sapSuiteUiCommonsAccountItem {
+html[dir='rtl'] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItemLeft.sapSuiteUiCommonsAccountItem {
 	text-align: right;
 }
 
-html[dir=rtl] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItemRight.sapSuiteUiCommonsAccountItem {
+html[dir='rtl'] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItemRight.sapSuiteUiCommonsAccountItem {
 	text-align: left;
 }
 
@@ -345,9 +348,8 @@ html[dir=rtl] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItem
 	margin-left: 50%;
 }
 
-
-
 .sapSuiteUiCommonsAccountItemLeft {
+
 	.sapSuiteUiCommonsAccountColorBar,
 	.sapSuiteUiCommonsAccountContent {
 		margin-left: 0.375rem;
@@ -355,6 +357,7 @@ html[dir=rtl] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItem
 }
 
 .sapSuiteUiCommonsAccountItemRight {
+
 	.sapSuiteUiCommonsAccountColorBar,
 	.sapSuiteUiCommonsAccountContent {
 		margin-right: 0.375rem;
@@ -374,7 +377,7 @@ html[dir=rtl] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItem
 }
 
 .sapSuiteUiCommonsAccountDebit {
-	border-right: 1px dashed @sapUiContentForegroundBorderColor;
+	border-right: 1px dashed var(--sapContent_ForegroundBorderColor);
 	width: 50%;
 	padding-top: 0.5rem;
 	margin-bottom: 0.2rem;
@@ -382,12 +385,12 @@ html[dir=rtl] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItem
 
 .sapSuiteUiCommonsAccountItemTitle {
 	font-weight: bold;
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 	word-break: break-all;
 }
 
 .sapSuiteUiCommonsAccountItemProperty {
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 	word-break: break-all;
 }
 
@@ -404,9 +407,9 @@ html[dir=rtl] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItem
 }
 
 .sapSuiteUiCommonsAccountItemLabel {
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 	margin-top: 3px;
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 	word-break: break-word;
 }
 
@@ -416,7 +419,6 @@ html[dir=rtl] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItem
 	flex-direction: column;
 	align-items: flex-start;
 	padding-top: 0.5rem;
-
 	margin-bottom: 0.2rem;
 }
 
@@ -426,7 +428,7 @@ html[dir=rtl] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItem
 }
 
 .sapSuiteUiCommonsAccountGroup:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 .sapSuiteUiCommonsAccountGroupColumn {
@@ -439,7 +441,7 @@ html[dir=rtl] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItem
 .sapSuiteUiCommonsAccountGroupContent {
 	display: flex;
 	flex-direction: row;
-  	outline: none;
+	outline: none;
 }
 
 .sapSuiteUiCommonsTAccountDropZoneTop,
@@ -452,7 +454,7 @@ html[dir=rtl] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItem
 }
 
 .sapSuiteUiCommonsTAccountDropZoneTop {
-  	top: -5px;
+	top: -5px;
 }
 
 .sapSuiteUiCommonsTAccountDropZoneBottom {
@@ -472,14 +474,16 @@ html[dir=rtl] .sapSuiteUiCommonsAccountDebitCredit .sapSuiteUiCommonsAccountItem
 
 .sapSuiteUiCommonsAccountGroupDroppingAreaActive,
 .sapSuiteUiCommonsAccountGroupDroppingAreaActiveSide {
+
 	&.sapSuiteUiCommonsAccountGroupDroppingArea {
-	  	cursor: grabbing;
+		cursor: grabbing;
 	}
 }
 
 div:nth-last-child(1),
 div:nth-last-child(2),
 div:only-child {
+
 	&.sapSuiteUiCommonsAccountGroupDroppingArea {
 		flex-grow: 1;
 		justify-content: center;
@@ -505,23 +509,25 @@ div:nth-last-child(1),
 div:nth-last-child(2),
 div:first-child,
 div:only-child {
+
 	&.sapSuiteUiCommonsAccountGroupDroppingAreaActive,
 	&.sapSuiteUiCommonsAccountGroupDroppingAreaActiveSide {
+
 		&.sapSuiteUiCommonsAccountGroupDroppingArea {
 			height: auto;
 			max-width: 400px;
 
 			.sapSuiteUiCommonsAccountGroupDroppingAreaInnerText {
-				color: @sapUiHighlight;
-				font-size: @sapMFontLargeSize;
+				color: var(--sapHighlightColor);
+				font-size: var(--sapFontLargeSize);
 				display: flex;
 			}
 
 			.sapSuiteUiCommonsAccountGroupDroppingAreaInner {
 				height: 6rem;
-				border: 1px solid @sapUiHighlight;
+				border: 1px solid var(--sapHighlightColor);
 				background: none;
-				margin-left: 0px;
+				margin-left: 0;
 				margin-top: 1rem;
 				margin-bottom: 1rem;
 				display: block;
@@ -537,23 +543,22 @@ div:only-child {
 }
 
 .sapUiSizeCozy .sapSuiteUiCommonsAccountGroupDroppingArea {
-  	height: 1.5rem;
+	height: 1.5rem;
 }
 
 .sapSuiteUiCommonsAccountGroupDroppingAreaActive,
 .sapSuiteUiCommonsAccountGroupDroppingAreaActiveSide {
+
 	.sapSuiteUiCommonsAccountGroupDroppingAreaInner,
 	.sapSuiteUiCommonsAccountGroupDroppingAreaInnerBall {
 		display: block;
 	}
 }
 
-
-
 .sapSuiteUiCommonsAccountGroupDroppingAreaInner {
 	width: 100%;
 	height: 1px;
-	background: @sapUiSelected;
+	background: var(--sapSelectedColor);
 	position: relative;
 	margin-left: 10px;
 	display: none;
@@ -569,7 +574,7 @@ div:only-child {
 	right: -11px;
 	width: 10px;
 	height: 10px;
-	border: 1px solid @sapUiSelected;
+	border: 1px solid var(--sapSelectedColor);
 	border-radius: 50%;
 	display: none;
 }
@@ -580,19 +585,19 @@ div:only-child {
 
 .sapSuiteUiCommonsAccountItemDragging .sapSuiteUiCommonsAccountHeader,
 .sapSuiteUiCommonsAccountItemDragging.sapSuiteUiCommonsAccount {
-	background-color: @sapUiContentForegroundBorderColor;
-	border-color: @sapUiContentForegroundBorderColor;
+	background-color: var(--sapContent_ForegroundBorderColor);
+	border-color: var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteUiCommonsAccountItemDragging .sapSuiteUiCommonsAccountColorBar {
-	background-color: @sapUiContentForegroundBorderColor !important;
+	background-color: var(--sapContent_ForegroundBorderColor) !important;
 }
 
 .sapSuiteUiCommonsGroupHeader {
 	display: flex;
 	flex-direction: row;
 	min-height: 2rem;
-	border-bottom: 1px solid @sapUiContentForegroundBorderColor;
+	border-bottom: 1px solid var(--sapContent_ForegroundBorderColor);
 	align-items: center;
 	justify-content: space-between;
 }
@@ -652,24 +657,24 @@ div:only-child {
 
 .sapSuiteUiCommonsAccountPanelLabel,
 .sapSuiteUiCommonsAccountPanelSum {
-	font-size: @sapMFontLargeSize;
+	font-size: var(--sapFontLargeSize);
 }
 
 .sapSuiteUiCommonsAccountPanel:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
 .sapSuiteUiCommonsAccountPopupHeader {
 	padding: 0.5rem;
-	border-bottom: 1px solid @sapUiContentForegroundBorderColor;
+	border-bottom: 1px solid var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteUiCommonsAccountsPopupList {
-	border-top: 1px solid @sapUiContentForegroundBorderColor;
+	border-top: 1px solid var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteUiCommonsAccountsPopupSelectAllWrapper {
-	background: @sapUiPageFooterBorderColor;
+	background: var(--sapPageFooter_BorderColor);
 }
 
 .sapSuiteUiCommonsAccountsPopupSelectAll {
@@ -685,5 +690,5 @@ div:only-child {
 	background-color: red;
 }
 
-// auto-create background color class with all different semantic colors
+/* auto-create background color class with all different semantic colors */
 .sapSuiteBackgroundSemanticColor(backgroundSemanticColor);