Move config out of subfolder

lovelace/button_card_templates/v2/mixins/progress_button.yaml

@@ -0,0 +1,64 @@
+progress:
+  variables:
+    min_value: 5
+    max_value: 40
+    normal_value: 19
+    high_value: 23
+    low_color: "var(--primary-color)"
+    normal_color: "var(--color-green)"
+    high_color: "var(--color-red)"
+    degrees: 180
+  triggers_update: all
+  show_state: true
+  show_name: true
+  styles:
+    name:
+      - position: absolute
+      - top: "[[[ return this.___config.show_state ? '65%' : 'initial' ]]]"
+      - display: flex
+      - align-items: center
+      - justify-content: center
+      - width: 100%
+      - height: "[[[ return this.___config.show_state ? 'initial' : '100%' ]]]"
+      - font-size: 1em
+    state:
+      - position: absolute
+      - top: "[[[ return this.___config.show_name ? '22%' : 'initial' ]]]"
+      - display: flex
+      - align-items: center
+      - justify-content: center
+      - width: 100%
+      - height: "[[[ return this.___config.show_name ? 'initial' : '100%' ]]]"
+      - font-size: 1.9em
+    icon:
+      - position: absolute
+      - top: 4px
+      - right: -4px
+      - height: 16px
+    img_cell:
+      - position: initial
+    card:
+      - background: >
+          [[[
+            const temp = entity.state;
+
+            const color = temp < variables.normal_value
+              ? variables.low_color
+              : temp < variables.high_value
+                ? variables.normal_color
+                : variables.high_color;
+
+            const min             = variables.min_value;
+            const max             = variables.max_value;
+            const percent         = Math.round((temp - min)/(max - min) * 100);
+            const gradientPercent = 100 - percent;
+
+            const gradient = [
+              `${variables.degrees}deg`,
+              'var(--paper-card-background-color) 0%',
+              `var(--paper-card-background-color) ${gradientPercent}%`,
+              `${color} ${gradientPercent}%`
+            ]
+
+            return `linear-gradient(${gradient.join(',')})`;
+          ]]]

lovelace/button_card_templates/v2/mixins/scene_button.yaml

@@ -0,0 +1,24 @@
+scene:
+  variables:
+    scene_color_1:
+    scene_color_2:
+    degrees: 315
+  tap_action:
+    action: call-service
+    service: scene.turn_on
+    service_data:
+      entity_id: "[[[ return entity.entity_id ]]]"
+  styles:
+    card:
+      - background: >
+          [[[
+            const color_1 = variables.scene_color_1;
+            const color_2 = variables.scene_color_2 || variables.scene_color_1;
+            const degrees = variables.degrees;
+
+            return "linear-gradient("
+                + degrees + "deg, "
+                + color_1 + " 7%, "
+                + color_2 + " 7%, "
+                + color_2 + " 11%, var(--paper-card-background-color) 11%)"
+          ]]]

lovelace/button_card_templates/v2/mixins/with_state_background_button.yaml

@@ -0,0 +1,30 @@
+with_state_background:
+  state:
+    - value: 'on'
+      styles:
+        card:
+          - background-color: var(--primary-color)
+          - color: black
+        icon:
+          - color: black
+    - value: 'home'
+      styles:
+        card:
+          - background-color: var(--primary-color)
+          - color: black
+        icon:
+          - color: black
+    - value: 'recording'
+      styles:
+        card:
+          - background-color: var(--primary-color)
+          - color: black
+        icon:
+          - color: black
+    - value: 'open'
+      styles:
+        card:
+          - background-color: var(--primary-color)
+          - color: black
+        icon:
+          - color: black

lovelace/button_card_templates/v2/mixins/with_state_indicator_button.yaml

@@ -0,0 +1,57 @@
+with_state_indicator:
+  variables:
+    state_indicator_id:  # defaults to entity_id
+
+    state_indicator_size: 2px
+    state_indicator_off_size:  # If set, used when the state_indicator entity is off
+
+    # state indicators are used when the entity's state is not 'on'
+    state_indicator_on_color: white
+    state_indicator_off_color: transparent
+
+    # state_on_indicator_s are used when the entity's state is 'on':
+    state_on_indicator_on_color: white
+    state_on_indicator_off_color: transparent
+
+  triggers_update: all  # unfortunately a template doesn't seem to work here :/
+  double_tap_action:
+    action: call-service
+    service: homeassistant.toggle
+    service_data:
+      entity_id: "[[[ return variables.state_indicator_id || entity.entity_id ]]]"
+  styles:
+    name:
+      - transform: >
+          [[[
+            const state_indicator_entity = variables.state_indicator_id || entity.entity_id;
+
+            const size = states[state_indicator_entity].state === 'on'
+              ? variables.state_indicator_size
+              : variables.state_indicator_off_size || variables.state_indicator_size
+
+            return 'translateY(' + size + ')'
+          ]]]
+
+    card:
+      - border-bottom: >-
+          [[[
+            let color;
+            const state_indicator_entity = variables.state_indicator_id || entity.entity_id;
+            const is_state_indicator_on = Boolean(states[state_indicator_entity].state === 'on');
+
+            if (entity.state === 'on') {
+              color = is_state_indicator_on
+                  ? variables.state_on_indicator_on_color
+                  : variables.state_on_indicator_off_color;
+            } else {
+              color = is_state_indicator_on
+                  ? variables.state_indicator_on_color
+                  : variables.state_indicator_off_color;
+            }
+
+            const size = is_state_indicator_on
+              ? variables.state_indicator_size
+              : variables.state_indicator_off_size || variables.state_indicator_size
+
+            return size + ' solid ' + color;
+          ]]]