Notification (#211)

stellar · Jan 18, 2024 · a34c3f4 · a34c3f4
1 parent 8ed39cc
commit a34c3f4
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 29 deletions.
diff --git a/@stellar/design-system/src/components/Notification/index.tsx b/@stellar/design-system/src/components/Notification/index.tsx
@@ -20,6 +20,9 @@ interface Props
   title: string;
 }
 
+// TODO: Notification: add action buttons
+// TODO: Notification: floating with max width
+
 /**
  * Use `notification` to draw a user's attention. There are five variants `primary`, `secondary`, `success`, `error`, and `warning`.
  */

diff --git a/@stellar/design-system/src/components/Notification/styles.scss b/@stellar/design-system/src/components/Notification/styles.scss
@@ -2,19 +2,20 @@
 
 .Notification {
   // Variables
-  --Notification-color-background: var(--color-purple-20);
-  --Notification-color-border: var(--color-purple-30);
-  --Notification-color-icon: var(--color-purple-50);
+  --Notification-color-background: var(--sds-clr-gray-01);
+  --Notification-color-border: var(--sds-clr-gray-06);
+  --Notification-color-icon: var(--sds-clr-lilac-09);
+  --Notification-color-action: var(--sds-clr-lilac-11);
 
   // Base
   font-family: var(--font-family-base);
   background-color: var(--Notification-color-background);
   border: 1px solid var(--Notification-color-border);
-  border-radius: pxToRem(4px);
+  border-radius: pxToRem(8px);
   display: flex;
   flex-direction: column;
   gap: pxToRem(8px);
-  padding: pxToRem(16px);
+  padding: pxToRem(12px);
   width: 100%;
 
   &__title {
@@ -25,7 +26,7 @@
     &__icon {
       width: pxToRem(16px);
       height: pxToRem(16px);
-      margin-top: pxToRem(3px);
+      margin-top: pxToRem(2px);
       flex-shrink: 0;
 
       svg {
@@ -36,55 +37,67 @@
     }
 
     &__text {
-      color: var(--color-gray-90);
+      color: var(--sds-clr-gray-12);
       font-size: pxToRem(14px);
-      line-height: pxToRem(22px);
-      font-weight: var(--font-weight-medium);
+      line-height: pxToRem(20px);
+      font-weight: var(--font-weight-semi-bold);
     }
   }
 
   &__message {
-    color: var(--color-gray-70);
+    color: var(--sds-clr-gray-11);
     font-size: pxToRem(14px);
-    line-height: pxToRem(22px);
+    line-height: pxToRem(20px);
     font-weight: var(--font-weight-regular);
+    display: flex;
+    flex-direction: column;
+    gap: pxToRem(4px);
+
+    p {
+      margin-bottom: 0 !important;
+    }
 
     ul {
-      font-size: pxToRem(14px);
-      line-height: pxToRem(22px);
-      color: var(--color-gray-70);
+      font-size: inherit;
+      line-height: inherit;
+      color: inherit;
       list-style-type: disc;
     }
   }
 
   // Variant
   &--primary {
-    --Notification-color-background: var(--color-purple-20);
-    --Notification-color-border: var(--color-purple-30);
-    --Notification-color-icon: var(--color-purple-50);
+    --Notification-color-background: var(--sds-clr-gray-01);
+    --Notification-color-border: var(--sds-clr-gray-06);
+    --Notification-color-icon: var(--sds-clr-lilac-09);
+    --Notification-color-action: var(--sds-clr-lilac-11);
   }
 
   &--secondary {
-    --Notification-color-background: var(--color-gray-20);
-    --Notification-color-border: var(--color-gray-30);
-    --Notification-color-icon: var(--color-gray-50);
+    --Notification-color-background: var(--sds-clr-gray-03);
+    --Notification-color-border: var(--sds-clr-gray-06);
+    --Notification-color-icon: var(--sds-clr-lilac-09);
+    --Notification-color-action: var(--sds-clr-lilac-11);
   }
 
   &--success {
-    --Notification-color-background: var(--color-green-20);
-    --Notification-color-border: var(--color-green-30);
-    --Notification-color-icon: var(--color-green-50);
+    --Notification-color-background: var(--sds-clr-green-02);
+    --Notification-color-border: var(--sds-clr-gray-06);
+    --Notification-color-icon: var(--sds-clr-green-09);
+    --Notification-color-action: var(--sds-clr-green-11);
   }
 
   &--error {
-    --Notification-color-background: var(--color-red-20);
-    --Notification-color-border: var(--color-red-30);
-    --Notification-color-icon: var(--color-red-50);
+    --Notification-color-background: var(--sds-clr-red-02);
+    --Notification-color-border: var(--sds-clr-gray-06);
+    --Notification-color-icon: var(--sds-clr-red-09);
+    --Notification-color-action: var(--sds-clr-red-11);
   }
 
   &--warning {
-    --Notification-color-background: var(--color-yellow-20);
-    --Notification-color-border: var(--color-yellow-30);
-    --Notification-color-icon: var(--color-yellow-50);
+    --Notification-color-background: var(--sds-clr-amber-02);
+    --Notification-color-border: var(--sds-clr-gray-06);
+    --Notification-color-icon: var(--sds-clr-amber-09);
+    --Notification-color-action: var(--sds-clr-amber-11);
   }
 }