fix: add well contrasting focus-ring to buttons on themed notifications

packages/button/theme/lumo/vaadin-button-styles.js

@@ -30,8 +30,6 @@ const button = css`
     --_button-size: var(--vaadin-button-height, var(--lumo-button-size));
     --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
-    --_focus-ring-gap-on: 0;
-    --_focus-ring-gap-color: var(--lumo-base-color);
     /* Used by notification */
     --_lumo-button-background: var(--vaadin-button-background, var(--lumo-contrast-5pct));
     --_lumo-button-text-color: var(--vaadin-button-text-color, var(--lumo-primary-text-color));
@@ -103,8 +101,8 @@ const button = css`
   /* Keyboard focus */
 
   :host([focus-ring]) {
-    box-shadow: 0 0 0 calc(1px * var(--_focus-ring-gap-on)) var(--_focus-ring-gap-color),
-      0 0 0 calc(var(--_focus-ring-width) + 1px * var(--_focus-ring-gap-on)) var(--_focus-ring-color);
+    box-shadow: 0 0 0 calc(1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-gap-color, var(--lumo-base-color)),
+      0 0 0 calc(var(--_focus-ring-width) + 1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-color);
   }
 
   :host([theme~='primary'][focus-ring]) {

packages/notification/test/visual/lumo/notification.test.js

@@ -1,7 +1,9 @@
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../not-animated-styles.js';
 import '../../../theme/lumo/vaadin-notification.js';
+import '../../../../button/theme/lumo/vaadin-button.js';
 
 describe('notification', () => {
   let element;
@@ -36,3 +38,28 @@ describe('notification', () => {
     });
   });
 });
+describe('themes', () => {
+  let element;
+
+  beforeEach(() => {
+    element = fixtureSync('<vaadin-notification duration="0"></vaadin-notification>');
+    element.renderer = (root) => {
+      root.innerHTML = '<vaadin-button>Button</vaadin-button>';
+    };
+    element.opened = true;
+  });
+
+  afterEach(() => {
+    element.opened = false;
+  });
+
+  ['primary', 'warning', 'success', 'error'].forEach((variant) => {
+    it(variant, async () => {
+      element.setAttribute('theme', variant);
+      const notification = document.querySelector('vaadin-notification-card');
+
+      await sendKeys({ press: 'Tab' });
+      await visualDiff(notification, `notification-${variant}-focus-ring-contrast`);
+    });
+  });
+});

packages/notification/theme/lumo/vaadin-notification-styles.js

@@ -132,6 +132,26 @@ registerStyles(
       animation: lumo-notification-exit-slide-down 300ms;
     }
 
+    :host([theme='success']) {
+      --_focus-ring-gap-color: var(--lumo-success-color);
+      --vaadin-focus-ring-color: var(--lumo-success-contrast-color);
+    }
+
+    :host([theme='warning']) {
+      --_focus-ring-gap-color: var(--lumo-warning-color);
+      --vaadin-focus-ring-color: var(--lumo-warning-contrast-color);
+    }
+
+    :host([theme='error']) {
+      --_focus-ring-gap-color: var(--lumo-error-color);
+      --vaadin-focus-ring-color: var(--lumo-error-contrast-color);
+    }
+
+    :host([theme='primary']) {
+      --_focus-ring-gap-color: var(--lumo-primary-color);
+      --vaadin-focus-ring-color: var(--lumo-primary-contrast-color);
+    }
+
     :host([theme~='primary']) [part='overlay'] {
       background: var(--lumo-primary-color);
       color: var(--lumo-primary-contrast-color);