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

@@ -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;

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%;
 }

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);