fix(ui5-avatar): Fixed font-size and color-scheme (#3799)

Author: PetyaMarkovaBogdanova

packages/main/src/themes/Avatar.css

@@ -48,35 +48,35 @@
 	width: 2rem;
 	min-height: 2rem;
 	min-width: 2rem;
-	font-size: .75rem;
+	font-size: var(--_ui5_avatar_fontsize_XS);
 }
 
 :host([_size="S"]),
 :host([size="S"]) {
 	min-height: 3rem;
 	min-width: 3rem;
-	font-size: 1.125rem;
+	font-size: var(--_ui5_avatar_fontsize_S);
 }
 
 :host([_size="M"]),
 :host([size="M"]) {
 	min-height: 4rem;
 	min-width: 4rem;
-	font-size: 1.625rem;
+	font-size: var(--_ui5_avatar_fontsize_M);
 }
 
 :host([_size="L"]),
 :host([size="L"]) {
 	min-height: 5rem;
 	min-width: 5rem;
-	font-size: 2rem;
+	font-size: var(--_ui5_avatar_fontsize_L);
 }
 
 :host([_size="XL"]),
 :host([size="XL"]) {
 	min-height: 7rem;
 	min-width: 7rem;
-	font-size: 2.75rem;
+	font-size: var(--_ui5_avatar_fontsize_XL);
 }
 
 /* Icon */
@@ -122,6 +122,13 @@
     height: 100%;
 }
 
+:host(:not([color-scheme])),
+:host(:not([_has-image])),
+:host([_color-scheme="Accent6"]),
+:host([color-scheme="Accent6"]) {
+	background-color: var(--ui5-avatar-accent6);
+}
+
 :host([_color-scheme="Accent1"]),
 :host([color-scheme="Accent1"]) {
 	background-color: var(--ui5-avatar-accent1);
@@ -147,12 +154,6 @@
 	background-color: var(--ui5-avatar-accent5);
 }
 
-:host(:not([color-scheme]):not([_has-image])),
-:host([_color-scheme="Accent6"]),
-:host([color-scheme="Accent6"]) {
-	background-color: var(--ui5-avatar-accent6);
-}
-
 :host([_color-scheme="Accent7"]),
 :host([color-scheme="Accent7"]) {
 	background-color: var(--ui5-avatar-accent7);

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

@@ -17,4 +17,10 @@
     --_ui5_avatar_focus_offset: 1px;
 	--_ui5_avatar_focus_width: 1px;
 	--_ui5_avatar_focus_color: var(--sapContent_FocusColor);
+
+    --_ui5_avatar_fontsize_XS: 0.75rem;
+    --_ui5_avatar_fontsize_S: 1.125rem;
+    --_ui5_avatar_fontsize_M: 1.625rem;
+    --_ui5_avatar_fontsize_L: 2rem;
+    --_ui5_avatar_fontsize_XL: 2.75rem;
 }

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

@@ -1,3 +1,5 @@
+@import "../base/Avatar-parameters.css";
+
 :root {
     --ui5-avatar-initials-color: #fff;
     --ui5-avatar-initials-border: .0625rem solid #fff;

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

@@ -1,3 +1,5 @@
+@import "../base/Avatar-parameters.css";
+
 :root {
     --ui5-avatar-initials-color: #000;
     --ui5-avatar-initials-border: .0625rem solid #000;

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

@@ -0,0 +1,9 @@
+@import "../base/Avatar-parameters.css";
+
+:root {
+    --_ui5_avatar_fontsize_XS: 1rem;
+    --_ui5_avatar_fontsize_S: 1.125rem;
+    --_ui5_avatar_fontsize_M: 1.5rem;
+    --_ui5_avatar_fontsize_L: 2.25rem;
+    --_ui5_avatar_fontsize_XL: 3rem;
+}

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

@@ -1,5 +1,5 @@
 @import "../base/sizes-parameters.css";
-@import "../base/Avatar-parameters.css";
+@import "./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/Avatar-parameters.css

@@ -0,0 +1,9 @@
+@import "../base/Avatar-parameters.css";
+
+:root {
+    --_ui5_avatar_fontsize_XS: 1rem;
+    --_ui5_avatar_fontsize_S: 1.125rem;
+    --_ui5_avatar_fontsize_M: 1.5rem;
+    --_ui5_avatar_fontsize_L: 2.25rem;
+    --_ui5_avatar_fontsize_XL: 3rem;
+}

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

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

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

@@ -1,3 +1,5 @@
+@import "../base/Avatar-parameters.css";
+
 :root {
     --ui5-avatar-initials-color: var(--sapTextColor);
     --ui5-avatar-initials-border: .0625rem solid var(--sapField_BorderColor);
@@ -13,4 +15,10 @@
     --ui5-avatar-accent10: var(--sapBackgroundColor);
     --ui5-avatar-placeholder: var(--sapBackgroundColor);
     --_ui5_avatar_outline: 0.125rem dotted var(--sapContent_FocusColor);
-}
+
+    --_ui5_avatar_fontsize_XS: 1rem;
+    --_ui5_avatar_fontsize_S: 1.125rem;
+    --_ui5_avatar_fontsize_M: 1.5rem;
+    --_ui5_avatar_fontsize_L: 2.25rem;
+    --_ui5_avatar_fontsize_XL: 3rem;
+}

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

@@ -1,3 +1,5 @@
+@import "../base/Avatar-parameters.css";
+
 :root {
     --ui5-avatar-initials-color: var(--sapTextColor);
     --ui5-avatar-initials-border: .0625rem solid var(--sapField_BorderColor);
@@ -13,4 +15,10 @@
     --ui5-avatar-accent10: var(--sapBackgroundColor);
     --ui5-avatar-placeholder: var(--sapBackgroundColor);
     --_ui5_avatar_outline: 0.125rem dotted var(--sapContent_FocusColor);
-}
+
+    --_ui5_avatar_fontsize_XS: 1rem;
+    --_ui5_avatar_fontsize_S: 1.125rem;
+    --_ui5_avatar_fontsize_M: 1.5rem;
+    --_ui5_avatar_fontsize_L: 2.25rem;
+    --_ui5_avatar_fontsize_XL: 3rem;
+}