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

vladitasev · web-flow · commit 42f17665227d · 2020-06-12T16:40:55.000+03:00
diff --git a/packages/main/src/themes/Avatar.css b/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;
-}
+}
diff --git a/packages/main/src/themes/base/Avatar-parameters.css b/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);
+}
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/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";
diff --git a/packages/main/src/themes/sap_belize_hcb/Avatar-parameters.css b/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;
+}
diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/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";
diff --git a/packages/main/src/themes/sap_belize_hcw/Avatar-parameters.css b/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;
+}
diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/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";
diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/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";
diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/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";

Original file line number	Diff line number	Diff line change
`@@ -12,9 +12,18 @@`
`12`	`12`	`width: 3rem;`
`13`	`13`	`border-radius: 50%;`
`14`	`14`	`outline: none;`
`15`		`- color: var(--sapContent_ImagePlaceholderForegroundColor);`
	`15`	`+ color: var(--ui5-avatar-initials-color);`
`16`	`16`	`}`
`17`	`17`
	`18`	`+:host([initials]) {`
	`19`	`+ border: var(--ui5-avatar-initials-border);`
	`20`	`+}`
	`21`	`+`
	`22`	`+:host([icon]) {`
	`23`	`+ border: var(--ui5-avatar-initials-border);`
	`24`	`+}`
	`25`	`+`
	`26`	`+`
`18`	`27`	`/* Shapes */`
`19`	`28`	`:host([shape="Square"]) {`
`20`	`29`	`border-radius: .25rem;`
`@@ -92,51 +101,51 @@`
`92`	`101`	`}`
`93`	`102`
`94`	`103`	`:host(:not([image])) {`
`95`		`- background-color: var(--sapAccentColor6);`
	`104`	`+ background-color: var(--ui5-avatar-accent6);`
`96`	`105`	`}`
`97`	`106`
`98`	`107`	`:host([background-color="Accent1"]) {`
`99`		`- background-color: var(--sapAccentColor1);`
	`108`	`+ background-color: var(--ui5-avatar-accent1);`
`100`	`109`	`}`
`101`	`110`
`102`	`111`	`:host([background-color="Accent2"]) {`
`103`		`- background-color: var(--sapAccentColor2);`
	`112`	`+ background-color: var(--ui5-avatar-accent2);`
`104`	`113`	`}`
`105`	`114`
`106`	`115`	`:host([background-color="Accent3"]) {`
`107`		`- background-color: var(--sapAccentColor3);`
	`116`	`+ background-color: var(--ui5-avatar-accent3);`
`108`	`117`	`}`
`109`	`118`
`110`	`119`	`:host([background-color="Accent4"]) {`
`111`		`- background-color: var(--sapAccentColor4);`
	`120`	`+ background-color: var(--ui5-avatar-accent4);`
`112`	`121`	`}`
`113`	`122`
`114`	`123`	`:host([background-color="Accent5"]) {`
`115`		`- background-color: var(--sapAccentColor5);`
	`124`	`+ background-color: var(--ui5-avatar-accent5);`
`116`	`125`	`}`
`117`	`126`
`118`	`127`	`:host([background-color="Accent6"]) {`
`119`		`- background-color: var(--sapAccentColor6);`
	`128`	`+ background-color: var(--ui5-avatar-accent6);`
`120`	`129`	`}`
`121`	`130`
`122`	`131`	`:host([background-color="Accent7"]) {`
`123`		`- background-color: var(--sapAccentColor7);`
	`132`	`+ background-color: var(--ui5-avatar-accent7);`
`124`	`133`	`}`
`125`	`134`
`126`	`135`	`:host([background-color="Accent8"]) {`
`127`		`- background-color: var(--sapAccentColor8);`
	`136`	`+ background-color: var(--ui5-avatar-accent8);`
`128`	`137`	`}`
`129`	`138`
`130`	`139`	`:host([background-color="Accent9"]) {`
`131`		`- background-color: var(--sapAccentColor9);`
	`140`	`+ background-color: var(--ui5-avatar-accent9);`
`132`	`141`	`}`
`133`	`142`
`134`	`143`	`:host([background-color="Accent10"]) {`
`135`		`- background-color: var(--sapAccentColor10);`
	`144`	`+ background-color: var(--ui5-avatar-accent10);`
`136`	`145`	`}`
`137`	`146`
`138`	`147`	`:host([background-color="Placeholder"]) {`
`139`		`- background-color: var(--sapContent_ImagePlaceholderBackground);`
	`148`	`+ background-color: var(--ui5-avatar-placeholder);`
`140`	`149`	`}`
`141`	`150`
`142`	`151`	`:host(:not([image])) .ui5-avatar-icon {`
`@@ -168,4 +177,4 @@`
`168`	`177`
`169`	`178`	`.ui5-avatar-initials {`
`170`	`179`	`color: inherit;`
`171`		`-}`
	`180`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`@import "../base/sizes-parameters.css";`
	`2`	`+@import "../base/Avatar-parameters.css";`
`2`	`3`	`@import "../base/Badge-parameters.css";`
`3`	`4`	`@import "./Button-parameters.css";`
`4`	`5`	`@import "../base/DatePicker-parameters.css";`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`@import "../base/sizes-parameters.css";`
	`2`	`+@import "./Avatar-parameters.css";`
`2`	`3`	`@import "../base/Badge-parameters.css";`
`3`	`4`	`@import "./Button-parameters.css";`
`4`	`5`	`@import "./CalendarHeader-parameters.css";`