fix(back-top, breadcrumb, form, input, message): fix style problems derived from style migration

src/back-top/src/styles/themed-base.cssr.js

@@ -1,5 +1,5 @@
 import { c, cB, cTB, cM } from '../../../_utils/cssr'
-import fadeInScaleIpTransition from '../../../styles/_transitions/fade-in-scale-up'
+import fadeInScaleIpTransition from '../../../_styles/transitions/fade-in-scale-up'
 
 export default c([
   ({ props }) => {
@@ -47,7 +47,8 @@ export default c([
       cB('icon', {
         raw: `
           font-size: ${iconSize};
-          fill: ${iconColor}
+          color: ${iconColor};
+          transition: color .3s ${cubicBezierEaseInOut};
         `
       }),
       c('svg', {
@@ -61,8 +62,7 @@ export default c([
         `
       }, [
         cB('icon', {
-          fill: iconColorHover,
-          stroke: iconColorHover
+          color: iconColorHover
         })
       ]),
       c('&:active', {
@@ -71,8 +71,7 @@ export default c([
         `
       }, [
         cB('icon', {
-          fill: iconColorPressed,
-          stroke: iconColorPressed
+          color: iconColorPressed
         })
       ])
     ])

src/back-top/styles/dark.js

@@ -7,14 +7,14 @@ export default create({
   getDerivedVariables ({ base, derived }) {
     const {
       popoverColor,
-      textColorSecondaryOverlay,
+      textColor2Overlay,
       primaryColorHover,
       primaryColorPressed
     } = derived
     return {
       ...commonVariables,
       color: popoverColor,
-      iconColor: textColorSecondaryOverlay,
+      iconColor: textColor2Overlay,
       iconColorHover: primaryColorHover,
       iconColorPressed: primaryColorPressed,
       boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)',

src/back-top/styles/light.js

@@ -7,14 +7,14 @@ export default create({
   getDerivedVariables ({ base, derived }) {
     const {
       popoverColor,
-      textColorSecondary,
+      textColor2,
       primaryColorHover,
       primaryColorPressed
     } = derived
     return {
       ...commonVariables,
       color: popoverColor,
-      iconColor: textColorSecondary,
+      iconColor: textColor2,
       iconColorHover: primaryColorHover,
       iconColorPressed: primaryColorPressed,
       boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)',

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

@@ -19,27 +19,23 @@ export default c([
       }, [
         cB('breadcrumb-item', {
           fontSize: fontSize,
-          transition: `
-            color .3s ${cubicBezierEaseInOut}
-          `
+          transition: `color .3s ${cubicBezierEaseInOut}`
         }, [
           cB('icon', {
             raw: `
-              font-size: 16px;
+              font-size: 18px;
               vertical-align: -.2em;
               transition: color .3s ${cubicBezierEaseInOut};
             `,
             color: itemTextColor
           }),
           cE('link', {
-            raw: `
-              cursor: pointer;
-            `,
+            cursor: 'pointer',
             transition: `color .3s ${cubicBezierEaseInOut}`,
             color: itemTextColor
           }),
           cE('separator', {
-            margin: '0 4px',
+            margin: '0 6px',
             color: separatorColor,
             transition: `color .3s ${cubicBezierEaseInOut}`
           }),

src/form/src/styles/themed-size.cssr.js

@@ -21,6 +21,9 @@ export default c([
             height: labelHeight
           })
         ]),
+        cB('form-item-blank', {
+          minHeight: pxfy(depx(blankHeight) + 6)
+        }),
         cM('left-labelled', [
           cB('form-item-label', {
             fontSize: labelFontSizeLeft,

src/form/styles/_common.js

@@ -8,12 +8,12 @@ export default {
   feedbackFontSizeSmall: '13px',
   feedbackFontSizeMedium: '13px',
   feedbackFontSizeLarge: '14px',
-  labelFontSizeSmallLeft: '14px',
-  labelFontSizeMediumLeft: '14px',
-  labelFontSizeLargeLeft: '15px',
-  labelFontSizeSmallTop: '13px',
-  labelFontSizeMediumTop: '13px',
-  labelFontSizeLargeTop: '14px',
+  labelFontSizeLeftSmall: '14px',
+  labelFontSizeLeftMedium: '14px',
+  labelFontSizeLeftLarge: '15px',
+  labelFontSizeTopSmall: '13px',
+  labelFontSizeTopMedium: '13px',
+  labelFontSizeTopLarge: '14px',
   labelHeightSmall: '18px',
   labelHeightMedium: '18px',
   labelHeightLarge: '20px',

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

@@ -258,7 +258,7 @@ export default c([
       const pallete = props.$local
       return insideFormItem(
         status,
-        cB('input', [
+        cTB('input', [
           cM('stateful', [
             cE('border-mask', {
               border: pallete[createKey('border', status)]

src/message/src/Message.js

@@ -50,7 +50,7 @@ export default {
       h('div', {
         class: 'n-message__icon'
       }, [
-        h(NIcon, {
+        h(NIcon, null, {
           default: () => [
             h(NIconSwitchTransition, null, {
               default: () => [

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

@@ -115,7 +115,11 @@ export default c([
           font-size: ${closeSize};
           margin: ${closeMargin};
         `
-      }),
+      }, [
+        cB('icon', {
+          transition: `color .3s ${cubicBezierEaseInOut}`
+        })
+      ]),
       cM('closable', {
         padding: paddingClosable
       }),

src/message/styles/_common.js

@@ -6,6 +6,6 @@ export default {
   minWidth: '420px',
   iconMargin: '10px',
   closeMargin: '0 0 0 12px',
-  closeSize: '24px',
-  iconSize: '19px'
+  closeSize: '16px',
+  iconSize: '20px'
 }

src/styles.js

@@ -40,6 +40,10 @@ export {
   inputDark,
   inputLight
 } from './input/styles'
+export {
+  selectDark,
+  selectLight
+} from './select/styles'
 export {
   checkboxDark,
   checkboxLight
@@ -248,10 +252,6 @@ export {
   anchorDark,
   anchorLight
 } from './anchor/styles'
-export {
-  selectDark,
-  selectLight
-} from './select/styles'
 export {
   statisticDark,
   statisticLight