Revise grid neutrality energy dashboard card, modify energy dashboard presentation to match (#10054)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts

@@ -18,12 +18,10 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../../types";
 import type { LovelaceCard } from "../../types";
 import type { EnergyGridGaugeCardConfig } from "../types";
-import { severityMap } from "../hui-gauge-card";
 
 const LEVELS: LevelDefinition[] = [
-  { level: -1, stroke: severityMap.red },
-  { level: -0.2, stroke: severityMap.yellow },
-  { level: 0, stroke: severityMap.green },
+  { level: -1, stroke: "var(--energy-grid-consumption-color)" },
+  { level: 0, stroke: "var(--energy-grid-return-color)" },
 ];
 
 @customElement("hui-energy-grid-neutrality-gauge-card")

src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts

@@ -17,7 +17,6 @@ import {
   rgb2hex,
   rgb2lab,
 } from "../../../../common/color/convert-color";
-import { hexBlend } from "../../../../common/color/hex";
 import { labDarken } from "../../../../common/color/lab";
 import { formatTime } from "../../../../common/datetime/format_time";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
@@ -357,10 +356,6 @@ export class HuiEnergyUsageGraphCard
       ),
     };
 
-    const backgroundColor = computedStyles
-      .getPropertyValue("--card-background-color")
-      .trim();
-
     Object.entries(statistics).forEach(([key, statIds]) => {
       const sum = [
         "solar",
@@ -515,7 +510,7 @@ export class HuiEnergyUsageGraphCard
               ? Object.keys(combinedData).length
               : idx + 1,
           borderColor,
-          backgroundColor: hexBlend(borderColor, backgroundColor, 50),
+          backgroundColor: borderColor + "7F",
           stack: "stack",
           data: [],
         });

src/resources/ha-style.ts

@@ -84,8 +84,8 @@ documentContainer.innerHTML = `<custom-style>
       --state-climate-idle-color: #8a8a8a;
 
       /* energy */
-      --energy-grid-consumption-color: #126a9a;
-      --energy-grid-return-color: #673ab7;
+      --energy-grid-consumption-color: #488fc2;
+      --energy-grid-return-color: #8353d1;
       --energy-solar-color: #ff9800;
       --energy-non-fossil-color: #0f9d58;
       --energy-battery-out-color: #4db6ac;

src/resources/styles.ts

@@ -45,7 +45,7 @@ export const darkStyles = {
   "codemirror-property": "#C792EA",
   "codemirror-qualifier": "#DECB6B",
   "codemirror-type": "#DECB6B",
-  "energy-grid-return-color": "#b39bdb",
+  "energy-grid-return-color": "#a280db",
 };
 
 export const derivedStyles = {