Add color options to area card (#25881)

* Add color options to area card

* Color all controls with the same color

* Clean area card

src/panels/lovelace/card-features/hui-area-controls-card-feature.ts

@@ -2,7 +2,6 @@ import { mdiFan, mdiLightbulb, mdiToggleSwitch } from "@mdi/js";
 import { callService, type HassEntity } from "home-assistant-js-websocket";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import {
   generateEntityFilter,
@@ -25,7 +24,6 @@ import { AREA_CONTROLS } from "./types";
 
 interface AreaControlsButton {
   iconPath: string;
-  activeColor: string;
   onService: string;
   offService: string;
   filter: EntityFilter;
@@ -37,7 +35,6 @@ export const AREA_CONTROLS_BUTTONS: Record<AreaControl, AreaControlsButton> = {
     filter: {
       domain: "light",
     },
-    activeColor: "var(--state-light-active-color)",
     onService: "light.turn_on",
     offService: "light.turn_off",
   },
@@ -46,7 +43,6 @@ export const AREA_CONTROLS_BUTTONS: Record<AreaControl, AreaControlsButton> = {
     filter: {
       domain: "fan",
     },
-    activeColor: "var(--state-fan-active-color)",
     onService: "fan.turn_on",
     offService: "fan.turn_off",
   },
@@ -55,7 +51,6 @@ export const AREA_CONTROLS_BUTTONS: Record<AreaControl, AreaControlsButton> = {
     filter: {
       domain: "switch",
     },
-    activeColor: "var(--state-switch-active-color)",
     onService: "switch.turn_on",
     offService: "switch.turn_off",
   },
@@ -223,7 +218,6 @@ class HuiAreaControlsCardFeature
           return html`
             <ha-control-button
               class=${active ? "active" : ""}
-              style=${styleMap({ "--active-color": button.activeColor })}
               .control=${control}
               @click=${this._handleButtonTap}
             >
@@ -240,7 +234,8 @@ class HuiAreaControlsCardFeature
       cardFeatureStyles,
       css`
         ha-control-button {
-          --active-color: var(--primary-color);
+          --active-color: var(--state-active-color);
+          --control-button-focus-color: var(--state-active-color);
         }
         ha-control-button.active {
           --control-button-background-color: var(--active-color);

src/panels/lovelace/cards/hui-area-card.ts

@@ -10,7 +10,9 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
+import { computeCssColor } from "../../../common/color/compute-color";
 import { BINARY_STATE_ON } from "../../../common/const";
 import { computeAreaName } from "../../../common/entity/compute_area_name";
 import { generateEntityFilter } from "../../../common/entity/entity_filter";
@@ -428,8 +430,16 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
 
     const ignoreAspectRatio = this.layout === "grid" || this.layout === "panel";
 
+    const color = this._config.color
+      ? computeCssColor(this._config.color)
+      : undefined;
+
+    const style = {
+      "--tile-color": color,
+    };
+
     return html`
-      <ha-card>
+      <ha-card style=${styleMap(style)}>
         <div
           class="background"
           @action=${this._handleAction}

src/panels/lovelace/cards/types.ts

@@ -103,6 +103,7 @@ export interface EntitiesCardConfig extends LovelaceCardConfig {
 export interface AreaCardConfig extends LovelaceCardConfig {
   area?: string;
   name?: string;
+  color?: string;
   navigation_path?: string;
   display_type?: "compact" | "icon" | "picture" | "camera";
   /** @deprecated Use `display_type` instead */

src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts

@@ -45,6 +45,7 @@ const cardConfigStruct = assign(
   object({
     area: optional(string()),
     name: optional(string()),
+    color: optional(string()),
     navigation_path: optional(string()),
     show_camera: optional(boolean()),
     display_type: optional(enums(["compact", "icon", "picture", "camera"])),
@@ -94,6 +95,7 @@ export class HuiAreaCardEditor
               type: "grid",
               schema: [
                 { name: "name", selector: { text: {} } },
+                { name: "color", selector: { ui_color: {} } },
                 {
                   name: "display_type",
                   required: true,
@@ -111,12 +113,6 @@ export class HuiAreaCardEditor
                     },
                   },
                 },
-              ],
-            },
-            {
-              name: "",
-              type: "grid",
-              schema: [
                 ...(showCamera
                   ? ([
                       {
@@ -480,7 +476,6 @@ export class HuiAreaCardEditor
     switch (schema.name) {
       case "area":
         return this.hass!.localize("ui.panel.lovelace.editor.card.area.name");
-
       case "name":
       case "camera_view":
       case "content":

src/translations/en.json

@@ -7173,6 +7173,7 @@
             },
             "area": {
               "name": "Area",
+              "color": "[%key:ui::panel::lovelace::editor::card::tile::color%]",
               "alert_classes": "Alert classes",
               "alert_classes_helper": "In compact style, only the first one will be shown. Order alerts by priority.",
               "sensor_classes": "Sensor classes",