fix: overlay text color with dark and mixed color schemes (#11265)

Author: jouni

dev/aura/components-view.js

@@ -5,6 +5,7 @@ import '@vaadin/checkbox';
 import '@vaadin/checkbox-group';
 import '@vaadin/combo-box';
 import '@vaadin/date-time-picker';
+import '@vaadin/confirm-dialog';
 import '@vaadin/grid';
 import '@vaadin/grid/src/vaadin-grid-selection-column.js';
 import '@vaadin/horizontal-layout';
@@ -212,6 +213,19 @@ function initView(view) {
   grid.querySelector('vaadin-grid-column.avatar').renderer = (root, _, model) => {
     root.innerHTML = `<vaadin-avatar name="${model.item.name}" color-index="${model.index % 9}"></vaadin-avatar>`;
   };
+
+  // Confirm Dialog
+  view.querySelector('#open-confirm-dialog').addEventListener('click', () => {
+    const temp = document.createElement('div');
+    temp.innerHTML = `<vaadin-confirm-dialog id="confirm-dialog-example" header="Unsaved Changes" confirm-text="Save" reject-text="Discard"
+      cancel-button-visible reject-button-visible>
+      Do you want to save or discard the changes? That is the question. But whatever you choose, there will be no
+      consequences.
+    </vaadin-confirm-dialog>`;
+    const dialog = temp.firstElementChild;
+    document.body.append(dialog);
+    dialog.opened = true;
+  });
 }
 
 customElements.define(
@@ -473,6 +487,10 @@ customElements.define(
                     </vaadin-tabs>
                   </div>
 
+                  <div class="aura-surface component">
+                    <vaadin-button id="open-confirm-dialog">Open Dialog</vaadin-button>
+                  </div>
+
                   <div class="aura-surface component wide">
                     <vaadin-date-time-picker style="width: 20em" value="2025-09-09T12:00"></vaadin-date-time-picker>
                   </div>

packages/aura/src/color.css

@@ -59,8 +59,10 @@ vaadin-badge,
 vaadin-button,
 vaadin-upload-button,
 vaadin-context-menu-item,
+vaadin-confirm-dialog,
 vaadin-crud-edit,
 vaadin-drawer-toggle,
+vaadin-dialog,
 vaadin-menu-bar-button,
 vaadin-menu-bar-item,
 vaadin-message::part(attachment),

packages/avatar-group/test/visual/base/screenshots/avatar-group/baseline/opened.png

@@ -46,6 +46,7 @@ export * from './vaadin-confirm-dialog-mixin.js';
  * |`--vaadin-dialog-border-width`          |
  * |`--vaadin-dialog-padding`               |
  * |`--vaadin-dialog-shadow`                |
+ * |`--vaadin-dialog-text-color`            |
  * |`--vaadin-dialog-title-color`           |
  * |`--vaadin-dialog-title-font-size`       |
  * |`--vaadin-dialog-title-font-weight`     |