refactor: remove getComputedStyle check for colorIndex validation (#10300)

Author: vursen

packages/avatar/src/vaadin-avatar-mixin.js

@@ -133,20 +133,11 @@ export const AvatarMixin = (superClass) =>
     /** @private */
     __colorIndexChanged(index) {
       if (index != null) {
-        const prop = `--vaadin-user-color-${index}`;
-
-        // Check if custom CSS property is defined
-        const isValid = Boolean(getComputedStyle(document.documentElement).getPropertyValue(prop));
-
-        if (isValid) {
-          this.setAttribute('has-color-index', '');
-          this.style.setProperty('--vaadin-avatar-user-color', `var(${prop})`);
-        } else {
-          this.removeAttribute('has-color-index');
-          console.warn(`The CSS property --vaadin-user-color-${index} is not defined`);
-        }
+        this.setAttribute('has-color-index', '');
+        this.style.setProperty('--vaadin-avatar-user-color', `var(--vaadin-user-color-${index})`);
       } else {
         this.removeAttribute('has-color-index');
+        this.style.removeProperty('--vaadin-avatar-user-color');
       }
     }
 

packages/avatar/test/avatar.test.js

@@ -352,28 +352,6 @@ describe('vaadin-avatar', () => {
         expect(avatar.hasAttribute('has-color-index')).to.be.false;
       });
     });
-
-    describe('incorrect index', () => {
-      beforeEach(() => {
-        sinon.stub(console, 'warn');
-      });
-
-      afterEach(() => {
-        console.warn.restore();
-      });
-
-      it('should not set attribute for invalid index', async () => {
-        avatar.colorIndex = 99;
-        await nextUpdate(avatar);
-        expect(avatar.hasAttribute('has-color-index')).to.be.false;
-      });
-
-      it('should warn about invalid css property used', async () => {
-        avatar.colorIndex = 99;
-        await nextUpdate(avatar);
-        expect(console.warn.called).to.be.true;
-      });
-    });
   });
 
   describe('a11y', () => {