Add more granularity to device_class: battery colors

[Mariusthvdb]

Describe the enhancement

as per FR in home-assistant/frontend#15791

please let me repeat that here, as it resurfaced a fw times in other topics

---

Thanks for having the device_class: battery use colors in current Frontend.

It would be even better if we could have some more granularity. Currently the icon remains Green for a very large range. Given the fact many batteries dont gradually die on us, but tend to do so more abruptly, we can be confronted with a still 'green' battery, while it in fact has deteriorated rather significantly.

Before, I was using custom-ui to do this scale in my setup:

sensor.*_battery_level:
  templates:
    icon_color: >
      if (['unavailable','unknown'].includes(state)) return 'steelblue';
      if (state > 70) return 'green';
      if (state > 50) return 'gold';
      if (state > 30) return 'orange';
      if (state > 10) return 'brown';
      return 'red';

I've moved to the now core coloring, but really miss these levels of accuracy. It just was way more functional, and indicative of the true battery level state of our devices.

Now used in https://github.com/home-assistant/frontend/blob/dev/src/common/entity/color/battery_color.ts are only 70 and 30, so adding to levels for medium-high and very-low would suffice?

Use cases

see above for all background

Visual examples

No response

Anything else?

we can also use UIX to style individual entities

style: |
  :host {
    --icon-primary-color:
      {% set state = states(config.entity)|float(-5) %}
      {% if state > 75 %} var(--success-color)
      {% elif state > 50 %} gold
      {% elif state > 25 %} orange
      {% elif state > 10 %} brown
      {% else %} var(--alert-color)
      {% endif %};
  }