refactor(message): clean cssr codes

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

@@ -1,55 +1,38 @@
-import { cTB, c, cB, cE, cM } from '../../../_utils/cssr'
+import { cTB, c, cB, cE, cM, createKey } from '../../../_utils/cssr'
 import iconSwitchTransition from '../../../styles/_transitions/icon-switch'
 
-function messageTypeMixin (type, textColor, color, boxShadow, iconColor, loadingCloseColor) {
+function typeStyle (
+  type,
+  pallete
+) {
+  console.log(pallete, type, createKey('textColor', type))
   return cM(`${type}-type`, {
     raw: `
-      color: ${textColor[type]};
-      background-color: ${color[type]};
-      box-shadow: ${boxShadow[type]};
+      color: ${pallete[createKey('textColor', type)]};
+      background-color: ${pallete[createKey('color', type)]};
+      box-shadow: ${pallete[createKey('boxShadow', type)]};
     `
   }, [
     cE('icon', [
       cB('icon', {
         raw: `
-          fill: ${iconColor};
-          stroke: ${iconColor};
+          fill: ${pallete[createKey('iconColor', type)]};
+          stroke: ${pallete[createKey('iconColor', type)]};
         `
       })
-    ]),
-    type === 'loading' && cE('close', [
-      cB('icon', {
-        raw: `
-          cursor: pointer;
-          fill: ${loadingCloseColor.default};
-          stroke: ${loadingCloseColor.default};
-        `
-      }, [
-        c('&:hover', {
-          raw: `
-            fill: ${loadingCloseColor.hover};
-            stroke: ${loadingCloseColor.hover};
-          `
-        }),
-        c('&:active', {
-          raw: `
-            fill: ${loadingCloseColor.active};
-            stroke: ${loadingCloseColor.active};
-          `
-        })
-      ])
     ])
   ])
 }
+
 export default c([
   ({ props }) => {
     const {
-      textColor,
-      iconColor,
       closeColor,
-      loadingCloseColor,
-      color,
-      boxShadow
+      closeColorHover,
+      closeColorActive,
+      closeColorLoading,
+      closeColorLoadingHover,
+      closeColorLoadingActive
     } = props.$local
     const {
       easeInOutCubicBezier
@@ -76,15 +59,6 @@ export default c([
         overflow: hidden;
       `
     }, [
-      c('&&-transition-enter, &&-transition-leave-to', {
-        raw: `
-          opacity: 0;
-          transform: translateY(-12px) scale(.5);
-          transform-origin: top center;
-          max-height: 0;
-          margin-bottom: 0;
-        `
-      }),
       cE('content', {
         raw: `
           display: inline-block;
@@ -127,20 +101,42 @@ export default c([
         cB('icon', {
           raw: `
             cursor: pointer;
-            fill: ${closeColor.default};
-            stroke: ${closeColor.default};
+            fill: ${closeColor};
+            stroke: ${closeColor};
           `
         }, [
           c('&:hover', {
             raw: `
-              fill: ${closeColor.hover};
-              stroke: ${closeColor.hover};
+              fill: ${closeColorHover};
+              stroke: ${closeColorHover};
             `
           }),
           c('&:active', {
             raw: `
-              fill: ${closeColor.active};
-              stroke: ${closeColor.active};
+              fill: ${closeColorActive};
+              stroke: ${closeColorActive};
+            `
+          })
+        ])
+      ]),
+      cM('loading-type', [
+        cB('icon', {
+          raw: `
+            cursor: pointer;
+            fill: ${closeColorLoading};
+            stroke: ${closeColorLoading};
+          `
+        }, [
+          c('&:hover', {
+            raw: `
+              fill: ${closeColorLoadingHover};
+              stroke: ${closeColorLoadingHover};
+            `
+          }),
+          c('&:active', {
+            raw: `
+              fill: ${closeColorLoadingActive};
+              stroke: ${closeColorLoadingActive};
             `
           })
         ])
@@ -150,7 +146,8 @@ export default c([
           padding-right: 24px;
         `
       }),
-      ...['info', 'success', 'error', 'warning', 'loading'].map(type => messageTypeMixin(type, textColor, color, boxShadow, iconColor, loadingCloseColor))
+      ['info', 'success', 'error', 'warning', 'loading']
+        .map(type => typeStyle(type, props.$local))
     ])
   },
   cB('message-container', {
@@ -166,5 +163,17 @@ export default c([
       flex-direction: column;
       align-items: center;
     `
+  }),
+  // TODO: refactor transition style
+  cB('message', [
+    c('&&-transition-enter, &&-transition-leave-to', {
+      raw: `
+        opacity: 0;
+        transform: translateY(-12px) scale(.5);
+        transform-origin: top center;
+        max-height: 0;
+        margin-bottom: 0;
+      `
     })
+  ])
 ])

src/message/styles/dark.js

@@ -18,38 +18,32 @@ export default create({
       popmenuBoxShadow
     } = base
     return {
-      textColor: {
-        info: baseTextColor,
-        success: baseTextColor,
-        error: baseTextColor,
-        warning: baseTextColor,
-        loading: secondaryTextOverlayColor
-      },
-      iconColor: 'rgba(255, 255, 255, .5)',
-      closeColor: {
-        default: 'rgba(255, 255, 255, .5)',
-        hover: 'rgba(255, 255, 255, .6)',
-        active: 'rgba(255, 255, 255, .4)'
-      },
-      loadingCloseColor: {
-        default: 'rgba(255, 255, 255, .5)',
-        hover: 'rgba(255, 255, 255, .6)',
-        active: 'rgba(255, 255, 255, .4)'
-      },
-      color: {
-        info: infoHsColor,
-        success: successHsColor,
-        error: errorHsColor,
-        warning: warningHsColor,
-        loading: popoverBackgroundColor
-      },
-      boxShadow: {
-        info: `0 2px 12px 0 ${changeColor(infoHsColor, { alpha: '0.4' })}`,
-        success: `0 2px 12px 0 ${changeColor(successHsColor, { alpha: '0.4' })}`,
-        error: `0 2px 12px 0 ${changeColor(errorHsColor, { alpha: '0.4' })}`,
-        warning: `0 2px 12px 0 ${changeColor(warningHsColor, { alpha: '0.4' })}`,
-        loading: popmenuBoxShadow
-      }
+      textColorInfo: baseTextColor,
+      textColorSuccess: baseTextColor,
+      textColorError: baseTextColor,
+      textColorWarning: baseTextColor,
+      textColorLoading: secondaryTextOverlayColor,
+      colorInfo: infoHsColor,
+      colorSuccess: successHsColor,
+      colorError: errorHsColor,
+      colorWarning: warningHsColor,
+      colorLoading: popoverBackgroundColor,
+      boxShadowInfo: `0 2px 12px 0 ${changeColor(infoHsColor, { alpha: '0.4' })}`,
+      boxShadowSuccess: `0 2px 12px 0 ${changeColor(successHsColor, { alpha: '0.4' })}`,
+      boxShadowError: `0 2px 12px 0 ${changeColor(errorHsColor, { alpha: '0.4' })}`,
+      boxShadowWarning: `0 2px 12px 0 ${changeColor(warningHsColor, { alpha: '0.4' })}`,
+      boxShadowLoading: popmenuBoxShadow,
+      iconColorInfo: 'rgba(255, 255, 255, .5)',
+      iconColorSuccess: 'rgba(255, 255, 255, .5)',
+      iconColorWarning: 'rgba(255, 255, 255, .5)',
+      iconColorError: 'rgba(255, 255, 255, .5)',
+      iconColorLoading: 'rgba(255, 255, 255, .5)',
+      closeColor: 'rgba(255, 255, 255, .5)',
+      closeColorHover: 'rgba(255, 255, 255, .6)',
+      closeColorActive: 'rgba(255, 255, 255, .4)',
+      closeColorLoading: 'rgba(255, 255, 255, .5)',
+      closeColorLoadingHover: 'rgba(255, 255, 255, .6)',
+      closeColorLoadingActive: 'rgba(255, 255, 255, .4)'
     }
   }
 })

src/message/styles/light.js

@@ -20,38 +20,32 @@ export default create({
     } = base
     const coloredBoxShadow = '0px 2px 18px 0px rgba(0, 0, 0, 0.27)'
     return {
-      textColor: {
-        info: baseBackgroundColor,
-        success: baseBackgroundColor,
-        error: baseBackgroundColor,
-        warning: baseBackgroundColor,
-        loading: secondaryTextColor
-      },
-      iconColor: 'rgba(255, 255, 255, .45)',
-      closeColor: {
-        default: 'rgba(255, 255, 255, .5)',
-        hover: 'rgba(255, 255, 255, .6)',
-        active: 'rgba(255, 255, 255, .4)'
-      },
-      loadingCloseColor: {
-        default: closeColor,
-        hover: closeHoverColor,
-        active: closeColor
-      },
-      color: {
-        info: infoColor,
-        success: successColor,
-        error: errorColor,
-        warning: warningColor,
-        loading: popoverBackgroundColor
-      },
-      boxShadow: {
-        info: coloredBoxShadow,
-        success: coloredBoxShadow,
-        error: coloredBoxShadow,
-        warning: coloredBoxShadow,
-        loading: popmenuBoxShadow
-      }
+      textColorInfo: baseBackgroundColor,
+      textColorSuccess: baseBackgroundColor,
+      textColorError: baseBackgroundColor,
+      textColorWarning: baseBackgroundColor,
+      textColorLoading: secondaryTextColor,
+      colorInfo: infoColor,
+      colorSuccess: successColor,
+      colorError: errorColor,
+      colorWarning: warningColor,
+      colorLoading: popoverBackgroundColor,
+      boxShadowInfo: coloredBoxShadow,
+      boxShadowSuccess: coloredBoxShadow,
+      boxShadowError: coloredBoxShadow,
+      boxShadowWarning: coloredBoxShadow,
+      boxShadowLoading: popmenuBoxShadow,
+      iconColorInfo: 'rgba(255, 255, 255, .45)',
+      iconColorSuccess: 'rgba(255, 255, 255, .45)',
+      iconColorWarning: 'rgba(255, 255, 255, .45)',
+      iconColorError: 'rgba(255, 255, 255, .45)',
+      iconColorLoading: 'rgba(255, 255, 255, .45)',
+      closeColor: 'rgba(255, 255, 255, .5)',
+      closeColorHover: 'rgba(255, 255, 255, .6)',
+      closeColorActive: 'rgba(255, 255, 255, .4)',
+      closeColorLoading: closeColor,
+      closeColorLoadingHover: closeHoverColor,
+      closeColorLoadingActive: closeColor
     }
   }
 })