feat: shared notification theme variants (#11118)

* feat: shared notification theme variants

* fix theme attribute selectors

* add aura dark screenshots

Author: sissbruecker

packages/aura/src/color.css

@@ -215,13 +215,13 @@ vaadin-tab,
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
 }
 
-:is(#id, .aura-accent-green, .v-success) {
+:is(#id, [theme~='success'], .aura-accent-green, .v-success) {
   --aura-accent-color-light: var(--aura-green);
   --aura-accent-color-dark: var(--aura-green);
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
 }
 
-:is(#id, .aura-accent-yellow, .v-warning) {
+:is(#id, [theme~='warning'], .aura-accent-yellow, .v-warning) {
   --aura-accent-color-light: var(--aura-yellow);
   --aura-accent-color-dark: var(--aura-yellow);
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
@@ -239,7 +239,7 @@ vaadin-tab,
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
 }
 
-:is(#id, .aura-accent-blue, .v-info) {
+:is(#id, [theme~='info'], .aura-accent-blue, .v-info) {
   --aura-accent-color-light: var(--aura-blue);
   --aura-accent-color-dark: var(--aura-blue);
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));

packages/aura/src/components/notification.css

@@ -29,7 +29,11 @@ vaadin-notification-card:is(
     .v-info,
     .v-success,
     .v-warning,
-    .v-error
+    .v-error,
+    [theme~='info'],
+    [theme~='success'],
+    [theme~='warning'],
+    [theme~='error']
   )::part(overlay) {
   --vaadin-notification-background: var(--aura-accent-surface);
   --vaadin-icon-color: var(--aura-accent-text-color);

packages/notification/test/visual/aura/notification.test.js

@@ -37,3 +37,42 @@ describe('notification', () => {
     });
   });
 });
+
+describe('variants', () => {
+  let element;
+
+  beforeEach(() => {
+    element = fixtureSync('<vaadin-notification duration="0"></vaadin-notification>');
+    element.renderer = (root) => {
+      root.textContent = 'Notification';
+    };
+  });
+
+  afterEach(() => {
+    element.opened = false;
+  });
+
+  describe('class', () => {
+    ['v-info', 'v-warning', 'v-error', 'v-success'].forEach((variant) => {
+      it(variant, async () => {
+        element.overlayClass = variant;
+        element.opened = true;
+        await nextRender();
+        const notification = document.querySelector('vaadin-notification-card');
+        await visualDiff(notification, `class-${variant}`);
+      });
+    });
+  });
+
+  describe('theme', () => {
+    ['info', 'warning', 'error', 'success'].forEach((variant) => {
+      it(variant, async () => {
+        element.setAttribute('theme', variant);
+        element.opened = true;
+        await nextRender();
+        const notification = document.querySelector('vaadin-notification-card');
+        await visualDiff(notification, `theme-${variant}`);
+      });
+    });
+  });
+});