Notification: add chalk theme

packages/theme-chalk/src/common/var.scss

@@ -278,16 +278,20 @@ $--message-danger-color: $--color-danger;
 /* Notification
 -------------------------- */
 $--notification-width: 330px;
-$--notification-padding: 20px;
-$--notification-shadow: $--box-shadow-base;
-$--notification-icon-size: 40px;
+$--notification-padding: 14px 26px 14px 13px;
+$--notification-raduis: 8px;
+$--notification-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
+$--notification-border-color: $--border-color-lighter;
+$--notification-icon-size: 24px;
+$--notification-close-font-size: 12px;
+$--notification-group-margin: 13px;
 $--notification-font-size: $--font-size-base;
-$--notification-color: $--border-color-hover;
+$--notification-color: $--color-text-regular;
 $--notification-title-font-size: 16px;
 $--notification-title-color: $--color-text-primary;
 
-$--notification-close-color: $--color-text-placeholder;
-$--notification-close-hover-color: $--color-text-secondary;
+$--notification-close-color: $--color-text-secondary;
+$--notification-close-hover-color: $--color-text-regular;
 
 $--notification-success-color: $--color-success;
 $--notification-info-color: $--color-info;

packages/theme-chalk/src/notification.scss

@@ -2,10 +2,12 @@
 @import "common/var";
 
 @include b(notification) {
+  display: flex;
   width: $--notification-width;
   padding: $--notification-padding;
+  border-radius: $--notification-raduis;
   box-sizing: border-box;
-  border-radius: $--border-radius-small;
+  border: 1px solid $--notification-border-color;
   position: fixed;
   background-color: $--color-white;
   box-shadow: $--notification-shadow;
@@ -21,14 +23,11 @@
   }
 
   @include e(group) {
-    margin-left: 0;
-    @include when(with-icon) {
-      margin-left: 55px;
-    }
+    margin-left: $--notification-group-margin;
   }
 
   @include e(title) {
-    font-weight: normal;
+    font-weight: bold;
     font-size: $--notification-title-font-size;
     color: $--notification-title-color;
     margin: 0;
@@ -37,7 +36,7 @@
   @include e(content) {
     font-size: $--notification-font-size;
     line-height: 21px;
-    margin: 10px 0 0 0;
+    margin: 6px 0 0 0;
     color: $--notification-color;
     text-align: justify;
 
@@ -50,18 +49,16 @@
     height: $--notification-icon-size;
     width: $--notification-icon-size;
     font-size: $--notification-icon-size;
-    float: left;
-    position: relative;
-    top: 3px;
+    transform: translateY(4px);
   }
 
   @include e(closeBtn) {
     position: absolute;
-    top: 20px;
-    right: 20px;
+    top: 15px;
+    right: 15px;
     cursor: pointer;
     color: $--notification-close-color;
-    font-size: $--notification-font-size;
+    font-size: $--notification-close-font-size;
 
     &:hover {
       color: $--notification-close-hover-color;