If entity has "entity_picture" - allow using a CSS theme var for border-radius

[ildar170975]

Breaking change

Proposed change

Related to #24187

Proposing a new CSS theme variable - --state-badge-with-image-border-radius.
A name may be changed.
It is used for a state-badge element for entities with entity_picture defined (or overridden by another image somehow).
By default a current 50% value is used.
Not related to update, camera & media_player entities.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion: If an entity has "entity_picture" - allow NOT using "border-radius: 50%" for "state-badge" #24187
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[MindFreeze]

I think this is a good idea but we really have to come up with a strategy and docs for theme variables before adding new ones. It's too messy right now

[bramkragten]

This should be in the normal styles of :host, where we now have border-radius: 50%;.

[ildar170975]

Now I moved a default "50%" out of "styles" for :host, is it better?

[ildar170975]

Or do you mean moving inside styles()?

        :host {
          ...
          border-radius: ${some_variable};
          ...

Did this in e67b1e1.

Update: failed to do this since styles() is a static function. Reverted back to use this.style.borderRadius.

[MindFreeze]

I think he meant just setting border-radius: var(--state-badge-with-image-border-radius, 50%) in styles but then it won't be only for images. We could just add a class has-image and set it based on that though. Then we could have a general --state-badge-border-radius as well

[bramkragten]

If we go that route, lets do the same for the other cases so we have less inline styles 👍

[ildar170975]

In the latest commit added 3 classes:

A class is defined in _getClass() method.
And now we have 3 theme variables:

--state-badge-border-radius #for any entity (unless overridden)
--state-badge-with-media-image-border-radius #currently - for media_player & camera
--state-badge-with-image-border-radius #for entity with an image

If this is OK - then we need to add a class to :host itself.
But here I am not sure how it is better to do it.
Will this work?

this.classList.add(_getClass());

Also, I think we should remove a previous class before adding a proper class. But I am not sure how to do it))). Can I use

this.classList.remove(...this.classList); //purge first
this.classList.add(_getClass()); //then set the class

?