If entity has "entity_picture" - allow using a CSS theme var for border-radius (#24248)

* added CSS theme var for border-radius

* prettier

* moved "50%" out of "styles"

* small refactoring

* lint

* lint

* lint

* revert to this.style.borderRadius

* prettier

* adding classes

* fixed styles + setting a class

* clean-up

* remove old classes in render()

* "!important" not needed

* using map

src/components/entity/state-badge.ts

@@ -79,6 +79,17 @@ export class StateBadge extends LitElement {
       </div>`;
     }
 
+    const cls = this.getClass();
+    if (cls) {
+      cls.forEach((toSet, className) => {
+        if (!toSet) {
+          this.classList.remove(className);
+        } else {
+          this.classList.add(className);
+        }
+      });
+    }
+
     if (!this.icon) {
       return nothing;
     }
@@ -175,18 +186,32 @@ export class StateBadge extends LitElement {
         backgroundImage = `url(${imageUrl})`;
         this.icon = false;
       }
-
-      if (domain === "update") {
-        this.style.borderRadius = "0";
-      } else if (domain === "media_player" || domain === "camera") {
-        this.style.borderRadius = "8%";
-      }
     }
 
     this._iconStyle = iconStyle;
     this.style.backgroundImage = backgroundImage;
   }
 
+  protected getClass() {
+    const cls = new Map(
+      ["has-no-radius", "has-media-image", "has-image"].map((_cls) => [
+        _cls,
+        false,
+      ])
+    );
+    if (this.stateObj) {
+      const domain = computeDomain(this.stateObj.entity_id);
+      if (domain === "update") {
+        cls.set("has-no-radius", true);
+      } else if (domain === "media_player" || domain === "camera") {
+        cls.set("has-media-image", true);
+      } else if (this.style.backgroundImage !== "") {
+        cls.set("has-image", true);
+      }
+    }
+    return cls;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       iconColorCSS,
@@ -196,7 +221,7 @@ export class StateBadge extends LitElement {
           display: inline-flex;
           width: 40px;
           color: var(--paper-item-icon-color, #44739e);
-          border-radius: 50%;
+          border-radius: var(--state-badge-border-radius, 50%);
           height: 40px;
           background-size: cover;
           box-sizing: border-box;
@@ -204,6 +229,15 @@ export class StateBadge extends LitElement {
           align-items: center;
           justify-content: center;
         }
+        :host(.has-image) {
+          border-radius: var(--state-badge-with-image-border-radius, 50%);
+        }
+        :host(.has-media-image) {
+          border-radius: var(--state-badge-with-media-image-border-radius, 8%);
+        }
+        :host(.has-no-radius) {
+          border-radius: 0;
+        }
         :host(:focus) {
           outline: none;
         }