fix(ui5-avatar): Correct colors are applied for acc themes (#1786)

packages/main/src/themes/Avatar.css

@@ -12,9 +12,18 @@
 	width: 3rem;
 	border-radius: 50%;
 	outline: none;
-	color: var(--sapContent_ImagePlaceholderForegroundColor);
+	color: var(--ui5-avatar-initials-color);
 }
 
+:host([initials]) {
+    border: var(--ui5-avatar-initials-border);
+}
+
+:host([icon]) {
+    border: var(--ui5-avatar-initials-border);
+}
+
+
 /* Shapes */
 :host([shape="Square"]) {
 	border-radius: .25rem;
@@ -92,51 +101,51 @@
 }
 
 :host(:not([image])) {
-	background-color: var(--sapAccentColor6);
+	background-color: var(--ui5-avatar-accent6);
 }
 
 :host([background-color="Accent1"]) {
-	background-color: var(--sapAccentColor1);
+	background-color: var(--ui5-avatar-accent1);
 }
 
 :host([background-color="Accent2"]) {
-	background-color: var(--sapAccentColor2);
+	background-color: var(--ui5-avatar-accent2);
 }
 
 :host([background-color="Accent3"]) {
-	background-color: var(--sapAccentColor3);
+	background-color: var(--ui5-avatar-accent3);
 }
 
 :host([background-color="Accent4"]) {
-	background-color: var(--sapAccentColor4);
+	background-color: var(--ui5-avatar-accent4);
 }
 
 :host([background-color="Accent5"]) {
-	background-color: var(--sapAccentColor5);
+	background-color: var(--ui5-avatar-accent5);
 }
 
 :host([background-color="Accent6"]) {
-	background-color: var(--sapAccentColor6);
+	background-color: var(--ui5-avatar-accent6);
 }
 
 :host([background-color="Accent7"]) {
-	background-color: var(--sapAccentColor7);
+	background-color: var(--ui5-avatar-accent7);
 }
 
 :host([background-color="Accent8"]) {
-	background-color: var(--sapAccentColor8);
+	background-color: var(--ui5-avatar-accent8);
 }
 
 :host([background-color="Accent9"]) {
-	background-color: var(--sapAccentColor9);
+	background-color: var(--ui5-avatar-accent9);
 }
 
 :host([background-color="Accent10"]) {
-	background-color: var(--sapAccentColor10);
+	background-color: var(--ui5-avatar-accent10);
 }
 
 :host([background-color="Placeholder"]) {
-	background-color: var(--sapContent_ImagePlaceholderBackground);
+	background-color: var(--ui5-avatar-placeholder);
 }
 
 :host(:not([image])) .ui5-avatar-icon {
@@ -168,4 +177,4 @@
 
 .ui5-avatar-initials {
 	color: inherit;
-}
+}

packages/main/src/themes/base/Avatar-parameters.css

@@ -0,0 +1,15 @@
+:root {
+	--ui5-avatar-initials-color: var(--sapContent_ImagePlaceholderForegroundColor);
+    --ui5-avatar-initials-border: none;
+    --ui5-avatar-accent1: var(--sapAccentColor1);
+    --ui5-avatar-accent2: var(--sapAccentColor2);
+    --ui5-avatar-accent3: var(--sapAccentColor3);
+    --ui5-avatar-accent4: var(--sapAccentColor4);
+    --ui5-avatar-accent5: var(--sapAccentColor5);
+    --ui5-avatar-accent6: var(--sapAccentColor6);
+    --ui5-avatar-accent7: var(--sapAccentColor7);
+    --ui5-avatar-accent8: var(--sapAccentColor8);
+    --ui5-avatar-accent9: var(--sapAccentColor9);
+    --ui5-avatar-accent10: var(--sapAccentColor10);
+    --ui5-avatar-placeholder: var(--sapContent_ImagePlaceholderBackground);
+}

packages/main/src/themes/sap_belize/parameters-bundle.css

@@ -1,4 +1,5 @@
 @import "../base/sizes-parameters.css";
+@import "../base/Avatar-parameters.css";
 @import "../base/Badge-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/DatePicker-parameters.css";

packages/main/src/themes/sap_belize_hcb/Avatar-parameters.css

@@ -0,0 +1,15 @@
+:root {
+    --ui5-avatar-initials-color: #fff;
+    --ui5-avatar-initials-border: .0625rem solid #fff;
+    --ui5-avatar-accent1: #000;
+    --ui5-avatar-accent2: #000;
+    --ui5-avatar-accent3: #000;
+    --ui5-avatar-accent4: #000;
+    --ui5-avatar-accent5: #000;
+    --ui5-avatar-accent6: #000;
+    --ui5-avatar-accent7: #000;
+    --ui5-avatar-accent8: #000;
+    --ui5-avatar-accent9: #000;
+    --ui5-avatar-accent10: #000;
+    --ui5-avatar-placeholder: #000;
+}

packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

@@ -1,4 +1,5 @@
 @import "../base/sizes-parameters.css";
+@import "./Avatar-parameters.css";
 @import "../base/Badge-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";

packages/main/src/themes/sap_belize_hcw/Avatar-parameters.css

@@ -0,0 +1,15 @@
+:root {
+    --ui5-avatar-initials-color: #000;
+    --ui5-avatar-initials-border: .0625rem solid #000;
+    --ui5-avatar-accent1: #fff;
+    --ui5-avatar-accent2: #fff;
+    --ui5-avatar-accent3: #fff;
+    --ui5-avatar-accent4: #fff;
+    --ui5-avatar-accent5: #fff;
+    --ui5-avatar-accent6: #fff;
+    --ui5-avatar-accent7: #fff;
+    --ui5-avatar-accent8: #fff;
+    --ui5-avatar-accent9: #fff;
+    --ui5-avatar-accent10: #fff;
+    --ui5-avatar-placeholder: #fff;
+}

packages/main/src/themes/sap_belize_hcw/parameters-bundle.css

@@ -1,4 +1,5 @@
 @import "../base/sizes-parameters.css";
+@import "./Avatar-parameters.css";
 @import "../base/Badge-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";

packages/main/src/themes/sap_fiori_3/parameters-bundle.css

@@ -1,4 +1,5 @@
 @import "../base/sizes-parameters.css";
+@import "../base/Avatar-parameters.css";
 @import "../base/Badge-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/Card-parameters.css";

packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -1,4 +1,5 @@
 @import "../base/sizes-parameters.css";
+@import "../base/Avatar-parameters.css";
 @import "../base/Badge-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/Card-parameters.css";