refactor(notification): use global box shadow

src/notification/src/styles/themed-base.cssr.js

@@ -45,6 +45,7 @@ export default c([
             cB('scrollbar-content', {
               raw: `
                 padding-top: 12px;
+                padding-bottom: 33px;
               `
             })
           ])
@@ -57,23 +58,26 @@ export default c([
   ]),
   ({ props }) => {
     const {
-      cubicBezierEaseOut,
-      cubicBezierEaseIn,
-      cubicBezierEaseInOut
-    } = props.$global
-    const {
-      color,
-      textColor,
-      closeColor,
-      closeColorHover,
-      closeColorPressed,
-      headerTextColor,
-      contentTextColor,
-      descriptionTextColor,
-      actionTextColor,
-      borderRadius,
-      headerFontWeight
-    } = props.$local
+      $local: {
+        color,
+        textColor,
+        closeColor,
+        closeColorHover,
+        closeColorPressed,
+        headerTextColor,
+        contentTextColor,
+        descriptionTextColor,
+        actionTextColor,
+        borderRadius,
+        headerFontWeight,
+        boxShadow
+      },
+      $global: {
+        cubicBezierEaseOut,
+        cubicBezierEaseIn,
+        cubicBezierEaseInOut
+      }
+    } = props
     return [
       cB('notification', [
         c('&-transition-enter-from, &-transition-leave-to', {
@@ -122,13 +126,13 @@ export default c([
           overflow: hidden;
           flex-shrink: 0;
           margin-bottom: 12px;
-          margin-left: 12px;
+          margin-left: 28px;
           margin-right: 16px;
           padding-left: 16px;
           padding-right: 16px;
           width: 365px;
           border-radius: ${borderRadius};
-          box-shadow:  0px 2px 12px 0px rgba(0, 0, 0, 0.18);
+          box-shadow: ${boxShadow};
           box-sizing: border-box;
           opacity: 1;
         `
@@ -199,7 +203,7 @@ export default c([
               display: flex;
               align-items: center;
               justify-content: space-between;
-              margin-top: 8px;
+              margin-top: 12px;
             `
           }, [
             cE('meta', {
@@ -235,7 +239,7 @@ export default c([
           }),
           cE('content', {
             raw: `
-              line-height: 1.75;
+              line-height: 1.5;
               margin: 12px 0 0 0;
               font-family: inherit;
               white-space: pre-wrap;

src/notification/styles/dark.js

@@ -21,7 +21,8 @@ export default create({
       textColor1Overlay,
       textColor3Overlay,
       borderRadius,
-      fontWeightStrong
+      fontWeightStrong,
+      boxShadow2
     } = vars
     return {
       borderRadius,
@@ -38,7 +39,8 @@ export default create({
       headerTextColor: textColor1Overlay,
       contentTextColor: textColor2Overlay,
       descriptionTextColor: textColor3Overlay,
-      actionTextColor: textColor2Overlay
+      actionTextColor: textColor2Overlay,
+      boxShadow: boxShadow2
     }
   }
 })

src/notification/styles/light.js

@@ -21,7 +21,8 @@ export default create({
       textColor1Overlay,
       textColor3Overlay,
       borderRadius,
-      fontWeightStrong
+      fontWeightStrong,
+      boxShadow2
     } = vars
     return {
       borderRadius,
@@ -38,7 +39,8 @@ export default create({
       headerTextColor: textColor1Overlay,
       contentTextColor: textColor2,
       descriptionTextColor: textColor3Overlay,
-      actionTextColor: textColor2
+      actionTextColor: textColor2,
+      boxShadow: boxShadow2
     }
   }
 })