refactor(alert): padding, icon, close customization

src/alert/src/Alert.tsx

@@ -7,6 +7,7 @@ import {
   mergeProps,
   renderSlot
 } from 'vue'
+import { getMargin } from 'seemly'
 import {
   InfoIcon,
   SuccessIcon,
@@ -79,9 +80,15 @@ export default defineComponent({
         titleFontWeight,
         lineHeight,
         contentTextColor,
-        titleTextColor
+        titleTextColor,
+        iconSize,
+        iconMargin,
+        closeSize,
+        closeMargin,
+        padding
       } = self
       const { type } = props
+      const { left, right } = getMargin(iconMargin)
       return {
         '--bezier': cubicBezierEaseInOut,
         '--color': self[createKey('color', type)],
@@ -95,7 +102,14 @@ export default defineComponent({
         '--line-height': lineHeight,
         '--border-radius': borderRadius,
         '--font-size': fontSize,
-        '--title-font-weight': titleFontWeight
+        '--title-font-weight': titleFontWeight,
+        '--icon-size': iconSize,
+        '--icon-margin': iconMargin,
+        '--close-size': closeSize,
+        '--close-margin': closeMargin,
+        '--padding': padding,
+        '--icon-margin-left': left,
+        '--icon-margin-right': right
       }
     })
     const visibleRef = ref(true)
@@ -136,7 +150,7 @@ export default defineComponent({
                   class: [
                     'n-alert',
                     {
-                      'n-alert--no-icon': !this.showIcon
+                      'n-alert--show-icon': this.showIcon
                     }
                   ],
                   style: this.cssVars

src/alert/src/styles/index.cssr.ts

@@ -15,6 +15,13 @@ import fadeInHeightExpandTranstion from '../../../_styles/transitions/fade-in-he
 // --border-radius
 // --font-size
 // --title-font-weight
+// --icon-size
+// --icon-margin
+// --close-size
+// --close-margin
+// --padding
+// --icon-margin-left
+// --icon-margin-right
 export default cB('alert', `
   line-height: var(--line-height);
   border-radius: var(--border-radius);
@@ -27,7 +34,8 @@ export default cB('alert', `
     color: 'var(--icon-color)'
   }),
   cB('alert-body', {
-    border: 'var(--border)'
+    border: 'var(--border)',
+    padding: 'var(--padding)'
   }, [
     cE('title', {
       color: 'var(--title-text-color)'
@@ -48,24 +56,31 @@ export default cB('alert', `
   }),
   cE('icon', `
     position: absolute;
-    left: 12px;
-    top: 14px;
+    left: 0;
+    top: 0;
     align-items: center;
     justify-content: center;
-    width: 26px;
-    height: 26px;
-    font-size: 26px;
+    display: flex;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    font-size: var(--icon-size);
+    margin: var(--icon-margin);
   `),
   cE('close', `
     transition: color .3s var(--bezier);
     position: absolute;
-    right: 16px;
-    font-size: 14px;
-    top: 14px;
+    right: 0;
+    top: 0;
+    margin: var(--close-margin);
+    font-size: var(--close-size);
   `),
+  cM('show-icon', [
+    cB('alert-body', {
+      paddingLeft: 'calc(var(--icon-margin-left) + var(--icon-size) + var(--icon-margin-right))'
+    })
+  ]),
   cB('alert-body', `
     border-radius: var(--border-radius);
-    padding: 15px 15px 15px 47px;
     transition: border-color .3s var(--bezier);
   `, [
     cE('title', `
@@ -87,10 +102,5 @@ export default cB('alert', `
   ]),
   cE('icon', {
     transition: 'color .3s var(--bezier)'
-  }),
-  cM('no-icon', [
-    cB('alert-body', {
-      paddingLeft: '19px'
-    })
-  ])
+  })
 ])

src/alert/styles/_common.ts

@@ -0,0 +1,7 @@
+export default {
+  iconMargin: '12px 8px 0 12px',
+  iconSize: '26px',
+  closeSize: '16px',
+  closeMargin: '14px 16px 0 0',
+  padding: '15px'
+}

src/alert/styles/dark.ts

@@ -1,6 +1,7 @@
 import { changeColor } from 'seemly'
 import { commonDark } from '../../_styles/common'
 import type { AlertTheme } from './light'
+import commonVars from './_common'
 
 const alertDark: AlertTheme = {
   name: 'Alert',
@@ -24,6 +25,7 @@ const alertDark: AlertTheme = {
       fontSize
     } = vars
     return {
+      ...commonVars,
       fontSize,
       lineHeight,
       titleFontWeight: fontWeightStrong,

src/alert/styles/light.ts

@@ -2,6 +2,7 @@ import { changeColor, composite } from 'seemly'
 import { commonLight } from '../../_styles/common'
 import type { ThemeCommonVars } from '../../_styles/common'
 import type { Theme } from '../../_mixins/use-theme'
+import commonVars from './_common'
 
 const self = (vars: ThemeCommonVars) => {
   const {
@@ -23,6 +24,7 @@ const self = (vars: ThemeCommonVars) => {
     fontSize
   } = vars
   return {
+    ...commonVars,
     fontSize,
     lineHeight,
     titleFontWeight: fontWeightStrong,