fix(alert): style glitches

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

@@ -6,13 +6,11 @@ export default c([
     const { easeInOutCubicBezier } = props.$base
     const { borderRadius, titleFontWeight } = props.$local
     return cTB('alert', {
-      boxSizing: 'border-box',
       lineHeight: 1.75,
       borderRadius,
       position: 'relative',
       transition: `
         background-color .3s ${easeInOutCubicBezier},
-        border-color .3s ${easeInOutCubicBezier}
       `
     }, [
       fadeInHeightExpandTranstion({
@@ -31,8 +29,8 @@ export default c([
           top: 14px;
           align-items: center;
           justify-content: center;
-          width: 19px;
-          height: 19px;
+          width: 26px;
+          height: 26px;
         `
       }, [
         cB('icon', {
@@ -56,7 +54,8 @@ export default c([
         })
       ]),
       cB('alert-body', {
-        padding: '16px 16px 16px 48px'
+        padding: '15px 15px 15px 47px',
+        transition: `border-color .3s ${easeInOutCubicBezier}`
       }, [
         cE('title', {
           transition: `color .3s ${easeInOutCubicBezier}`,

src/alert/src/styles/themed-type.cssr.js

@@ -17,7 +17,6 @@ export default c([
     return cTB('alert', [
       cM(type + '-type', {
         backgroundColor,
-        border: `1px solid ${borderColor}`,
         textAlign: 'start'
       }, [
         cE('close', [
@@ -44,7 +43,9 @@ export default c([
             stroke: iconColor
           })
         ]),
-        cB('alert-body', [
+        cB('alert-body', {
+          border: `1px solid ${borderColor}`
+        }, [
           cE('title', {
             color: titleTextColor
           }),

src/styles/base/light.js

@@ -21,7 +21,7 @@ export default create({
       alpha4: '0.24', // disabled text, placeholder, icon
       alpha5: '0.18', // disabled placeholder
 
-      alphaClose: '0.6',
+      alphaClose: '0.52',
 
       alphaDisabled: '0.5',
       alphaDisabledInput: '0.02',