@payloadcms/ui 3.0.0-canary.7660f90 → 3.0.0-canary.83a688a

package/dist/scss/toasts.scss

@@ -1,24 +1,28 @@
+@import './styles.scss';
+
 .payload-toast-container {
+  padding: 0;
+  margin: 0;
+
   .payload-toast-close-button {
+    position: absolute;
+    order: 3;
     left: unset;
-    right: 0.5rem;
-    top: 1.55rem;
-    color: var(--theme-elevation-400);
+    inset-inline-end: base(0.5);
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--theme-elevation-600);
     background: unset;
     border: none;
-    display: flex;
-    width: 1.25rem;
-    height: 1.25rem;
-    justify-content: center;
-    align-items: center;
 
-    &:hover {
-      background: none;
+    svg {
+      width: base(0.75);
+      height: base(0.75);
     }
 
-    svg {
-      width: 2rem;
-      height: 2rem;
+    &:hover {
+      color: var(--theme-elevation-250);
+      background: none;
     }
 
     [dir='RTL'] & {
@@ -27,16 +31,20 @@
     }
   }
 
+  .toast-title {
+    line-height: base(1);
+  }
+
   .payload-toast-item {
-    padding: 1rem 2.5rem 1rem 1rem;
-    color: var(--theme-text);
+    padding: base(0.5);
+    color: var(--theme-elevation-800);
     font-style: normal;
     font-weight: 600;
     display: flex;
     gap: 1rem;
     align-items: center;
     width: 100%;
-    border-radius: 0.15rem;
+    border-radius: 4px;
     border: 1px solid var(--theme-border-color);
     background: var(--theme-input-bg);
     box-shadow:
@@ -45,6 +53,7 @@
 
     .toast-content {
       transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+      width: 100%;
     }
 
     &[data-front='false'] {
@@ -61,50 +70,64 @@
 
     .toast-icon {
       svg {
-        width: 2.4rem;
-        height: 2.4rem;
+        width: base(1);
+        height: base(1);
       }
     }
 
     &.toast-warning {
-      border-color: var(--theme-warning-200);
-      background-color: var(--theme-warning-100);
+      color: var(--theme-warning-800);
+      border-color: var(--theme-warning-150);
+      background-color: var(--theme-warning-50);
+
+      .payload-toast-close-button {
+        color: var(--theme-warning-600);
+
+        &:hover {
+          color: var(--theme-warning-250);
+        }
+      }
     }
 
     &.toast-error {
-      border-color: var(--theme-error-300);
-      background-color: var(--theme-error-150);
+      color: var(--theme-error-800);
+      border-color: var(--theme-error-150);
+      background-color: var(--theme-error-50);
+
+      .payload-toast-close-button {
+        color: var(--theme-error-600);
+
+        &:hover {
+          color: var(--theme-error-250);
+        }
+      }
     }
 
     &.toast-success {
-      border-color: var(--theme-success-200);
-      background-color: var(--theme-success-100);
-    }
+      color: var(--theme-success-800);
+      border-color: var(--theme-success-150);
+      background-color: var(--theme-success-50);
 
-    &.toast-info {
-      border-color: var(--theme-elevation-250);
-      background-color: var(--theme-elevation-100);
-    }
+      .payload-toast-close-button {
+        color: var(--theme-success-600);
 
-    [data-theme='light'] & {
-      &.toast-warning {
-        border-color: var(--theme-warning-550);
-        background-color: var(--theme-warning-100);
+        &:hover {
+          color: var(--theme-success-250);
+        }
       }
+    }
 
-      &.toast-error {
-        border-color: var(--theme-error-200);
-        background-color: var(--theme-error-50);
-      }
+    &.toast-info {
+      color: var(--theme-elevation-800);
+      border-color: var(--theme-elevation-150);
+      background-color: var(--theme-elevation-50);
 
-      &.toast-success {
-        border-color: var(--theme-success-550);
-        background-color: var(--theme-success-50);
-      }
+      .payload-toast-close-button {
+        color: var(--theme-elevation-600);
 
-      &.toast-info {
-        border-color: var(--theme-border-color);
-        background-color: var(--theme-elevation-50);
+        &:hover {
+          color: var(--theme-elevation-250);
+        }
       }
     }
   }