Fix dialog text colors theme (#16296)

* Fix dialog text colors theme

* fix drawer border

src/components/ha-drawer.ts

@@ -65,6 +65,7 @@ export class HaDrawer extends DrawerBase {
       .mdc-drawer {
         position: fixed;
         top: 0;
+        border-color: var(--divider-color, rgba(0, 0, 0, 0.12));
       }
       .mdc-drawer.mdc-drawer--modal.mdc-drawer--open {
         z-index: 200;

src/dialogs/generic/dialog-box.ts

@@ -161,8 +161,6 @@ class DialogBox extends LitElement {
         --mdc-theme-primary: var(--error-color);
       }
       ha-dialog {
-        --mdc-dialog-heading-ink-color: var(--primary-text-color);
-        --mdc-dialog-content-ink-color: var(--primary-text-color);
         /* Place above other dialogs */
         --dialog-z-index: 104;
       }

src/dialogs/more-info/components/alarm_control_panel/dialog-enter-code.ts

@@ -176,8 +176,6 @@ export class DialogEnterCode
   static get styles(): CSSResultGroup {
     return css`
       ha-dialog {
-        --mdc-dialog-heading-ink-color: var(--primary-text-color);
-        --mdc-dialog-content-ink-color: var(--primary-text-color);
         /* Place above other dialogs */
         --dialog-z-index: 104;
       }

src/panels/calendar/confirm-event-dialog-box.ts

@@ -125,8 +125,6 @@ class ConfirmEventDialogBox extends LitElement {
         --mdc-theme-primary: var(--error-color);
       }
       ha-dialog {
-        --mdc-dialog-heading-ink-color: var(--primary-text-color);
-        --mdc-dialog-content-ink-color: var(--primary-text-color);
         /* Place above other dialogs */
         --dialog-z-index: 104;
       }

src/panels/config/integrations/dialog-yaml-integration.ts

@@ -75,8 +75,6 @@ export class DialogYamlIntegration extends LitElement {
         text-decoration: none;
       }
       ha-dialog {
-        --mdc-dialog-heading-ink-color: var(--primary-text-color);
-        --mdc-dialog-content-ink-color: var(--primary-text-color);
         /* Place above other dialogs */
         --dialog-z-index: 104;
       }

src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts

@@ -9,6 +9,7 @@ import type { PipelineRun } from "../../../../data/assist_pipeline";
 import type { HomeAssistant } from "../../../../types";
 import { formatNumber } from "../../../../common/number/format_number";
 import "../../../../components/ha-yaml-editor";
+import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 
 const RUN_DATA = {
   pipeline: "Pipeline",
@@ -314,7 +315,12 @@ export class AssistPipelineDebug extends LitElement {
   private _playTTS(): void {
     const url = this.pipelineRun!.tts!.tts_output!.url;
     const audio = new Audio(url);
-    audio.play();
+    audio.addEventListener("error", () => {
+      showAlertDialog(this, { title: "Error", text: "Error playing audio" });
+    });
+    audio.addEventListener("canplaythrough", () => {
+      audio.play();
+    });
   }
 
   static styles = css`

src/resources/styles.ts

@@ -112,6 +112,8 @@ export const derivedStyles = {
   "mdc-button-disabled-ink-color": "var(--disabled-text-color)",
   "mdc-button-outline-color": "var(--divider-color)",
   "mdc-dialog-scroll-divider-color": "var(--divider-color)",
+  "mdc-dialog-heading-ink-color": "var(--primary-text-color)",
+  "mdc-dialog-content-ink-color": "var(--primary-text-color)",
 
   "mdc-text-field-idle-line-color": "var(--input-idle-line-color)",
   "mdc-text-field-hover-line-color": "var(--input-hover-line-color)",
@@ -296,8 +298,6 @@ export const haStyleDialog = css`
   ha-dialog {
     --mdc-dialog-min-width: 400px;
     --mdc-dialog-max-width: 600px;
-    --mdc-dialog-heading-ink-color: var(--primary-text-color);
-    --mdc-dialog-content-ink-color: var(--primary-text-color);
     --justify-action-buttons: space-between;
   }