refactor: update avatar Lumo CSS to extend base styles (#9676)

Author: vursen

packages/avatar/src/vaadin-avatar.js

@@ -56,6 +56,12 @@ class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(LumoInjectionMixin(P
     return avatarStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`

packages/vaadin-lumo-styles/src/components/avatar.css

@@ -5,40 +5,25 @@
  */
 @media lumo_components_avatar {
   :host {
-    position: relative;
-    display: inline-block;
-    flex: none;
-    overflow: hidden;
-    height: var(--vaadin-avatar-size, 64px);
-    width: var(--vaadin-avatar-size, 64px);
+    --vaadin-avatar-outline-width: var(--vaadin-focus-ring-width, 2px);
     border: var(--vaadin-avatar-outline-width) solid transparent;
     margin: calc(var(--vaadin-avatar-outline-width) * -1);
-    background-clip: content-box;
-    --vaadin-avatar-outline-width: var(--vaadin-focus-ring-width, 2px);
     color: var(--lumo-secondary-text-color);
     background-color: var(--lumo-contrast-10pct);
-    border-radius: 50%;
     outline: none;
-    cursor: default;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-  }
-
-  img {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
+    vertical-align: baseline;
   }
 
   [part='icon'] {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100%;
     font-size: var(--vaadin-avatar-size, 64px);
     line-height: 1;
+    mask: none;
+    background: none;
   }
 
   [part='icon']::before {
@@ -51,28 +36,19 @@
     font-family: var(--lumo-font-family);
     font-size: 2.4375em;
     font-weight: 500;
-    fill: currentColor;
-  }
-
-  :host([hidden]),
-  [hidden] {
-    display: none !important;
   }
 
   :host([has-color-index]) {
-    background-color: var(--vaadin-avatar-user-color);
     color: var(--lumo-base-color);
   }
 
   :host([has-color-index])::before {
-    position: absolute;
-    content: '';
-    inset: 0;
-    border-radius: inherit;
+    border: none;
     box-shadow: inset 0 0 0 2px var(--vaadin-avatar-user-color);
   }
 
   :host([focus-ring]) {
+    outline: none;
     border-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
   }