Refactor temperature card into progress card. Use for humidity

config/lovelace/button_card_templates/progress_button.yaml

@@ -1,15 +1,14 @@
-temperature:
+progress:
   variables:
     min_value: 5
     max_value: 45
-    normal: 19
-    hot: 23
-    color_cold: "var(--primary-color)"
-    color_normal: "var(--color-green)"
-    color_hot: "var(--color-red)"
+    normal_value: 19
+    high_value: 23
+    low_color: "var(--primary-color)"
+    normal_color: "var(--color-green)"
+    high_color: "var(--color-red)"
   show_state: true
   show_name: true
-  # state_display: '[[[ return entity.state.toString().split(".")[0] ]]]'
   styles:
     name:
       - position: absolute
@@ -19,12 +18,12 @@ temperature:
       - font-size: 1em
     state:
       - position: absolute
-      - top: 16%
+      - top: 17%
       - width: 100%
       - display: flex
       - align-items: center
       - justify-content: center
-      - font-size: 2em
+      - font-size: 1.9em
     icon:
       - position: absolute
       - top: 0
@@ -36,11 +35,11 @@ temperature:
           [[[
             var temp = entity.state;
 
-            var color = temp < variables.normal
-              ? variables.color_cold
-              : temp < variables.hot
-                ? variables.color_normal
-                : variables.color_hot;
+            var color = temp < variables.normal_value
+              ? variables.low_color
+              : temp < variables.high_value
+                ? variables.normal_color
+                : variables.high_color;
             var percent = (temp - variables.min_value)/(variables.max_value - variables.min_value) * 100;
             var gradient = 100 - percent;