Move more button card button theming to modules

mobile_dashboard.yaml

@@ -25,17 +25,10 @@ streamline_templates:
           action: none
         hold_action:
           action: more-info
-      styles: |-
-        .is-unavailable {
-          opacity: 0.5 !important;
-        }
-        .bubble-button-background {
-          opacity: 1 !important;
-          background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--bubble-main-background-color)'} !important;
-          transition: background-color 1s !important;
-        }
       show_state: false
       columns: '[[columns]]'
+      modules:
+        - main_button_state_red
   main_button_name:
     default:
       - name: ''
@@ -94,30 +87,6 @@ streamline_templates:
         tap_action:
           action: navigate
           navigation_path: '[[navigation_path]]'
-      styles_javascript: |
-        const occupancy = states['[[occupancy_entity]]'].state;
-        const hot = states['[[hot_entity]]'].state;
-        const cold = states['[[cold_entity]]'].state;
-        return `
-          .is-unavailable {
-            opacity: 0.5 !important;
-          }
-          .bubble-button-background {
-            opacity: 1 !important;
-            background-color: ${
-              occupancy === 'on' ? 'var(--accent-color)' : 'var(--bubble-main-background-color)'
-            } !important;
-            transition: background-color 1s !important;
-          }
-          .bubble-sub-button {
-            background: transparent
-          }
-          .bubble-sub-button-1 {
-            background-color: ${
-              hot === 'on' ? 'var(--error-color)' : cold === 'on' ? 'var(--purple-color)' : occupancy === 'on' ? 'var(--accent-color)' : 'var(--bubble-main-background-color)'
-            } !important;
-          }
-        `;
       sub_button:
         - entity: '[[temp_entity]]'
           name: Temp
@@ -137,11 +106,16 @@ streamline_templates:
       modules:
         - default
         - temperature_colouring
+        - main_button_floors
       temperature_colouring:
         temperature_sensor: '[[temp_entity]]'
         elements:
           sub_buttons:
             - 1
+      main_button_floors:
+        occupancy_entity: '[[occupancy_entity]]'
+        hot_entity: '[[hot_entity]]'
+        cold_entity: '[[cold_entity]]'
   main_button_outdoors:
     defaults:
       name: ''
@@ -173,28 +147,6 @@ streamline_templates:
         tap_action:
           action: navigate
           navigation_path: '[[navigation_path]]'
-      styles_javascript: |
-        const occupancy = states['[[occupancy_entity]]'].state;
-        return `
-          .is-unavailable {
-            opacity: 0.5 !important;
-          }
-          .bubble-button-background {
-            opacity: 1 !important;
-            background-color: ${
-              occupancy === 'on' ? 'var(--accent-color)' : 'var(--bubble-main-background-color)'
-            } !important;
-            transition: background-color 1s !important;
-          }
-          .bubble-sub-button {
-            background: transparent
-          }
-          .bubble-sub-button-1 {
-            background-color: ${
-              occupancy === 'on' ? 'var(--accent-color)' : 'var(--bubble-main-background-color)'
-            } !important;
-          }
-        `;
       sub_button:
         - entity: '[[temp_entity]]'
           name: Temp
@@ -214,11 +166,14 @@ streamline_templates:
       modules:
         - default
         - temperature_colouring
+        - main_button_outdoors
       temperature_colouring:
         temperature_sensor: '[[temp_entity]]'
         elements:
           sub_buttons:
             - 1
+      main_button_outdoors:
+        occupancy_entity: '[[occupancy_entity]]'
   floors_separator:
     defaults:
       - name: ''
@@ -259,15 +214,9 @@ streamline_templates:
           action: none
         hold_action:
           action: none
-      styles: |-
+      modules:
-        .is-unavailable {
+        - default
-          opacity: 0.5 !important;
+        - popup_security_button
-        }
-        .bubble-button-background {
-          opacity: 1 !important;
-          background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important;
-          transition: background-color 1s !important;
-        }
   popup_accent_color_button:
     defaults:
       - name: ''
@@ -289,14 +238,14 @@ streamline_templates:
           action: none
         hold_action:
           action: none
-      styles: |-
+      modules:
-        .bubble-button-background {
+        - default
-          opacity: 1 !important;
+        - popup_accent_color_button
-          background-color: ${state === 'on' ? 'var(--accent-color)' : 'var(--background-color-2)'} !important;
-        }
   popup_temperature_button:
     defaults:
       - name: ''
+      - hot_entity: ''
+      - cold_entity: ''
     card:
       type: custom:bubble-card
       card_type: button
@@ -304,15 +253,12 @@ streamline_templates:
       entity: '[[entity]]'
       name: '[[name]]'
       show_attribute: false
-      styles: |
+      modules:
-        .is-unavailable {
+        - default
-          opacity: 0.5 !important;
+        - popup_temperature_button
-        }
+      popup_temperature_button:
-        .bubble-button-background {
+        hot_entity: '[[hot_entity]]'
-          opacity: 1 !important;
+        cold_entity: '[[cold_entity]]'
-          background-color: ${hass.states['[[hot_entity]]'].state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important;
-          transition: background-color 1s !important;
-        }
   popup_timer_card:
     defaults:
       name: ''