From e3a373d38ae1c4e724f789a60bd004327f995593 Mon Sep 17 00:00:00 2001
From: Konstantin Gogov <68374332+kgogov@users.noreply.github.com>
Date: Fri, 29 Mar 2024 11:31:35 +0200
Subject: [PATCH] fix(ui5-avatar): correct badge style (#8564)

This commit rectifies the badge alignment inside the avatar that was
disrupted after commit #7564. The badge is now properly aligned within
the avatar enhancing its visual appeal.

Fixes: #8491
---
 packages/main/src/themes/Avatar.css           | 23 +++++++++++--------
 packages/main/src/themes/Badge.css            | 16 ++-----------
 .../main/src/themes/base/Badge-parameters.css |  1 +
 3 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/packages/main/src/themes/Avatar.css b/packages/main/src/themes/Avatar.css
index 02b1475ad182..7c5eb6439a85 100644
--- a/packages/main/src/themes/Avatar.css
+++ b/packages/main/src/themes/Avatar.css
@@ -257,32 +257,37 @@
 	right: 0;
 	width: 1.125rem;
 	height: 1.125rem;
-	background: var(--sapButton_Emphasized_Background);
-	border: var(--sapButton_Emphasized_Background);
-	border-radius: 1rem;
-	color: var(--sapContent_BadgeTextColor);
-	justify-content: center;
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);
-}
+	color: var(--sapBackgroundColor);
+
+	--_ui5-badge-height: 1.125rem;
+	--_ui5-badge-border-radius: 50%;
 
-::slotted([ui5-badge][slot="badge"]) {
-	padding: 0.1875rem;
+	--ui5-badge-color-scheme-1-background: var(--sapButton_Emphasized_Background);
+	--ui5-badge-color-scheme-1-color: var(--sapButton_Emphasized_TextColor);
+	--ui5-badge-color-scheme-1-border: var(--sapButton_Emphasized_BorderColor);
 }
 
 :host([_size="L"]) ::slotted([slot="badge"]),
 :host([size="L"]) ::slotted([slot="badge"]) {
 	width: 1.25rem;
 	height: 1.25rem;
+
+	--_ui5-badge-height: 1.25rem;
+	--_ui5-badge-icon-width: 0.875rem;
 }
 
 :host([_size="XL"]) ::slotted([slot="badge"]),
 :host([size="XL"]) ::slotted([slot="badge"]) {
-	padding: 0.375rem;
 	width: 1.75rem;
 	height: 1.75rem;
+
+	--_ui5-badge-height: 1.75rem;
+	--_ui5-badge-icon-width: 1rem;
 }
 
+/* Slotted Badge - Square Avatar Shape */
 :host([shape="Square"]) ::slotted([slot="badge"]) {
 	bottom: -0.125rem;
 	right: -0.125rem;
diff --git a/packages/main/src/themes/Badge.css b/packages/main/src/themes/Badge.css
index 1f20d0fcfd44..3a88e6809a52 100644
--- a/packages/main/src/themes/Badge.css
+++ b/packages/main/src/themes/Badge.css
@@ -79,8 +79,8 @@
 
 [ui5-icon],
 ::slotted([ui5-icon]) {
-	width: 0.75rem;
-	min-width: 0.75rem;
+	width: var(--_ui5-badge-icon-width);
+	min-width: var(--_ui5-badge-icon-width);
 	height: var(--_ui5-badge-height);
 	min-height: var(--_ui5-badge-height);
 	color: inherit;
@@ -590,16 +590,4 @@
 	background-color: var(--ui5-badge-set2-color-scheme-2-active-background);
 	border-color: var(--ui5-badge-set2-color-scheme-2-active-border);
 	color: var(--ui5-badge-set2-color-scheme-2-active-color);
-}
-
-/* ---Slotted Badges--- */
-/* [ui5-avatar] - Badge icon styles */
-/* Make icon take full width minus padding.
- [ui5-avatar] is the only component using an icon for badge,
- therefore no additional scoping is needed. */
-:host([slot="badge"]) ::slotted([ui5-icon][slot="icon"]) {
-	width: 100%;
-	height: 100%;
-	min-width: 100%;
-	min-height: 100%;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/base/Badge-parameters.css b/packages/main/src/themes/base/Badge-parameters.css
index 3ccfd5bca8b1..be11798a3eea 100644
--- a/packages/main/src/themes/base/Badge-parameters.css
+++ b/packages/main/src/themes/base/Badge-parameters.css
@@ -6,6 +6,7 @@
 	--_ui5-badge-padding-inline-icon-only: 0.1875rem;
 	--_ui5-badge-text-transform: uppercase;
 	--_ui5-badge-icon-height: 0.75em;
+	--_ui5-badge-icon-width: 0.75rem;
 	--_ui5-badge-icon-gap: 0.125rem;
 	--_ui5-badge-font-size: var(--sapFontSmallSize);
 	--_ui5-badge-font: "72override", var(--sapFontFamily);