Move partial backup logic to backend

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

gallery/src/demos/demo-integration-card.ts

@@ -206,6 +206,7 @@ const createDeviceRegistryEntries = (
     model: "Mock Device",
     name: "Tag Reader",
     sw_version: null,
+    hw_version: "1.0.0",
     id: "mock-device-id",
     identifiers: [],
     via_device_id: null,

hassio/src/update-available/update-available-card.ts

@@ -29,10 +29,6 @@ import {
   HassioAddonDetails,
   updateHassioAddon,
 } from "../../../src/data/hassio/addon";
-import {
-  createHassioPartialBackup,
-  HassioPartialBackupCreateParams,
-} from "../../../src/data/hassio/backup";
 import {
   extractApiErrorMessage,
   ignoreSupervisorError,
@@ -103,7 +99,7 @@ class UpdateAvailableCard extends LitElement {
 
   @state() private _addonInfo?: HassioAddonDetails;
 
-  @state() private _action: "backup" | "update" | null = null;
+  @state() private _updating = false;
 
   @state() private _error?: string;
 
@@ -132,7 +128,13 @@ class UpdateAvailableCard extends LitElement {
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
-          ${this._action === null
+          ${this._version === this._version_latest
+            ? html`<p>
+                ${this.supervisor.localize("update_available.no_update", {
+                  name: this._name,
+                })}
+              </p>`
+            : !this._updating
             ? html`
                 ${this._changelogContent
                   ? html`
@@ -166,18 +168,13 @@ class UpdateAvailableCard extends LitElement {
             : html`<ha-circular-progress alt="Updating" size="large" active>
                 </ha-circular-progress>
                 <p class="progress-text">
-                  ${this._action === "update"
+                  ${this.supervisor.localize("update_available.updating", {
-                    ? this.supervisor.localize("update_available.updating", {
+                    name: this._name,
-                        name: this._name,
+                    version: this._version_latest,
-                        version: this._version_latest,
+                  })}
-                      })
-                    : this.supervisor.localize(
-                        "update_available.creating_backup",
-                        { name: this._name }
-                      )}
                 </p>`}
         </div>
-        ${this._action === null
+        ${this._version !== this._version_latest && !this._updating
           ? html`
               <div class="card-actions">
                 ${changelog
@@ -224,6 +221,9 @@ class UpdateAvailableCard extends LitElement {
   }
 
   get _shouldCreateBackup(): boolean {
+    if (this._updateType && !["core", "addon"].includes(this._updateType)) {
+      return false;
+    }
     const checkbox = this.shadowRoot?.querySelector("ha-checkbox");
     if (checkbox) {
       return checkbox.checked;
@@ -310,37 +310,16 @@ class UpdateAvailableCard extends LitElement {
 
   private async _update() {
     this._error = undefined;
-    if (this._shouldCreateBackup) {
+    this._updating = true;
-      let backupArgs: HassioPartialBackupCreateParams;
-      if (this._updateType === "addon") {
-        backupArgs = {
-          name: `addon_${this.addonSlug}_${this._version}`,
-          addons: [this.addonSlug!],
-          homeassistant: false,
-        };
-      } else {
-        backupArgs = {
-          name: `${this._updateType}_${this._version}`,
-          folders: ["homeassistant"],
-          homeassistant: true,
-        };
-      }
-      this._action = "backup";
-      try {
-        await createHassioPartialBackup(this.hass, backupArgs);
-      } catch (err: any) {
-        this._error = extractApiErrorMessage(err);
-        this._action = null;
-        return;
-      }
-    }
-
-    this._action = "update";
     try {
       if (this._updateType === "addon") {
-        await updateHassioAddon(this.hass, this.addonSlug!);
+        await updateHassioAddon(
+          this.hass,
+          this.addonSlug!,
+          this._shouldCreateBackup
+        );
       } else if (this._updateType === "core") {
-        await updateCore(this.hass);
+        await updateCore(this.hass, this._shouldCreateBackup);
       } else if (this._updateType === "os") {
         await updateOS(this.hass);
       } else if (this._updateType === "supervisor") {
@@ -349,7 +328,7 @@ class UpdateAvailableCard extends LitElement {
     } catch (err: any) {
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         this._error = extractApiErrorMessage(err);
-        this._action = null;
+        this._updating = false;
         return;
       }
     }

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20211212.0",
+    version="20211215.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/frontend",
     author="The Home Assistant Authors",

src/common/const.ts

@@ -208,6 +208,7 @@ export const DOMAINS_HIDE_DEFAULT_MORE_INFO = [
 export const DOMAINS_INPUT_ROW = [
   "cover",
   "fan",
+  "group",
   "humidifier",
   "input_boolean",
   "input_datetime",

src/components/ha-alert.ts

@@ -46,6 +46,7 @@ class HaAlert extends LitElement {
           rtl: this.rtl,
           [this.alertType]: true,
         })}"
+        role="alert"
       >
         <div class="icon ${this.title ? "" : "no-title"}">
           <slot name="icon">

src/components/ha-form/ha-form-string.ts

@@ -66,7 +66,7 @@ export class HaFormString extends LitElement implements HaFormElement {
       ${isPassword
         ? html`<ha-icon-button
             toggles
-            .label="Click to toggle between masked and clear password"
+            .label=${`${this._unmaskedPassword ? "Hide" : "Show"} password`}
             @click=${this._toggleUnmaskedPassword}
             tabindex="-1"
             .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}

src/components/ha-sidebar.ts

@@ -3,6 +3,7 @@ import {
   mdiBell,
   mdiCalendar,
   mdiCart,
+  mdiCellphoneCog,
   mdiChartBox,
   mdiClose,
   mdiCog,
@@ -43,7 +44,10 @@ import {
   PersistentNotification,
   subscribeNotifications,
 } from "../data/persistent_notification";
-import { getExternalConfig } from "../external_app/external_config";
+import {
+  ExternalConfig,
+  getExternalConfig,
+} from "../external_app/external_config";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo, Route } from "../types";
@@ -188,6 +192,8 @@ class HaSidebar extends LitElement {
 
   @property({ type: Boolean }) public editMode = false;
 
+  @state() private _externalConfig?: ExternalConfig;
+
   @state() private _notifications?: PersistentNotification[];
 
   @state() private _renderEmptySortable = false;
@@ -234,6 +240,7 @@ class HaSidebar extends LitElement {
       changedProps.has("expanded") ||
       changedProps.has("narrow") ||
       changedProps.has("alwaysExpand") ||
+      changedProps.has("_externalConfig") ||
       changedProps.has("_notifications") ||
       changedProps.has("editMode") ||
       changedProps.has("_renderEmptySortable") ||
@@ -264,14 +271,15 @@ class HaSidebar extends LitElement {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
+    if (this.hass && this.hass.auth.external) {
+      getExternalConfig(this.hass.auth.external).then((conf) => {
+        this._externalConfig = conf;
+      });
+    }
+
     subscribeNotifications(this.hass.connection, (notifications) => {
       this._notifications = notifications;
     });
-
-    // Temporary workaround for a bug in Android. Can be removed in Home Assistant 2022.2
-    if (this.hass.auth.external) {
-      getExternalConfig(this.hass.auth.external);
-    }
   }
 
   protected updated(changedProps) {
@@ -364,6 +372,7 @@ class HaSidebar extends LitElement {
           : this._renderPanels(beforeSpacer)}
         ${this._renderSpacer()}
         ${this._renderPanels(afterSpacer)}
+        ${this._renderExternalConfiguration()}
       </paper-listbox>
     `;
   }
@@ -393,7 +402,7 @@ class HaSidebar extends LitElement {
   ) {
     return html`
       <a
-        aria-role="option"
+        role="option"
         href=${`/${urlPath}`}
         data-panel=${urlPath}
         tabindex="-1"
@@ -498,7 +507,7 @@ class HaSidebar extends LitElement {
     >
       <paper-icon-item
         class="notifications"
-        aria-role="option"
+        role="option"
         @click=${this._handleShowNotificationDrawer}
       >
         <ha-svg-icon slot="item-icon" .path=${mdiBell}></ha-svg-icon>
@@ -529,7 +538,7 @@ class HaSidebar extends LitElement {
       href="/profile"
       data-panel="panel"
       tabindex="-1"
-      aria-role="option"
+      role="option"
       aria-label=${this.hass.localize("panel.profile")}
       @mouseenter=${this._itemMouseEnter}
       @mouseleave=${this._itemMouseLeave}
@@ -548,6 +557,43 @@ class HaSidebar extends LitElement {
     </a>`;
   }
 
+  private _renderExternalConfiguration() {
+    return html`${!this.hass.user?.is_admin &&
+    this._externalConfig &&
+    this._externalConfig.hasSettingsScreen
+      ? html`
+          <a
+            role="option"
+            aria-label=${this.hass.localize(
+              "ui.sidebar.external_app_configuration"
+            )}
+            href="#external-app-configuration"
+            tabindex="-1"
+            @click=${this._handleExternalAppConfiguration}
+            @mouseenter=${this._itemMouseEnter}
+            @mouseleave=${this._itemMouseLeave}
+          >
+            <paper-icon-item>
+              <ha-svg-icon
+                slot="item-icon"
+                .path=${mdiCellphoneCog}
+              ></ha-svg-icon>
+              <span class="item-text">
+                ${this.hass.localize("ui.sidebar.external_app_configuration")}
+              </span>
+            </paper-icon-item>
+          </a>
+        `
+      : ""}`;
+  }
+
+  private _handleExternalAppConfiguration(ev: Event) {
+    ev.preventDefault();
+    this.hass.auth.external!.fireMessage({
+      type: "config_screen/show",
+    });
+  }
+
   private get _tooltip() {
     return this.shadowRoot!.querySelector(".tooltip")! as HTMLDivElement;
   }

src/data/device_registry.ts

@@ -13,6 +13,7 @@ export interface DeviceRegistryEntry {
   model: string | null;
   name: string | null;
   sw_version: string | null;
+  hw_version: string | null;
   via_device_id: string | null;
   area_id: string | null;
   name_by_user: string | null;

src/data/hassio/addon.ts

@@ -302,7 +302,8 @@ export const installHassioAddon = async (
 
 export const updateHassioAddon = async (
   hass: HomeAssistant,
-  slug: string
+  slug: string,
+  backup: boolean
 ): Promise<void> => {
   if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
     await hass.callWS({
@@ -310,11 +311,13 @@ export const updateHassioAddon = async (
       endpoint: `/store/addons/${slug}/update`,
       method: "post",
       timeout: null,
+      data: { backup: backup },
     });
   } else {
     await hass.callApi<HassioResponse<void>>(
       "POST",
-      `hassio/addons/${slug}/update`
+      `hassio/addons/${slug}/update`,
+      { backup: backup }
     );
   }
 };

src/data/media-player.ts

@@ -156,6 +156,7 @@ export interface MediaPlayerThumbnail {
 
 export interface ControlButton {
   icon: string;
+  // Used as key for action as well as tooltip and aria-label translation key
   action: string;
 }
 

src/data/supervisor/core.ts

@@ -6,15 +6,18 @@ export const restartCore = async (hass: HomeAssistant) => {
   await hass.callService("homeassistant", "restart");
 };
 
-export const updateCore = async (hass: HomeAssistant) => {
+export const updateCore = async (hass: HomeAssistant, backup: boolean) => {
   if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
     await hass.callWS({
       type: "supervisor/api",
       endpoint: "/core/update",
       method: "post",
       timeout: null,
+      data: { backup: backup },
     });
   } else {
-    await hass.callApi<HassioResponse<void>>("POST", `hassio/core/update`);
+    await hass.callApi<HassioResponse<void>>("POST", `hassio/core/update`, {
+      backup: backup,
+    });
   }
 };

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -65,6 +65,9 @@ class MoreInfoMediaPlayer extends LitElement {
                       action=${control.action}
                       @click=${this._handleClick}
                       .path=${control.icon}
+                      .label=${this.hass.localize(
+                        `ui.card.media_player.${control.action}`
+                      )}
                     >
                     </ha-icon-button>
                   `

src/onboarding/onboarding-create-user.ts

@@ -95,8 +95,11 @@ class OnboardingCreateUser extends LitElement {
   private _handleValueChanged(
     ev: PolymerChangedEvent<HaFormDataContainer>
   ): void {
+    const nameChanged = ev.detail.value.name !== this._newUser.name;
     this._newUser = ev.detail.value;
-    this._maybePopulateUsername();
+    if (nameChanged) {
+      this._maybePopulateUsername();
+    }
     this._formError.password_confirm =
       this._newUser.password !== this._newUser.password_confirm
         ? this.localize(

src/panels/config/automation/condition/types/ha-automation-condition-state.ts

@@ -17,9 +17,9 @@ import {
 
 const stateConditionStruct = object({
   condition: literal("state"),
-  entity_id: string(),
+  entity_id: optional(string()),
   attribute: optional(string()),
-  state: string(),
+  state: optional(string()),
   for: optional(union([string(), forDictStruct])),
 });
 

src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts

@@ -28,7 +28,7 @@ const stateTriggerStruct = assign(
   baseTriggerStruct,
   object({
     platform: literal("state"),
-    entity_id: string(),
+    entity_id: optional(string()),
     attribute: optional(string()),
     from: optional(string()),
     to: optional(string()),

src/panels/config/dashboard/ha-config-navigation.ts

@@ -31,7 +31,7 @@ class HaConfigNavigation extends LitElement {
             : canShowPage(this.hass, page)
         )
           ? html`
-              <a href=${page.path} aria-role="option" tabindex="-1">
+              <a href=${page.path} role="option" tabindex="-1">
                 <paper-icon-item @click=${this._entryClicked}>
                   <div
                     class=${page.iconColor ? "icon-background" : ""}

src/panels/config/devices/device-detail/ha-device-info-card.ts

@@ -66,6 +66,17 @@ export class HaDeviceCard extends LitElement {
                 </div>
               `
             : ""}
+          ${this.device.hw_version
+            ? html`
+                <div class="extra-info">
+                  ${this.hass.localize(
+                    "ui.panel.config.integrations.config_entry.hardware",
+                    "version",
+                    this.device.hw_version
+                  )}
+                </div>
+              `
+            : ""}
           <slot></slot>
         </div>
         <slot name="actions"></slot>

src/panels/config/ha-panel-config.ts

@@ -110,7 +110,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconColor: "#8E24AA",
     },
     {
-      path: "/config/core",
+      path: "/config/server_control",
       translationKey: "settings",
       iconPath: mdiCog,
       iconColor: "#4A5963",

src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts

@@ -95,7 +95,7 @@ class OZWConfigDashboard extends LitElement {
                     <ha-card>
                       <a
                         href="/config/ozw/network/${instance.ozw_instance}"
-                        aria-role="option"
+                        role="option"
                         tabindex="-1"
                       >
                         <paper-icon-item>

src/panels/config/server_control/ha-config-server-control.ts

@@ -5,6 +5,7 @@ import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { componentsWithService } from "../../../common/config/components_with_service";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-card";
 import { checkCoreConfig } from "../../../data/core";
@@ -157,18 +158,20 @@ export class HaConfigServerControl extends LitElement {
                   "ui.panel.config.server_control.section.server_management.restart"
                 )}
               </ha-call-service-button>
-              <ha-call-service-button
+              ${!isComponentLoaded(this.hass, "hassio")
-                class="warning"
+                ? html`<ha-call-service-button
-                .hass=${this.hass}
+                    class="warning"
-                domain="homeassistant"
+                    .hass=${this.hass}
-                service="stop"
+                    domain="homeassistant"
-                confirmation=${this.hass.localize(
+                    service="stop"
-                  "ui.panel.config.server_control.section.server_management.confirm_stop"
+                    confirmation=${this.hass.localize(
-                )}
+                      "ui.panel.config.server_control.section.server_management.confirm_stop"
-                >${this.hass.localize(
+                    )}
-                  "ui.panel.config.server_control.section.server_management.stop"
+                    >${this.hass.localize(
-                )}
+                      "ui.panel.config.server_control.section.server_management.stop"
-              </ha-call-service-button>
+                    )}
+                  </ha-call-service-button>`
+                : ""}
             </div>
           </ha-card>
 

src/panels/developer-tools/state/developer-tools-state.js

@@ -143,7 +143,12 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
       <h1>
         [[localize('ui.panel.developer-tools.tabs.states.current_entities')]]
       </h1>
-      <ha-expansion-panel header="Set state">
+      <ha-expansion-panel
+        header="Set state"
+        outlined
+        expanded="[[_expanded]]"
+        on-expanded-changed="expandedChanged"
+      >
         <p>
           [[localize('ui.panel.developer-tools.tabs.states.description1')]]<br />
           [[localize('ui.panel.developer-tools.tabs.states.description2')]]
@@ -353,6 +358,11 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           "computeEntities(hass, _entityFilter, _stateFilter, _attributeFilter)",
       },
 
+      _expanded: {
+        type: Boolean,
+        value: false,
+      },
+
       narrow: {
         type: Boolean,
         reflectToAttribute: true,
@@ -376,6 +386,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
     this._entity = state;
     this._state = state.state;
     this._stateAttributes = dump(state.attributes);
+    this._expanded = true;
     ev.preventDefault();
   }
 
@@ -393,6 +404,11 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
     this._entity = state;
     this._state = state.state;
     this._stateAttributes = dump(state.attributes);
+    this._expanded = true;
+  }
+
+  expandedChanged(ev) {
+    this._expanded = ev.detail.expanded;
   }
 
   entityMoreInfo(ev) {

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

@@ -26,7 +26,7 @@ import {
   rgb2hex,
   rgb2lab,
 } from "../../../../common/color/convert-color";
-import { labDarken } from "../../../../common/color/lab";
+import { labBrighten, labDarken } from "../../../../common/color/lab";
 import {
   EnergyData,
   getEnergyDataCollection,
@@ -247,10 +247,15 @@ export class HuiEnergyGasGraphCard
       const data: ChartDataset<"bar" | "line">[] = [];
       const entity = this.hass.states[source.stat_energy_from];
 
-      const borderColor =
+      const modifiedColor =
         idx > 0
-          ? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(gasColor)), idx)))
+          ? this.hass.themes.darkMode
-          : gasColor;
+            ? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
+            : labDarken(rgb2lab(hex2rgb(gasColor)), idx)
+          : undefined;
+      const borderColor = modifiedColor
+        ? rgb2hex(lab2rgb(modifiedColor))
+        : gasColor;
 
       let prevValue: number | null = null;
       let prevStart: string | null = null;

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

@@ -1,9 +1,3 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import memoizeOne from "memoize-one";
-import { classMap } from "lit/directives/class-map";
-import "../../../../components/ha-card";
 import {
   ChartData,
   ChartDataset,
@@ -17,16 +11,26 @@ import {
   isToday,
   startOfToday,
 } from "date-fns";
-import { HomeAssistant } from "../../../../types";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { LovelaceCard } from "../../types";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { EnergySolarGraphCardConfig } from "../types";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import memoizeOne from "memoize-one";
 import {
   hex2rgb,
   lab2rgb,
   rgb2hex,
   rgb2lab,
 } from "../../../../common/color/convert-color";
-import { labDarken } from "../../../../common/color/lab";
+import { labBrighten, labDarken } from "../../../../common/color/lab";
+import { formatTime } from "../../../../common/datetime/format_time";
+import { computeStateName } from "../../../../common/entity/compute_state_name";
+import {
+  formatNumber,
+  numberFormatToLocale,
+} from "../../../../common/number/format_number";
+import "../../../../components/chart/ha-chart-base";
+import "../../../../components/ha-card";
 import {
   EnergyData,
   EnergySolarForecasts,
@@ -34,15 +38,11 @@ import {
   getEnergySolarForecasts,
   SolarSourceTypeEnergyPreference,
 } from "../../../../data/energy";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
-import "../../../../components/chart/ha-chart-base";
-import {
-  formatNumber,
-  numberFormatToLocale,
-} from "../../../../common/number/format_number";
-import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { FrontendLocaleData } from "../../../../data/translation";
-import { formatTime } from "../../../../common/datetime/format_time";
+import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
+import { HomeAssistant } from "../../../../types";
+import { LovelaceCard } from "../../types";
+import { EnergySolarGraphCardConfig } from "../types";
 
 @customElement("hui-energy-solar-graph-card")
 export class HuiEnergySolarGraphCard
@@ -258,10 +258,15 @@ export class HuiEnergySolarGraphCard
       const data: ChartDataset<"bar" | "line">[] = [];
       const entity = this.hass.states[source.stat_energy_from];
 
-      const borderColor =
+      const modifiedColor =
         idx > 0
-          ? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(solarColor)), idx)))
+          ? this.hass.themes.darkMode
-          : solarColor;
+            ? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
+            : labDarken(rgb2lab(hex2rgb(solarColor)), idx)
+          : undefined;
+      const borderColor = modifiedColor
+        ? rgb2hex(lab2rgb(modifiedColor))
+        : solarColor;
 
       let prevValue: number | null = null;
       let prevStart: string | null = null;

src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts

@@ -17,7 +17,7 @@ import {
   rgb2lab,
   hex2rgb,
 } from "../../../../common/color/convert-color";
-import { labDarken } from "../../../../common/color/lab";
+import { labBrighten, labDarken } from "../../../../common/color/lab";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import { formatNumber } from "../../../../common/number/format_number";
 import "../../../../components/chart/statistics-chart";
@@ -170,12 +170,17 @@ export class HuiEnergySourcesTableCard
                     this._data!.stats[source.stat_energy_from]
                   ) || 0;
                 totalSolar += energy;
-                const color =
+
+                const modifiedColor =
                   idx > 0
-                    ? rgb2hex(
+                    ? this.hass.themes.darkMode
-                        lab2rgb(labDarken(rgb2lab(hex2rgb(solarColor)), idx))
+                      ? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
-                      )
+                      : labDarken(rgb2lab(hex2rgb(solarColor)), idx)
-                    : solarColor;
+                    : undefined;
+                const color = modifiedColor
+                  ? rgb2hex(lab2rgb(modifiedColor))
+                  : solarColor;
+
                 return html`<tr class="mdc-data-table__row">
                   <td class="mdc-data-table__cell cell-bullet">
                     <div
@@ -229,22 +234,26 @@ export class HuiEnergySourcesTableCard
                     this._data!.stats[source.stat_energy_to]
                   ) || 0;
                 totalBattery += energyFrom - energyTo;
-                const fromColor =
+
+                const modifiedFromColor =
                   idx > 0
-                    ? rgb2hex(
+                    ? this.hass.themes.darkMode
-                        lab2rgb(
+                      ? labBrighten(rgb2lab(hex2rgb(batteryFromColor)), idx)
-                          labDarken(rgb2lab(hex2rgb(batteryFromColor)), idx)
+                      : labDarken(rgb2lab(hex2rgb(batteryFromColor)), idx)
-                        )
+                    : undefined;
-                      )
+                const fromColor = modifiedFromColor
-                    : batteryFromColor;
+                  ? rgb2hex(lab2rgb(modifiedFromColor))
-                const toColor =
+                  : batteryFromColor;
+                const modifiedToColor =
                   idx > 0
-                    ? rgb2hex(
+                    ? this.hass.themes.darkMode
-                        lab2rgb(
+                      ? labBrighten(rgb2lab(hex2rgb(batteryToColor)), idx)
-                          labDarken(rgb2lab(hex2rgb(batteryToColor)), idx)
+                      : labDarken(rgb2lab(hex2rgb(batteryToColor)), idx)
-                        )
+                    : undefined;
-                      )
+                const toColor = modifiedToColor
-                    : batteryToColor;
+                  ? rgb2hex(lab2rgb(modifiedToColor))
+                  : batteryToColor;
+
                 return html`<tr class="mdc-data-table__row">
                     <td class="mdc-data-table__cell cell-bullet">
                       <div
@@ -331,14 +340,17 @@ export class HuiEnergySourcesTableCard
                   if (cost !== null) {
                     totalGridCost += cost;
                   }
-                  const color =
+
+                  const modifiedColor =
                     idx > 0
-                      ? rgb2hex(
+                      ? this.hass.themes.darkMode
-                          lab2rgb(
+                        ? labBrighten(rgb2lab(hex2rgb(consumptionColor)), idx)
-                            labDarken(rgb2lab(hex2rgb(consumptionColor)), idx)
+                        : labDarken(rgb2lab(hex2rgb(consumptionColor)), idx)
-                          )
+                      : undefined;
-                        )
+                  const color = modifiedColor
-                      : consumptionColor;
+                    ? rgb2hex(lab2rgb(modifiedColor))
+                    : consumptionColor;
+
                   return html`<tr class="mdc-data-table__row">
                     <td class="mdc-data-table__cell cell-bullet">
                       <div
@@ -391,12 +403,17 @@ export class HuiEnergySourcesTableCard
                   if (cost !== null) {
                     totalGridCost += cost;
                   }
-                  const color =
+
+                  const modifiedColor =
                     idx > 0
-                      ? rgb2hex(
+                      ? this.hass.themes.darkMode
-                          lab2rgb(labDarken(rgb2lab(hex2rgb(returnColor)), idx))
+                        ? labBrighten(rgb2lab(hex2rgb(returnColor)), idx)
-                        )
+                        : labDarken(rgb2lab(hex2rgb(returnColor)), idx)
-                      : returnColor;
+                      : undefined;
+                  const color = modifiedColor
+                    ? rgb2hex(lab2rgb(modifiedColor))
+                    : returnColor;
+
                   return html`<tr class="mdc-data-table__row">
                     <td class="mdc-data-table__cell cell-bullet">
                       <div
@@ -473,12 +490,17 @@ export class HuiEnergySourcesTableCard
                 if (cost !== null) {
                   totalGasCost += cost;
                 }
-                const color =
+
+                const modifiedColor =
                   idx > 0
-                    ? rgb2hex(
+                    ? this.hass.themes.darkMode
-                        lab2rgb(labDarken(rgb2lab(hex2rgb(gasColor)), idx))
+                      ? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
-                      )
+                      : labDarken(rgb2lab(hex2rgb(gasColor)), idx)
-                    : gasColor;
+                    : undefined;
+                const color = modifiedColor
+                  ? rgb2hex(lab2rgb(modifiedColor))
+                  : gasColor;
+
                 return html`<tr class="mdc-data-table__row">
                   <td class="mdc-data-table__cell cell-bullet">
                     <div

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

@@ -1,10 +1,10 @@
 import { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import {
-  startOfToday,
+  addHours,
+  differenceInDays,
   endOfToday,
   isToday,
-  differenceInDays,
+  startOfToday,
-  addHours,
 } from "date-fns";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -17,7 +17,7 @@ import {
   rgb2hex,
   rgb2lab,
 } from "../../../../common/color/convert-color";
-import { labDarken } from "../../../../common/color/lab";
+import { labBrighten, labDarken } from "../../../../common/color/lab";
 import { formatTime } from "../../../../common/datetime/format_time";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import {
@@ -477,10 +477,16 @@ export class HuiEnergyUsageGraphCard
       Object.entries(sources).forEach(([statId, source], idx) => {
         const data: ChartDataset<"bar">[] = [];
         const entity = this.hass.states[statId];
-        const borderColor =
+
+        const modifiedColor =
           idx > 0
-            ? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(colors[type])), idx)))
+            ? this.hass.themes.darkMode
-            : colors[type];
+              ? labBrighten(rgb2lab(hex2rgb(colors[type])), idx)
+              : labDarken(rgb2lab(hex2rgb(colors[type])), idx)
+            : undefined;
+        const borderColor = modifiedColor
+          ? rgb2hex(lab2rgb(modifiedColor))
+          : colors[type];
 
         data.push({
           label:

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -235,6 +235,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
             <div>
               <ha-icon-button
                 .path=${mdiDotsVertical}
+                .label=${this.hass.localize(
+                  "ui.panel.lovelace.cards.show_more_info"
+                )}
                 class="more-info"
                 @click=${this._handleMoreInfo}
               ></ha-icon-button>

src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts

@@ -30,6 +30,7 @@ import "../../../components/ha-slider";
 import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity";
 import {
   computeMediaDescription,
+  ControlButton,
   MediaPlayerEntity,
   SUPPORT_NEXT_TRACK,
   SUPPORT_PAUSE,
@@ -108,6 +109,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
     }
 
     const entityState = stateObj.state;
+    const controlButton = this._computeControlButton(stateObj);
 
     const buttons = html`
       ${!this._narrow &&
@@ -116,6 +118,9 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
         ? html`
             <ha-icon-button
               .path=${mdiSkipPrevious}
+              .label=${this.hass.localize(
+                "ui.card.media_player.media_previous_track"
+              )}
               @click=${this._previousTrack}
             ></ha-icon-button>
           `
@@ -130,7 +135,10 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
           supportsFeature(stateObj, SUPPORT_PAUSE)))
         ? html`
             <ha-icon-button
-              .path=${this._computeControlIcon(stateObj)}
+              .path=${controlButton.icon}
+              .label=${this.hass.localize(
+                `ui.card.media_player.${controlButton.action}`
+              )}
               @click=${this._playPauseStop}
             ></ha-icon-button>
           `
@@ -140,6 +148,9 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
         ? html`
             <ha-icon-button
               .path=${mdiSkipNext}
+              .label=${this.hass.localize(
+                "ui.card.media_player.media_next_track"
+              )}
               @click=${this._nextTrack}
             ></ha-icon-button>
           `
@@ -162,6 +173,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
             ? html`
                 <ha-icon-button
                   .path=${mdiPower}
+                  .label=${this.hass.localize("ui.card.media_player.turn_on")}
                   @click=${this._togglePower}
                 ></ha-icon-button>
               `
@@ -175,6 +187,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
             ? html`
                 <ha-icon-button
                   .path=${mdiPower}
+                  .label=${this.hass.localize("ui.card.media_player.turn_off")}
                   @click=${this._togglePower}
                 ></ha-icon-button>
               `
@@ -193,6 +206,13 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
                         .path=${stateObj.attributes.is_volume_muted
                           ? mdiVolumeOff
                           : mdiVolumeHigh}
+                        .label=${this.hass.localize(
+                          `ui.card.media_player.${
+                            stateObj.attributes.is_volume_muted
+                              ? "media_volume_mute"
+                              : "media_volume_unmute"
+                          }`
+                        )}
                         @click=${this._toggleMute}
                       ></ha-icon-button>
                     `
@@ -214,10 +234,16 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
                   ? html`
                       <ha-icon-button
                         .path=${mdiVolumeMinus}
+                        .label=${this.hass.localize(
+                          "ui.card.media_player.media_volume_down"
+                        )}
                         @click=${this._volumeDown}
                       ></ha-icon-button>
                       <ha-icon-button
                         .path=${mdiVolumePlus}
+                        .label=${this.hass.localize(
+                          "ui.card.media_player.media_volume_up"
+                        )}
                         @click=${this._volumeUp}
                       ></ha-icon-button>
                     `
@@ -249,14 +275,14 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
     this._veryNarrow = (this.clientWidth || 0) < 225;
   }
 
-  private _computeControlIcon(stateObj: HassEntity): string {
+  private _computeControlButton(stateObj: HassEntity): ControlButton {
     return stateObj.state === "on"
-      ? mdiPlayPause
+      ? { icon: mdiPlayPause, action: "media_play_pause" }
       : stateObj.state !== "playing"
-      ? mdiPlay
+      ? { icon: mdiPlay, action: "media_play" }
       : supportsFeature(stateObj, SUPPORT_PAUSE)
-      ? mdiPause
+      ? { icon: mdiPause, action: "media_pause" }
-      : mdiStop;
+      : { icon: mdiStop, action: "media_stop" };
   }
 
   private _togglePower(): void {

src/translations/en.json

@@ -195,8 +195,14 @@
         "turn_off": "Turn off",
         "media_play": "Play",
         "media_play_pause": "Play/pause",
-        "media_next_track": "Next",
+        "media_pause": "Pause",
-        "media_previous_track": "Previous",
+        "media_stop": "Stop",
+        "media_next_track": "Next track",
+        "media_previous_track": "Previous track",
+        "media_volume_up": "Volume up",
+        "media_volume_down": "Volume down",
+        "media_volume_mute": "Volume mute",
+        "media_volume_unmute": "Volume unmute",
         "text_to_speak": "Text to speak"
       },
       "persistent_notification": {
@@ -689,7 +695,7 @@
           "close_cover": "Close cover",
           "open_tilt_cover": "Open cover tilt",
           "close_tilt_cover": "Close cover tilt",
-          "stop_cover": "Stop cover from moving"
+          "stop_cover": "Stop cover"
         }
       },
       "entity_registry": {
@@ -922,6 +928,7 @@
       "dismiss": "Dismiss"
     },
     "sidebar": {
+      "external_app_configuration": "App Configuration",
       "sidebar_toggle": "Sidebar Toggle",
       "done": "Done",
       "hide_panel": "Hide panel",
@@ -2437,6 +2444,7 @@
             "manuf": "by {manufacturer}",
             "via": "Connected via",
             "firmware": "Firmware: {version}",
+            "hardware": "Hardware: {version}",
             "unnamed_entry": "Unnamed entry",
             "unknown_via_device": "Unknown device",
             "area": "In {area}",
@@ -4269,7 +4277,8 @@
       "create_backup": "Create backup before updating",
       "description": "You have {version} installed. Click update to update to version {newest_version}",
       "updating": "Updating {name} to version {version}",
-      "creating_backup": "Creating backup of {name}"
+      "creating_backup": "Creating backup of {name}",
+      "no_update": "No update available for {name}"
     },
     "confirm": {
       "restart": {