Add background opacity option to section styling (#26651)

* Add background opacity option to section styling

* Run updated prettier

Author: jpbede

src/data/lovelace/config/section.ts

@@ -4,6 +4,7 @@ import type { LovelaceStrategyConfig } from "./strategy";
 
 export interface LovelaceSectionStyleConfig {
   background_color?: string;
+  background_opacity?: number;
 }
 
 export interface LovelaceBaseSectionConfig {

src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts

@@ -18,6 +18,7 @@ interface SettingsData {
   column_span?: number;
   background_type: "none" | "color";
   background_color?: number[];
+  background_opacity?: number;
 }
 
 @customElement("hui-section-settings-editor")
@@ -84,6 +85,19 @@ export class HuiDialogEditSection extends LitElement {
                   },
                   disabled: !enableBackground,
                 },
+                {
+                  name: "background_opacity",
+                  selector: {
+                    number: {
+                      min: 0,
+                      max: 100,
+                      step: 1,
+                      mode: "slider",
+                      unit_of_measurement: "%",
+                    },
+                  },
+                  disabled: !enableBackground,
+                },
               ],
             },
           ],
@@ -108,6 +122,7 @@ export class HuiDialogEditSection extends LitElement {
       background_color: this.config.style?.background_color
         ? hex2rgb(this.config.style?.background_color as any)
         : [],
+      background_opacity: this.config.style?.background_opacity || 100,
     };
 
     const schema = this._schema(
@@ -156,11 +171,13 @@ export class HuiDialogEditSection extends LitElement {
       newConfig.style = {
         ...newConfig.style,
         background_color: rgb2hex(newData.background_color as any),
+        background_opacity: newData.background_opacity,
       };
     } else {
       newConfig.style = {
         ...newConfig.style,
         background_color: undefined,
+        background_opacity: undefined,
       };
     }
 

src/panels/lovelace/sections/hui-grid-section.ts

@@ -20,6 +20,7 @@ import "../components/hui-card-edit-mode";
 import { moveCard } from "../editor/config-util";
 import type { LovelaceCardPath } from "../editor/lovelace-path";
 import type { Lovelace } from "../types";
+import { hex2rgb } from "../../../common/color/convert-color";
 
 const CARD_SORTABLE_OPTIONS: HaSortableOptions = {
   delay: 100,
@@ -86,7 +87,11 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
       ? IMPORT_MODE_CARD_SORTABLE_OPTIONS
       : CARD_SORTABLE_OPTIONS;
 
-    const background = this._config.style?.background_color;
+    const backgroundOpacity =
+      (this._config.style?.background_opacity || 100) / 100;
+    const background = this._config.style?.background_color
+      ? `rgba(${hex2rgb(this._config.style.background_color)}, ${backgroundOpacity})`
+      : undefined;
 
     return html`
       <ha-sortable

src/translations/en.json

@@ -7263,7 +7263,8 @@
               "background_type": "Background type",
               "background_type_none_option": "None",
               "background_type_color_option": "Color",
-              "background_color": "Background color"
+              "background_color": "Background color",
+              "background_opacity": "Background opacity"
             },
             "visibility": {
               "explanation": "The section will be shown when ALL conditions below are fulfilled. If no conditions are set, the section will always be shown."