Refine Notifications component (#27005)

src/main/js/components/notifications/index.js

@@ -11,15 +11,15 @@ function init() {
     defaultAlertClass: "jenkins-notification",
 
     SUCCESS: {
-      alertClass: "jenkins-notification jenkins-notification--success",
+      alertClass: "jenkins-notification jenkins-!-success-color",
       icon: Symbols.SUCCESS,
     },
     WARNING: {
-      alertClass: "jenkins-notification jenkins-notification--warning",
+      alertClass: "jenkins-notification jenkins-!-warning-color",
       icon: Symbols.WARNING,
     },
     ERROR: {
-      alertClass: "jenkins-notification jenkins-notification--error",
+      alertClass: "jenkins-notification jenkins-!-error-color",
       icon: Symbols.ERROR,
       sticky: true,
     },

src/main/scss/abstracts/_theme.scss

@@ -330,6 +330,9 @@ $semantics: (
   );
   --item-box-shadow--focus: oklch(from var(--text-color-secondary) l c h / 0.1);
 
+  // Page
+  --page-inset: 0px;
+
   // Deprecated
   --primary: var(--accent-color); // Use var(--accent-color) instead
   --success: var(--green); // Use var(--success-color) instead

src/main/scss/components/_notifications.scss

@@ -1,49 +1,29 @@
-@use "sass:color";
-@use "sass:string";
+@use "../abstracts/mixins";
 
 .jenkins-notification {
+  @include mixins.overlay-surface($opacity: 75%);
+
   position: fixed;
-  left: 1.2rem;
-  bottom: 1.2rem;
-  min-width: 321px;
-  max-width: min(600px, #{string.unquote("calc(100vw - 2.4rem)")});
+  right: 0;
+  bottom: 0;
+  margin: calc(var(--section-padding) + var(--page-inset));
+  width: min(100%, 300px);
+  max-width: 600px;
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: 1.5ch;
-  padding: 0.8rem;
+  gap: 0.75rem;
+  padding: 0.75rem;
   border-radius: var(--form-input-border-radius);
   font-weight: var(--font-bold-weight);
-  line-height: 1.66;
   color: var(--text-color);
-  box-shadow:
-    0 0 1px 1px rgba(color.adjust(#024cb6, $lightness: -50%), 0.075),
-    0 10px 30px rgba(color.adjust(#024cb6, $lightness: -50%), 0.25),
-    0 0 30px 5px var(--background);
-  will-change: opacity, transform;
   z-index: 999;
   cursor: pointer;
   transition: filter var(--standard-transition);
-  backdrop-filter: brightness(2) blur(30px);
+  transform-origin: bottom right;
 
   svg {
-    width: 1.4rem;
-    height: 1.4rem;
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    z-index: -1;
-    background: oklch(from var(--background) l c h / 0.3);
-    border: var(--jenkins-border--subtle);
-  }
-
-  @supports not (backdrop-filter: blur(15px)) {
-    &::after {
-      opacity: 0.9;
-    }
+    width: 1.375rem;
+    height: 1.375rem;
   }
 
   &:hover {
@@ -55,30 +35,13 @@
   }
 }
 
-.jenkins-notification--success {
-  color: var(--background);
+.jenkins-notification[class*="color"] {
+  background-color: var(--color);
+  color: var(--background) !important;
 
+  // We can't rely on the border from the mixin as on light backgrounds the border looks fuzzy
   &::after {
-    background-color: var(--success-color);
-    opacity: 1;
-  }
-}
-
-.jenkins-notification--warning {
-  color: var(--background);
-
-  &::after {
-    background-color: var(--warning-color);
-    opacity: 1;
-  }
-}
-
-.jenkins-notification--error {
-  color: var(--background);
-
-  &::after {
-    background-color: var(--error-color);
-    opacity: 1;
+    border: 1px solid color-mix(in sRGB, var(--text-color) 10%, transparent);
   }
 }
 
@@ -98,12 +61,10 @@
 @keyframes show-notification {
   from {
     opacity: 0;
-    transform: translateY(1.2rem);
+    transform: translateY(var(--section-padding)) scale(0.95);
   }
 
   to {
-    opacity: 1;
-    transform: translateY(0);
     visibility: visible;
   }
 }
@@ -111,7 +72,7 @@
 @keyframes show-notification-icon {
   from {
     opacity: 0;
-    transform: translateY(0.3rem);
+    transform: translateY(0.5rem);
   }
 }