Don't uppercase unit_of_measurement in state-badge (#1025)

* determine unit from state. set case via label-is-state attr

* use css var and classnames

* use classnames and mixin

* use css var

* fallback, both needed and way more elegant

src/components/entity/ha-state-label-badge.html

@@ -15,6 +15,14 @@
       ha-label-badge {
         --ha-label-badge-color: var(--label-badge-red, #DF4C1E);
       }
+      ha-label-badge.has-unit_of_measurement {
+        --ha-label-badge-label-text-transform: none;
+      }
+
+      ha-label-badge.binary_sensor,
+      ha-label-badge.updater {
+        --ha-label-badge-color: var(--label-badge-blue, #039be5);
+      }
 
       .red {
         --ha-label-badge-color: var(--label-badge-red, #DF4C1E);
@@ -37,7 +45,7 @@
       }
     </style>
 
-    <ha-label-badge class$='[[computeClasses(state)]]'
+    <ha-label-badge class$='[[computeClassNames(state)]]'
       value='[[computeValue(localize, state)]]'
       icon='[[computeIcon(state)]]'
       image='[[computeImage(state)]]'
@@ -90,14 +98,10 @@ class HaStateLabelBadge extends
     this.fire('hass-more-info', { entityId: this.state.entity_id });
   }
 
-  computeClasses(state) {
-    switch (window.hassUtil.computeDomain(state)) {
-      case 'binary_sensor':
-      case 'updater':
-        return 'blue';
-      default:
-        return '';
-    }
+  computeClassNames(state) {
+    const classes = [window.hassUtil.computeDomain(state)];
+    classes.push(window.hassUtil.attributeClassNames(state, ['unit_of_measurement']));
+    return classes.join(' ');
   }
 
   computeValue(localize, state) {

src/components/ha-label-badge.html

@@ -52,10 +52,11 @@
       border-radius: 1em;
       padding: 8% 16%;
       font-weight: 500;
-      text-transform: uppercase;
       overflow: hidden;
+      text-transform: uppercase;
       text-overflow: ellipsis;
       transition: background-color .3s ease-in-out;
+      text-transform: var(--ha-label-badge-label-text-transform, uppercase);
     }
     .label-badge .label.big span {
       font-size: 90%;