refactor: update avatar and avatar-group base styles, fix overlap mask (#10082)

Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>

Author: web-padawan

packages/avatar-group/src/styles/vaadin-avatar-group-base-styles.js

@@ -31,16 +31,11 @@ export const avatarGroupStyles = css`
   }
 
   ::slotted(vaadin-avatar) {
+    --_overlap: max(0px, var(--vaadin-avatar-group-overlap, 8px));
+    --_gap: max(0px, var(--vaadin-avatar-group-gap, 2px));
     mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z" fill="black"/></svg>');
-    mask-size: calc(300% + var(--vaadin-avatar-group-gap, 2px) * 6 - var(--vaadin-focus-ring-width) * 6);
-    mask-position: calc(
-      50% +
-        (
-          var(--vaadin-avatar-size, 32px) - var(--vaadin-avatar-group-overlap, 8px) +
-            var(--vaadin-avatar-group-gap, 2px)
-        ) *
-        var(--_d)
-    );
+    mask-size: calc((100% - var(--vaadin-focus-ring-width) * 2) * 3);
+    mask-position: calc(50% + (100% - var(--vaadin-focus-ring-width) * 2 - var(--_overlap)) * var(--_d));
     --_d: var(--_dir);
   }
 
@@ -49,10 +44,7 @@ export const avatarGroupStyles = css`
   }
 
   ::slotted(vaadin-avatar:not(:first-of-type)) {
-    margin-inline-start: calc(
-      var(--vaadin-avatar-group-overlap, 8px) * -1 - var(--vaadin-focus-ring-width) +
-        var(--vaadin-avatar-group-gap, 2px)
-    );
+    margin-inline-start: calc((var(--vaadin-focus-ring-width) + var(--_overlap) - var(--_gap)) * -1);
   }
 
   :host(:not([theme~='reverse'])) ::slotted(vaadin-avatar:last-child),

packages/avatar-group/test/visual/base/screenshots/avatar-group/baseline/avatar-size.png

@@ -14,10 +14,10 @@ export const avatarStyles = css`
     border-radius: 50%;
     cursor: default;
     color: var(--vaadin-avatar-color, var(--vaadin-color-subtle));
-    line-height: 0;
     overflow: hidden;
-    height: var(--vaadin-avatar-size, 32px);
-    width: var(--vaadin-avatar-size, 32px);
+    --_size: var(--vaadin-avatar-size, calc(1lh + var(--vaadin-padding-xs) * 2));
+    height: var(--_size);
+    width: var(--_size);
     border: var(--vaadin-focus-ring-width) solid transparent;
     margin: calc(var(--vaadin-focus-ring-width) * -1);
     background: var(--vaadin-avatar-background, var(--vaadin-background-container-strong));
@@ -27,6 +27,17 @@ export const avatarStyles = css`
     user-select: none;
     -webkit-tap-highlight-color: transparent;
     position: relative;
+    font-weight: var(--vaadin-avatar-font-weight, 400);
+    font-size: var(--vaadin-avatar-font-size, inherit);
+  }
+
+  /* Overlay border on top of image and icon as well */
+  :host::before {
+    position: absolute;
+    content: '';
+    inset: 0;
+    border-radius: inherit;
+    border: var(--vaadin-avatar-border-width, 1px) solid var(--vaadin-avatar-border-color, transparent);
   }
 
   :host([role='button']) {
@@ -61,11 +72,8 @@ export const avatarStyles = css`
   }
 
   :host([has-color-index])::before {
-    position: absolute;
-    content: '';
-    inset: 0;
-    border-radius: inherit;
-    border: 2px solid var(--vaadin-avatar-user-color);
+    --vaadin-avatar-border-width: 2px;
+    --vaadin-avatar-border-color: var(--vaadin-avatar-user-color);
   }
 
   :host([focus-ring]) {