fix avatar typography

Author: BenOsodrac

core/src/components/avatar/avatar.ionic.scss

@@ -8,17 +8,15 @@
   --padding-top: #{globals.$ion-space-0};
   --padding-bottom: #{globals.$ion-space-0};
 
+  @include globals.typography(globals.$ion-heading-h6-medium);
+
   display: flex;
 
   align-items: center;
   justify-content: center;
 
-  background: globals.$ion-primitives-neutral-100;
-  color: globals.$ion-primitives-neutral-800;
-
-  font-weight: globals.$ion-font-weight-medium;
-
-  line-height: globals.$ion-font-line-height-700;
+  background: globals.$ion-bg-neutral-subtlest-default;
+  color: globals.$ion-text-subtlest;
 }
 
 :host(:not(.avatar-image)) {
@@ -33,38 +31,32 @@
   --padding-end: #{globals.$ion-space-050};
   --padding-start: #{globals.$ion-space-050};
 
+  @include globals.typography(globals.$ion-body-sm-medium);
+
   width: globals.$ion-scale-400;
   height: globals.$ion-scale-400;
-
-  font-size: globals.$ion-font-size-300;
-
-  line-height: globals.$ion-font-line-height-500;
 }
 
 /* Extra Small */
 :host(.avatar-xsmall) {
   --padding-end: #{globals.$ion-space-050};
   --padding-start: #{globals.$ion-space-050};
 
+  @include globals.typography(globals.$ion-body-sm-medium);
+
   width: globals.$ion-scale-600;
   height: globals.$ion-scale-600;
-
-  font-size: globals.$ion-font-size-300;
-
-  line-height: globals.$ion-font-line-height-500;
 }
 
 /* Small */
 :host(.avatar-small) {
   --padding-end: #{globals.$ion-space-150};
   --padding-start: #{globals.$ion-space-150};
 
+  @include globals.typography(globals.$ion-body-lg-medium);
+
   width: globals.$ion-scale-800;
   height: globals.$ion-scale-800;
-
-  font-size: globals.$ion-font-size-400;
-
-  line-height: globals.$ion-font-line-height-600;
 }
 
 /* Medium */
@@ -74,30 +66,28 @@
 
   width: globals.$ion-scale-1000;
   height: globals.$ion-scale-1000;
-
-  font-size: globals.$ion-font-size-450;
 }
 
 /* Large */
 :host(.avatar-large) {
   --padding-end: #{globals.$ion-space-250};
   --padding-start: #{globals.$ion-space-250};
 
+  @include globals.typography(globals.$ion-heading-h5-medium);
+
   width: globals.$ion-scale-1200;
   height: globals.$ion-scale-1200;
-
-  font-size: globals.$ion-font-size-500;
 }
 
 /* Extra Large */
 :host(.avatar-xlarge) {
   --padding-end: #{globals.$ion-space-300};
   --padding-start: #{globals.$ion-space-300};
 
+  @include globals.typography(globals.$ion-heading-h4-medium);
+
   width: globals.$ion-scale-1400;
   height: globals.$ion-scale-1400;
-
-  font-size: globals.$ion-font-size-550;
 }
 
 // Avatar Shapes