From e2040e9bb25b6a157b5ea60bd4d1e43c9ac88d83 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 28 Oct 2024 18:09:00 +0300
Subject: [PATCH] Fixed #6659 - Avatar - New Design Tokens

---
 apps/showcase/doc/avatar/AvatarGroupDoc.vue   | 48 +++++++++----------
 .../primevue/src/avatar/style/AvatarStyle.js  | 21 ++++++--
 .../themes/src/presets/aura/avatar/index.js   | 22 +++++++--
 .../themes/src/presets/lara/avatar/index.js   | 19 ++++++--
 .../src/presets/material/avatar/index.js      | 22 +++++++--
 .../themes/src/presets/nora/avatar/index.js   | 22 +++++++--
 6 files changed, 115 insertions(+), 39 deletions(-)

diff --git a/apps/showcase/doc/avatar/AvatarGroupDoc.vue b/apps/showcase/doc/avatar/AvatarGroupDoc.vue
index 4313c6166..ee145fd3b 100644
--- a/apps/showcase/doc/avatar/AvatarGroupDoc.vue
+++ b/apps/showcase/doc/avatar/AvatarGroupDoc.vue
@@ -4,12 +4,12 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <AvatarGroup>
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
-            <Avatar label="+2" shape="circle" size="large" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
         </AvatarGroup>
     </div>
     <DocSectionCode :code="code" />
@@ -22,24 +22,24 @@ export default {
             code: {
                 basic: `
 <AvatarGroup>
-    <Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle" />
-    <Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle" />
-    <Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle" />
-    <Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle" />
-    <Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle" />
-    <Avatar label="+2" shape="circle" size="large" />
+    <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+    <Avatar image="/images/avatar/asiyajavayant.png" shape="circle" />
+    <Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
+    <Avatar image="/images/avatar/ionibowcher.png" shape="circle" />
+    <Avatar image="/images/avatar/xuxuefeng.png" shape="circle" />
+    <Avatar label="+2" shape="circle" />
 </AvatarGroup>
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
         <AvatarGroup>
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
-            <Avatar label="+2" shape="circle" size="large" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
         </AvatarGroup>
     </div>
 </template>
@@ -52,12 +52,12 @@ export default {
 <template>
     <div class="card flex justify-center">
         <AvatarGroup>
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
-            <Avatar label="+2" shape="circle" size="large" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
         </AvatarGroup>
     </div>
 </template>
diff --git a/packages/primevue/src/avatar/style/AvatarStyle.js b/packages/primevue/src/avatar/style/AvatarStyle.js
index ba951c525..f95a82d08 100644
--- a/packages/primevue/src/avatar/style/AvatarStyle.js
+++ b/packages/primevue/src/avatar/style/AvatarStyle.js
@@ -9,6 +9,7 @@ const theme = ({ dt }) => `
     height: ${dt('avatar.height')};
     font-size: ${dt('avatar.font.size')};
     background: ${dt('avatar.background')};
+    color: ${dt('avatar.color')};
     border-radius: ${dt('avatar.border.radius')};
 }
 
@@ -25,7 +26,9 @@ const theme = ({ dt }) => `
 }
 
 .p-avatar-icon {
-    font-size: ${dt('avatar.font.size')};
+    font-size: ${dt('avatar.icon.size')};
+    width: ${dt('avatar.icon.size')};
+    height: ${dt('avatar.icon.size')};
 }
 
 .p-avatar img {
@@ -40,7 +43,9 @@ const theme = ({ dt }) => `
 }
 
 .p-avatar-lg .p-avatar-icon {
-    font-size: ${dt('avatar.lg.font.size')};
+    font-size: ${dt('avatar.lg.icon.size')};
+    width: ${dt('avatar.lg.icon.size')};
+    height: ${dt('avatar.lg.icon.size')};
 }
 
 .p-avatar-xl {
@@ -50,7 +55,9 @@ const theme = ({ dt }) => `
 }
 
 .p-avatar-xl .p-avatar-icon {
-    font-size: ${dt('avatar.xl.font.size')};
+    font-size: ${dt('avatar.xl.icon.size')};
+    width: ${dt('avatar.xl.icon.size')};
+    height: ${dt('avatar.xl.icon.size')};
 }
 
 .p-avatar-group {
@@ -65,6 +72,14 @@ const theme = ({ dt }) => `
 .p-avatar-group .p-avatar {
     border: 2px solid ${dt('avatar.group.border.color')};
 }
+
+.p-avatar-group .p-avatar-lg + .p-avatar-lg {
+    margin-left: ${dt('avatar.lg.group.offset')};
+}
+
+.p-avatar-group .p-avatar-xl + .p-avatar-xl {
+    margin-left: ${dt('avatar.xl.group.offset')};
+}
 `;
 
 const classes = {
diff --git a/packages/themes/src/presets/aura/avatar/index.js b/packages/themes/src/presets/aura/avatar/index.js
index 7907a7bed..506303896 100644
--- a/packages/themes/src/presets/aura/avatar/index.js
+++ b/packages/themes/src/presets/aura/avatar/index.js
@@ -4,20 +4,36 @@ export default {
         height: '2rem',
         fontSize: '1rem',
         background: '{content.border.color}',
+        color: '{content.color}',
         borderRadius: '{content.border.radius}'
     },
+    icon: {
+        size: '1rem'
+    },
     group: {
         borderColor: '{content.background}',
-        offset: '-1rem'
+        offset: '-0.75rem'
     },
     lg: {
         width: '3rem',
         height: '3rem',
-        fontSize: '1.5rem'
+        fontSize: '1.5rem',
+        icon: {
+            size: '1.5rem'
+        },
+        group: {
+            offset: '-1rem'
+        }
     },
     xl: {
         width: '4rem',
         height: '4rem',
-        fontSize: '2rem'
+        fontSize: '2rem',
+        icon: {
+            size: '2rem'
+        },
+        group: {
+            offset: '-1.5rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/lara/avatar/index.js b/packages/themes/src/presets/lara/avatar/index.js
index 7907a7bed..a40937bbf 100644
--- a/packages/themes/src/presets/lara/avatar/index.js
+++ b/packages/themes/src/presets/lara/avatar/index.js
@@ -4,20 +4,33 @@ export default {
         height: '2rem',
         fontSize: '1rem',
         background: '{content.border.color}',
+        color: '{content.color}',
         borderRadius: '{content.border.radius}'
     },
+    icon: {
+        size: '1rem'
+    },
     group: {
         borderColor: '{content.background}',
-        offset: '-1rem'
+        offset: '-0.75rem'
     },
     lg: {
         width: '3rem',
         height: '3rem',
-        fontSize: '1.5rem'
+        fontSize: '1.5rem',
+        icon: {
+            size: '1.5rem'
+        },
+        group: {
+            offset: '-1rem'
+        }
     },
     xl: {
         width: '4rem',
         height: '4rem',
-        fontSize: '2rem'
+        fontSize: '2rem',
+        icon: {
+            size: '2rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/material/avatar/index.js b/packages/themes/src/presets/material/avatar/index.js
index 7907a7bed..506303896 100644
--- a/packages/themes/src/presets/material/avatar/index.js
+++ b/packages/themes/src/presets/material/avatar/index.js
@@ -4,20 +4,36 @@ export default {
         height: '2rem',
         fontSize: '1rem',
         background: '{content.border.color}',
+        color: '{content.color}',
         borderRadius: '{content.border.radius}'
     },
+    icon: {
+        size: '1rem'
+    },
     group: {
         borderColor: '{content.background}',
-        offset: '-1rem'
+        offset: '-0.75rem'
     },
     lg: {
         width: '3rem',
         height: '3rem',
-        fontSize: '1.5rem'
+        fontSize: '1.5rem',
+        icon: {
+            size: '1.5rem'
+        },
+        group: {
+            offset: '-1rem'
+        }
     },
     xl: {
         width: '4rem',
         height: '4rem',
-        fontSize: '2rem'
+        fontSize: '2rem',
+        icon: {
+            size: '2rem'
+        },
+        group: {
+            offset: '-1.5rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/nora/avatar/index.js b/packages/themes/src/presets/nora/avatar/index.js
index 47cf87391..7b58044c1 100644
--- a/packages/themes/src/presets/nora/avatar/index.js
+++ b/packages/themes/src/presets/nora/avatar/index.js
@@ -4,20 +4,36 @@ export default {
         height: '2rem',
         fontSize: '1rem',
         background: '{content.hover.background}',
+        color: '{content.color}',
         borderRadius: '{content.border.radius}'
     },
+    icon: {
+        size: '1rem'
+    },
     group: {
         borderColor: '{content.background}',
-        offset: '-1rem'
+        offset: '-0.75rem'
     },
     lg: {
         width: '3rem',
         height: '3rem',
-        fontSize: '1.5rem'
+        fontSize: '1.5rem',
+        icon: {
+            size: '1.5rem'
+        },
+        group: {
+            offset: '-1rem'
+        }
     },
     xl: {
         width: '4rem',
         height: '4rem',
-        fontSize: '2rem'
+        fontSize: '2rem',
+        icon: {
+            size: '2rem'
+        },
+        group: {
+            offset: '-1.5rem'
+        }
     }
 };