Added Bubble Card Tool

bubble_card/config.yaml

@@ -0,0 +1,8 @@
+migration:
+  done: true
+  sources:
+    entity_count: 4
+    yaml_count: 0
+    written_count: 4
+  migrated_at: '2026-02-04T22:54:45.633Z'
+  version: 1

bubble_card/modules/default.yaml

@@ -0,0 +1,7 @@
+default:
+  name: Default
+  version: ''
+  creator: ''
+  description: Empty and enabled by default. Add your custom styles and/or JS templates here to apply them to all cards by pressing the <ha-icon icon="mdi:pencil"></ha-icon> button above.
+  code: ''
+  is_global: true

bubble_card/modules/icon_container_color.yaml

@@ -0,0 +1,33 @@
+icon_container_color:
+  name: 'Example: Customize the icon container color'
+  version: v1.2
+  creator: Clooos
+  description: |
+    A list of predefined colors to customize the icon container color.
+    Configure this module via the editor or in YAML, for example:
+    <br><br>
+    <code-block><pre>
+    icon_container_color: 
+        color: light-blue
+    </pre></code-block>
+  supported:
+    - calendar
+    - pop-up
+    - cover
+    - button
+    - media-player
+    - climate
+    - select
+  code: |
+    .bubble-icon-container,
+    .bubble-day-chip {
+      opacity: 1 !important;
+      --bubble-icon-background-color: var(--${this.config.icon_container_color?.color}-color) !important;
+    }
+  editor:
+    - name: color
+      label: Color
+      selector:
+        ui_color:
+          include_none: true
+  link: https://github.com/Clooos/Bubble-Card/discussions/1231

bubble_card/modules/izequbes_custom_colors.yaml

@@ -0,0 +1,88 @@
+izequbes_custom_colors:
+  name: IzeQubes Custom Colors
+  version: v1.0
+  creator: IzeQube
+  description: |
+    Allows the user to change the accent color of the card with the standard Home Assistant predefined colors.
+    This change only effects the card if the entity is "turned on".
+
+    The user can also override the icon color and background background of the icon container.
+
+    Last but not least the user can change the opacity of both the card background color as the icon.
+  unsupported:
+    - horizontal-buttons-stack
+    - separator
+  code: |
+    ${(() => {
+      // Icon Color
+      let bubbleIcon = card.querySelector(".bubble-icon");
+      if(bubbleIcon && this.config.izequbes_custom_colors.main_icon) {
+        if(!!this.config.izequbes_custom_colors.main_icon.icon_opacity) {
+          bubbleIcon.style.opacity = this.config.izequbes_custom_colors.main_icon.icon_opacity;
+        }
+        if(!!this.config.izequbes_custom_colors.main_icon.icon_color) {
+          bubbleIcon.style.color = `var(--${this.config.izequbes_custom_colors.main_icon.icon_color}-color)`;
+        }
+      }
+
+      // Icon Background
+      let bubbleIconContainer = card.querySelector(".bubble-icon-container");
+      if(bubbleIconContainer && this.config.izequbes_custom_colors.main_icon) {
+        if(!!this.config.izequbes_custom_colors.main_icon.background_color) {
+          bubbleIconContainer.style.background = `var(--${this.config.izequbes_custom_colors.main_icon.background_color}-color)`;
+        }
+      }
+
+      // Card Color
+      if(this.config.izequbes_custom_colors.card) {
+        if(!!this.config.izequbes_custom_colors.card.background_color) {
+          card.style.setProperty('--bubble-accent-color', `var(--${this.config.izequbes_custom_colors.card.background_color}-color)`);
+        }
+        if(!!this.config.izequbes_custom_colors.card.opacity) {
+          card.querySelector(".bubble-button-background").style.opacity = this.config.izequbes_custom_colors.card.opacity;
+        }
+      }
+
+    })()}
+  editor:
+    - name: main_icon
+      type: expandable
+      title: Main Icon Color Settings
+      icon: mdi:list-box-outline
+      schema:
+        - type: string
+          name: background_color
+          label: Background Color
+          selector:
+            ui_color: {}
+        - name: icon_color
+          label: Icon Color
+          selector:
+            ui_color: {}
+        - name: icon_opacity
+          label: Icon Opacity
+          selector:
+            number:
+              min: 0
+              max: 1
+              step: 0.1
+              mode: slider
+    - name: card
+      type: expandable
+      title: Card Color Settings
+      icon: mdi:list-box-outline
+      schema:
+        - name: background_color
+          label: Background Color
+          selector:
+            ui_color:
+              include_none: true
+        - name: opacity
+          label: Opacity
+          selector:
+            number:
+              min: 0
+              max: 1
+              step: 0.1
+              mode: slider
+  link: https://github.com/Clooos/Bubble-Card/discussions/1246

bubble_card/modules/progress_bar.yaml

@@ -0,0 +1,75 @@
+progress_bar:
+  name: Progress Bar
+  version: 1.1.1
+  creator: inukiwi
+  description: Show a progress bar on "State" buttons, much like how sliders appear. Also supports different colors for custom conditions.
+  supported:
+    - button
+  code: |-
+    .bubble-button-background {
+      ${card.state = this.config.progress_bar?.custom_entity ? hass.states[this.config.progress_bar?.custom_entity].state : state};
+      ${card.percentage = (card.state - this.config.progress_bar?.min_value) / (this.config.progress_bar?.max_value - this.config.progress_bar?.min_value) * 100};
+      ${card.color = this.config.progress_bar?.progress_color};
+      ${card.color = this.config.progress_bar?.conditional_colors?.condition_1 && checkConditionsMet([].concat(this.config.progress_bar?.conditional_colors?.condition_1), hass) ? this.config.progress_bar?.conditional_colors?.condition_color_1 : card.color };
+      ${card.color = this.config.progress_bar?.conditional_colors?.condition_2 && checkConditionsMet([].concat(this.config.progress_bar?.conditional_colors?.condition_2), hass) ? this.config.progress_bar?.conditional_colors?.condition_color_2 : card.color };
+      opacity: 1 !important;
+      background: 
+        linear-gradient(
+          to right,
+          var(--${card.color}-color)
+          ${card.percentage}%,
+          transparent
+          ${card.percentage}%
+        );
+    }
+  editor:
+    - name: min_value
+      label: Minimum value
+      required: true
+      default: 0
+      selector:
+        number:
+          mode: box
+    - name: max_value
+      label: Maximum value
+      required: true
+      default: 100
+      selector:
+        number:
+          mode: box
+    - name: progress_color
+      label: Progress Color
+      required: true
+      default: '#00ff00'
+      selector:
+        ui_color:
+          include_state: true
+    - name: custom_entity
+      label: Custom state entity
+      selector:
+        entity: {}
+    - type: expandable
+      name: conditional_colors
+      title: Conditional colors
+      icon: mdi:tune
+      expanded: false
+      schema:
+        - name: condition_1
+          label: Condition 1 (use color below if met)
+          selector:
+            condition: {}
+        - name: condition_color_1
+          label: Condition 1 color (only used if condition 1 is defined)
+          selector:
+            ui_color:
+              include_state: true
+        - name: condition_2
+          label: Condition 2 (use color below if met)
+          selector:
+            condition: {}
+        - name: condition_color_2
+          label: Condition 2 color (only used if condition 2 is defined)
+          selector:
+            ui_color:
+              include_state: true
+  link: https://github.com/Clooos/Bubble-Card/discussions/1634