refactor: add user colors to avatar base styles, update screenshots (#9915)

Author: web-padawan

packages/avatar-group/test/avatar-group-test-styles.js

@@ -1,4 +1,4 @@
-import { addGlobalThemeStyles, css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
 registerStyles(
   'vaadin-avatar-group',
@@ -8,14 +8,3 @@ registerStyles(
     }
   `,
 );
-
-addGlobalThemeStyles(
-  '',
-  css`
-    :host {
-      --vaadin-user-color-0: #000;
-      --vaadin-user-color-1: #000;
-      --vaadin-user-color-2: #000;
-    }
-  `,
-);

packages/avatar-group/test/visual/base/avatar-group.test.js

@@ -9,18 +9,7 @@ describe('avatar-group', () => {
     div = document.createElement('div');
     div.style.display = 'inline-block';
     div.style.padding = '10px';
-    element = fixtureSync(
-      `<vaadin-avatar-group></vaadin-avatar-group>
-      <style>
-        html {
-          --vaadin-user-color-0: royalblue;
-          --vaadin-user-color-1: green;
-          --vaadin-user-color-2: orange;
-          --vaadin-user-color-3: purple;
-        }
-      </style>`,
-      div,
-    );
+    element = fixtureSync('<vaadin-avatar-group></vaadin-avatar-group>', div);
   });
 
   it('basic', async () => {

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/component-base/src/styles/style-props.js';
+import '@vaadin/component-base/src/styles/user-colors.js';
 import { css } from 'lit';
 
 export const avatarStyles = css`