refactor: update avatar base styles and aura, add filled variant (#10524)

Author: jouni

packages/aura/src/color.css

@@ -50,6 +50,7 @@
 :where(:host),
 vaadin-app-layout > :not([slot]),
 vaadin-notification-container,
+vaadin-avatar,
 vaadin-button,
 vaadin-context-menu-item,
 vaadin-crud-edit,

packages/aura/src/components/avatar.css

@@ -1,16 +1,38 @@
 :where(:root),
 :where(:host) {
-  --vaadin-avatar-border-color: var(--vaadin-border-color-secondary);
-  --vaadin-avatar-background: var(--vaadin-background-container);
+  --vaadin-avatar-border-color: var(--aura-accent-border-color);
   --vaadin-avatar-font-weight: var(--aura-font-weight-medium);
   --vaadin-avatar-font-size: var(--aura-font-size-m);
 }
 
-vaadin-avatar:not([img]) {
+vaadin-avatar {
+  color: var(--vaadin-avatar-text-color, var(--aura-accent-text-color));
   --_shade: color-mix(in srgb, var(--vaadin-border-color) 20%, transparent);
-  background-image: linear-gradient(
-    light-dark(transparent, var(--_shade)),
-    transparent 50%,
-    light-dark(var(--_shade), transparent)
+  background: var(
+    --vaadin-avatar-background,
+    linear-gradient(light-dark(transparent, var(--_shade)), transparent 50%, light-dark(var(--_shade), transparent)),
+    var(--aura-accent-surface)
   );
+  background-clip: content-box;
+}
+
+vaadin-avatar:where([has-color-index]) {
+  --aura-accent-color-light: var(--vaadin-avatar-user-color);
+  --aura-accent-color-dark: var(--vaadin-avatar-user-color);
+  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
+  color: var(--vaadin-avatar-text-color, var(--aura-accent-text-color));
+  --vaadin-avatar-background: var(--vaadin-accent-surface);
+  --vaadin-avatar-text-color: var(--aura-accent-text-color);
+  --vaadin-avatar-border-color: var(--aura-accent-border-color);
+  --vaadin-avatar-border-width: 1px;
+}
+
+vaadin-avatar[img][has-color-index] {
+  --vaadin-avatar-border-color: var(--aura-accent-color);
+  --vaadin-avatar-border-width: 2px;
+}
+
+vaadin-avatar[theme~='filled'] {
+  background: var(--aura-accent-color) content-box;
+  color: var(--aura-accent-contrast-color);
 }

packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/color-index.png

@@ -35,9 +35,10 @@ export const avatarStyles = css`
   :host::before {
     position: absolute;
     content: '';
-    inset: 0;
+    inset: calc(var(--vaadin-focus-ring-width) * -1);
     border-radius: inherit;
-    border: var(--vaadin-avatar-border-width, 1px) solid var(--vaadin-avatar-border-color, transparent);
+    outline: var(--vaadin-avatar-border-width, 1px) solid var(--vaadin-avatar-border-color, transparent);
+    outline-offset: calc((var(--vaadin-focus-ring-width) + var(--vaadin-avatar-border-width, 1px)) * -1);
   }
 
   :host([role='button']) {
@@ -71,9 +72,6 @@ export const avatarStyles = css`
     color: oklch(
       from var(--vaadin-avatar-user-color) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
     );
-  }
-
-  :host([has-color-index])::before {
     --vaadin-avatar-border-width: 2px;
     --vaadin-avatar-border-color: var(--vaadin-avatar-user-color);
   }

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

@@ -338,8 +338,8 @@ describe('vaadin-avatar', () => {
       it('should set border color based on color index', async () => {
         avatar.colorIndex = 0;
         await nextUpdate(avatar);
-        const { borderColor } = getComputedStyle(avatar, '::before');
-        expect(['rgb(255, 0, 0)', 'red'].some((v) => borderColor.indexOf(v) > -1)).to.be.true;
+        const { outlineColor } = getComputedStyle(avatar, '::before');
+        expect(['rgb(255, 0, 0)', 'red'].some((v) => outlineColor.indexOf(v) > -1)).to.be.true;
       });
 
       it('should set attribute based on color index', async () => {

packages/avatar/test/avatar.test.js

@@ -43,7 +43,7 @@
   }
 
   :host([has-color-index])::before {
-    border: none;
+    outline: none;
     box-shadow: inset 0 0 0 2px var(--vaadin-avatar-user-color);
   }