Refactor temperature card into progress card. Use for humidity

config/lovelace/button_card_templates/progress_button.yaml

@@ -0,0 +1,47 @@
+progress:
+  variables:
+    min_value: 5
+    max_value: 45
+    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
+  styles:
+    name:
+      - position: absolute
+      - width: 100%
+      - text-align: center
+      - top: 66%
+      - font-size: 1em
+    state:
+      - position: absolute
+      - top: 17%
+      - width: 100%
+      - display: flex
+      - align-items: center
+      - justify-content: center
+      - font-size: 1.9em
+    icon:
+      - position: absolute
+      - top: 0
+      - right: 0
+      - height: 16px
+      - transform: translateX(5px)
+    card:
+      - background: >
+          [[[
+            var temp = entity.state;
+
+            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;
+
+            return 'linear-gradient(180deg, var(--paper-card-background-color) 0%, var(--paper-card-background-color)' + gradient + '%, ' + color + ' ' + gradient + '%)'
+          ]]]