refactor(input-number): use cssr

2025-03-01 13:36:55 +08:00 · 2020-07-07 23:14:56 +08:00 · 2020-07-07 23:14:56 +08:00 · 7978dda9a6
commit 7978dda9a6
parent ad9e953d50
21 changed files with 367 additions and 245 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -6,7 +6,7 @@

 ## 1.4.0 (2020-06-19)
 ### Breaking Changes
- `n-menu` not support slot API anymore.
+- `n-menu` doesn't support slot API anymore.
 ### Features
 - Add experimental setting primary color feature.

--- a/demo/documentation/components/inputNumber/enUS/index.md
+++ b/demo/documentation/components/inputNumber/enUS/index.md
@ -32,4 +32,4 @@ validator
 |Name|Parameters|Description|
 |-|-|-|
 |change|`(value: number)`||
-|blur|`(value: number \| null)`||
+|blur|`()`||
--- a/demo/documentation/components/inputNumber/zhCN/index.md
+++ b/demo/documentation/components/inputNumber/zhCN/index.md
@ -32,4 +32,4 @@ validator
 |名称|参数|说明|
 |-|-|-|
 |change|`(value: number)`||
-|blur|`(value: number \| null)`||
+|blur|`()`||
--- a/src/_styles/index.scss
+++ b/src/_styles/index.scss
@ -22,7 +22,6 @@
@import "./Pagination.scss";
@import './Alert.scss';
@import './DatePicker.scss';
-@import './InputNumber.scss';
@import './Radio.scss';
@import './Form.scss';
@import './TimePicker.scss';
--- a/src/index.js
+++ b/src/index.js
@ -90,6 +90,8 @@ import lightInputStyle from './styles/input/light'
 import darkInputStyle from './styles/input/dark'
 import lightInputGroupLabel from './styles/input-group-label/light'
 import darkInputGroupLabel from './styles/input-group-label/dark'
+import lightInputNumber from './styles/input-number/light'
+import darkInputNumber from './styles/input-number/dark'

 // Deprecated Components
 import NimbusFormCard from './_deprecated/NimbusFormCard'
@ -193,7 +195,8 @@ export default create({
      NBaseSelection: lightBaseSelectionStyle,
      NBaseSuffix: lightBaseSuffixStyle,
      NInput: lightInputStyle,
-      NInputGroupLabel: lightInputGroupLabel
+      NInputGroupLabel: lightInputGroupLabel,
+      NInputNumber: lightInputNumber
    },
    dark: {
      base: darkBaseStyle,
@ -203,7 +206,8 @@ export default create({
      NBaseSelection: darkBaseSelectionStyle,
      NBaseSuffix: darkBaseSuffixStyle,
      NInput: darkInputStyle,
-      NInputGroupLabel: darkInputGroupLabel
+      NInputGroupLabel: darkInputGroupLabel,
+      NInputNumber: darkInputNumber
    }
  }
 })
--- a/src/input-group/src/styles/base.js
+++ b/src/input-group/src/styles/base.js
@ -58,13 +58,12 @@ export default c([
                  border-top-right-radius: 0!important;
                  border-bottom-right-radius: 0!important;
                `
-              }, [
-                cB('input-number-button-boundary', {
-                  raw: `  
-                    background-color: transparent !important;
-                  `
-                })
-              ])
+              }),
+              cB('input-number-button-boundary', {
+                raw: `  
+                  background-color: transparent !important;
+                `
+              })
            ])
          ]),
          c('&:not(:first-child)', {
@ -148,20 +147,19 @@ export default c([
                    border-top-right-radius: 0!important;
                    border-bottom-right-radius: 0!important;
                  `
-                }, [
-                  cB('base-selection-tags', {
-                    raw: `
+                }),
+                cB('base-selection-tags', {
+                  raw: `
+                  border-top-right-radius: 0!important;
+                  border-bottom-right-radius: 0!important;
+                  `
+                }),
+                cB('base-selection-border-mask', {
+                  raw: `
                    border-top-right-radius: 0!important;
                    border-bottom-right-radius: 0!important;
-                    `
-                  }),
-                  cB('base-selection-border-mask', {
-                    raw: `
-                      border-top-right-radius: 0!important;
-                      border-bottom-right-radius: 0!important;
-                    `
-                  })
-                ])
+                  `
+                })
              ])
            ])
          ]),
--- a/src/input-number/index.js
+++ b/src/input-number/index.js
@ -1,8 +1,8 @@
 /* istanbul ignore file */
-import NInputNumber from './src/InputNumber.vue'
+import InputNumber from './src/InputNumber.vue'

-NInputNumber.install = function (Vue) {
-  Vue.component(NInputNumber.name, NInputNumber)
+InputNumber.install = function (Vue) {
+  Vue.component(InputNumber.name, InputNumber)
 }

-export default NInputNumber
+export default InputNumber
--- a/src/input-number/src/InputNumber.vue
+++ b/src/input-number/src/InputNumber.vue
@ -11,9 +11,9 @@
    <button
      tabindex="-1"
      type="button"
-      class="n-input-number__minus-button"
+      class="n-input-number__minus-button n-input-number__button"
      :class="{
-        [`n-input-number__minus-button--disabled`]: !minusable
+        [`n-input-number__button--disabled`]: !minusable
      }"
      @mousedown="handleMouseDown"
      @click="minus"
@ -21,7 +21,7 @@
      <div class="n-input-number-button-boundary" />
      <div class="n-input-number-button-body">
        <n-icon>
-          <md-remove />
+          <remove-icon />
        </n-icon>
      </div>
      <div class="n-input-number-button-border-mask" />
@ -29,16 +29,16 @@
    <button
      tabindex="-1"
      type="button"
-      class="n-input-number__add-button"
+      class="n-input-number__add-button n-input-number__button"
      :class="{
-        [`n-input-number__add-button--disabled`]: !addable
+        [`n-input-number__button--disabled`]: !addable
      }"
      @mousedown="handleMouseDown"
      @click="add"
    >
      <div class="n-input-number-button-body">
        <n-icon>
-          <md-add />
+          <add-icon />
        </n-icon>
      </div>
      <div class="n-input-number-button-boundary" />
@ -61,12 +61,13 @@

 <script>
 import NIcon from '../../Icon/index'
+import RemoveIcon from '../../_icons/remove-outline'
+import AddIcon from '../../_icons/add-outline'
 import themeable from '../../_mixins/themeable'
 import withapp from '../../_mixins/withapp'
 import asformitem from '../../_mixins/asformitem'
-import mdRemove from '../../_icons/md-remove'
-import mdAdd from '../../_icons/md-add'
-import { mountStyleAsFormItem } from './styles/InputNumber.cssr.js'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'

 const DEFAULT_STEP = 1

@ -87,10 +88,15 @@ export default {
  name: 'NInputNumber',
  components: {
    NIcon,
-    mdRemove,
-    mdAdd
+    RemoveIcon,
+    AddIcon
  },
-  mixins: [withapp, themeable, asformitem()],
+  mixins: [
+    withapp,
+    themeable,
+    asformitem(),
+    usecssr(styles)
+  ],
  model: {
    prop: 'value',
    event: 'change'
@ -183,11 +189,6 @@ export default {
      else return null
    }
  },
-  created () {
-    if (this.NFormItem) {
-      mountStyleAsFormItem()
-    }
-  },
  methods: {
    emitChangeEvent (value) {
      if (value !== this.value) {
@ -264,7 +265,7 @@ export default {
      const value = this.adjustValue(e.target.value)
      e.target.value = value
      this.emitChangeEvent(value)
-      this.$emit('blur', value)
+      this.$emit('blur')
    }
  }
 }
--- a/src/input-number/src/styles/InputNumber.cssr.js
+++ b/src/input-number/src/styles/InputNumber.cssr.js
@ -1,71 +0,0 @@
-import { createStyleAsFormItem, createThemedStyle, c, cTB, cB, cE } from '../../../_utils/cssr'
-import theme from './theme'
-
-function styleAsFormItem () {
-  return createStyleAsFormItem(
-    createThemedStyle(c([
-      ({ props, context }) => {
-        const pallete = context.pallete
-        const status = props.status
-        const subPallete = pallete[status]
-        return cTB('input-number', [
-          cE('border-mask', {
-            boxShadow: subPallete.borderMaskBoxShadow.default
-          }),
-          cE('input', {
-            caretColor: subPallete.caretColor
-          }, [
-            c('&:hover ~', [
-              cE('border-mask', {
-                boxShadow: subPallete.borderMaskBoxShadow.hover
-              })
-            ]),
-            c('&:focus', {
-              backgroundColor: subPallete.backgroundColor.focus
-            }, [
-              c('& ~', [
-                cE('border-mask', {
-                  boxShadow: subPallete.borderMaskBoxShadow.focus
-                })
-              ])
-            ])
-          ]),
-          cE('add-button, minus-button', [
-            c('&:hover', [
-              cB('icon', {
-                fill: subPallete.buttonTextColor.hover
-              })
-            ]),
-            c('&:active', [
-              cB('icon', {
-                fill: subPallete.buttonTextColor.active
-              })
-            ])
-          ])
-        ])
-      }
-    ]), theme)
-  )
-}
-
-let style = null
-
-export function mountStyleAsFormItem () {
-  if (style === null) {
-    style = styleAsFormItem()
-    style.mount({
-      target: 'input-number-error',
-      count: false,
-      props: {
-        status: 'error'
-      }
-    })
-    style.mount({
-      target: 'input-number-warning',
-      count: false,
-      props: {
-        status: 'warning'
-      }
-    })
-  }
-}
--- a/src/input-number/src/styles/index.js
+++ b/src/input-number/src/styles/index.js
@ -3,8 +3,8 @@ import sizeStyle from './themed-size.cssr.js'

 export default [
  {
-    key: 'syntheticSize',
-    watch: ['syntheticSize'],
+    key: 'syntheticTheme',
+    watch: ['syntheticTheme'],
    CNode: baseStyle
  },
  {
--- a/src/input-number/src/styles/theme.js
+++ b/src/input-number/src/styles/theme.js
@ -1,74 +0,0 @@
-import lightScheme from '../../../_styles-in-js/lightStyleScheme.scss'
-import darkScheme from '../../../_styles-in-js/darkStyleScheme.scss'
-import { changeColor } from '../../../_utils/color'
-
-const light = {
-  error: {
-    borderMaskBoxShadow: {
-      default: `inset 0 0 0 1px ${lightScheme.errorColor}`,
-      hover: `inset 0 0 0 1px ${lightScheme.errorHoverColor}`,
-      focus: `inset 0 0 0 1px ${lightScheme.errorHoverColor}, 0 0 0 2px ${changeColor(lightScheme.errorHoverColor, { alpha: 0.3 })}`
-    },
-    backgroundColor: {
-      focus: lightScheme.baseBackgroundColor
-    },
-    buttonTextColor: {
-      hover: lightScheme.errorHoverColor,
-      active: lightScheme.errorActiveColor
-    },
-    caretColor: lightScheme.errorColor
-  },
-  warning: {
-    borderMaskBoxShadow: {
-      default: `inset 0 0 0 1px ${lightScheme.warningColor}`,
-      hover: `inset 0 0 0 1px ${lightScheme.warningHoverColor}`,
-      focus: `inset 0 0 0 1px ${lightScheme.warningHoverColor}, 0 0 0 2px ${changeColor(lightScheme.warningHoverColor, { alpha: 0.3 })}`
-    },
-    backgroundColor: {
-      focus: lightScheme.baseBackgroundColor
-    },
-    buttonTextColor: {
-      hover: lightScheme.warningHoverColor,
-      active: lightScheme.warningActiveColor
-    },
-    caretColor: lightScheme.warningColor
-  }
-}
-
-const dark = {
-  error: {
-    borderMaskBoxShadow: {
-      default: `inset 0 0 0 1px ${darkScheme.errorColor}`,
-      hover: `inset 0 0 0 1px ${darkScheme.errorHoverColor}`,
-      focus: `inset 0 0 0 1px ${darkScheme.errorHoverColor}, 0 0 8px 0 ${changeColor(darkScheme.errorHoverColor, { alpha: 0.3 })}`
-    },
-    backgroundColor: {
-      focus: changeColor(darkScheme.errorColor, { alpha: 0.1 })
-    },
-    buttonTextColor: {
-      hover: darkScheme.errorHoverColor,
-      active: darkScheme.errorActiveColor
-    },
-    caretColor: darkScheme.errorColor
-  },
-  warning: {
-    borderMaskBoxShadow: {
-      default: `inset 0 0 0 1px ${darkScheme.warningColor}`,
-      hover: `inset 0 0 0 1px ${darkScheme.warningHoverColor}`,
-      focus: `inset 0 0 0 1px ${darkScheme.warningHoverColor}, 0 0 8px 0 ${changeColor(darkScheme.warningHoverColor, { alpha: 0.3 })}`
-    },
-    backgroundColor: {
-      focus: changeColor(darkScheme.warningColor, { alpha: 0.1 })
-    },
-    buttonTextColor: {
-      hover: darkScheme.warningHoverColor,
-      active: darkScheme.warningActiveColor
-    },
-    caretColor: darkScheme.warningColor
-  }
-}
-
-export default {
-  fallback: light,
-  dark
-}
--- a/src/input-number/src/styles/themed-base.cssr.js
+++ b/src/input-number/src/styles/themed-base.cssr.js
@ -1,4 +1,4 @@
-import { cTB2, c, cB, cE, cM } from '../../../_utils/cssr'
+import { cTB2, c, cB, cE, cM, insideFormItem } from '../../../_utils/cssr'

 export default c([
  ({ props }) => {
@ -6,7 +6,9 @@ export default c([
      easeInOutCubicBezier
    } = props.$base
    const {
-      borderRadius,
+      borderRadius
+    } = props.$local
+    const {
      disabledButtonBackgroundColor,
      disabledButtonTextColor,
      disabledPlaceholderColor,
@ -27,7 +29,7 @@ export default c([
      focusBorderMaskBoxShadow,
      hoverBorderMaskBoxShadow,
      placeholdeColor
-    } = props.$local
+    } = props.$local.default
    return cTB2('input-number', {
      raw: `
        position: relative;
@ -95,8 +97,10 @@ export default c([
          right: 0
        })
      ]),
-      cM('disabled', [
-        cE('minus-button, add-button', {
+      cM('disabled', {
+        cursor: 'not-allowed'
+      }, [
+        cE('button', {
          pointerEvents: 'none'
        }, [
          cB('input-number-button-body', {
@ -110,7 +114,7 @@ export default c([
            stroke: disabledButtonTextColor
          })
        ]),
-        cE('inupt', {
+        cE('input', {
          backgroundColor: disabledBackgroundColor,
          color: disabledTextColor,
          pointerEvents: 'none'
@ -126,7 +130,7 @@ export default c([
          textDecorationColor: textColor
        })
      ]),
-      cE('minus-button, add-button', {
+      cE('button', {
        raw: `
          background-color: transparent;
          overflow: hidden;
@ -149,7 +153,7 @@ export default c([
            right: 0;
          `,
          transition: `
-            box-shadow: .3s ${easeInOutCubicBezier}
+            box-shadow .3s ${easeInOutCubicBezier}
          `,
          boxShadow: `inset 0 0 0 1px ${borderColor}`
        }),
@ -251,17 +255,73 @@ export default c([
          transition: `color .3s ${easeInOutCubicBezier}`,
          color: placeholdeColor
        }),
-        c('&:hover ~', {
-          boxShadow: hoverBorderMaskBoxShadow
-        }),
+        c('&:hover ~', [
+          cE('border-mask', {
+            boxShadow: hoverBorderMaskBoxShadow
+          })
+        ]),
        c('&:focus', {
          backgroundColor: focusBackgroundColor
        }, [
-          cE('border-mask', {
-            boxShadow: focusBorderMaskBoxShadow
-          })
+          c('& ~', [
+            cE('border-mask', {
+              boxShadow: focusBorderMaskBoxShadow
+            })
+          ])
        ])
      ])
    ])
-  }
+  },
+  ({ props }) => ['warning', 'error'].map(status => {
+    const pallete = props.$local[status]
+    const {
+      borderMaskBoxShadow,
+      hoverBorderMaskBoxShadow,
+      focusBorderMaskBoxShadow,
+      focusBackgroundColor,
+      caretColor,
+      hoverButtonTextColor,
+      activeButtonTextColor
+    } = pallete
+    return insideFormItem(
+      status,
+      cTB2('input-number', [
+        cE('border-mask', {
+          boxShadow: borderMaskBoxShadow
+        }),
+        cE('input', {
+          caretColor: caretColor
+        }, [
+          c('&:hover ~', [
+            cE('border-mask', {
+              boxShadow: hoverBorderMaskBoxShadow
+            })
+          ]),
+          c('&:focus', {
+            backgroundColor: focusBackgroundColor
+          }, [
+            c('& ~', [
+              cE('border-mask', {
+                boxShadow: focusBorderMaskBoxShadow
+              })
+            ])
+          ])
+        ]),
+        cE('button', [
+          c('&:hover', [
+            cB('icon', {
+              fill: hoverButtonTextColor,
+              stroke: hoverButtonTextColor
+            })
+          ]),
+          c('&:active', [
+            cB('icon', {
+              fill: activeButtonTextColor,
+              stroke: activeButtonTextColor
+            })
+          ])
+        ])
+      ])
+    )
+  })
 ])
--- a/src/input-number/src/styles/themed-size.cssr.js
+++ b/src/input-number/src/styles/themed-size.cssr.js
@ -1,4 +1,4 @@
-import { cTB2, c, cE } from '../../../_utils/cssr'
+import { cTB2, c, cE, cM } from '../../../_utils/cssr'

 export default c([
  ({ props }) => {
@ -6,22 +6,24 @@ export default c([
    const local = props.$local
    const height = local.height[size]
    const fontSize = local.fontSize[size]
-    const width = local.width[size]
-    return cTB2('input-number', {
-      height,
-      lineHeight: height
-    }, [
-      cE('minub-button, add-button, input', {
+    const width = local.buttonWidth[size]
+    return cTB2('input-number', [
+      cM(size + '-size', {
        height,
        lineHeight: height
-      }),
-      cE('minus-button, add-button', {
-        width
-      }),
-      cE('input', {
-        fontSize,
-        padding: `0 ${width}`
-      })
+      }, [
+        cE('button, input', {
+          height,
+          lineHeight: height
+        }),
+        cE('button', {
+          width
+        }),
+        cE('input', {
+          fontSize,
+          padding: `0 ${width}`
+        })
+      ])
    ])
  }
 ])
--- a/src/input/src/styles/themed-base.cssr.js
+++ b/src/input/src/styles/themed-base.cssr.js
@ -17,6 +17,7 @@ export default c([
      focusBorderMaskColor,
      focusBorderMaskBoxShadow,
      iconColor,
+      iconOpacity,
      textColor,
      caretColor,
      disabledBoxShadow,
@ -24,7 +25,8 @@ export default c([
      disabledBackgroundColor,
      disabledTextColor,
      disabledPlaceholderColor,
-      disabledIconColor
+      disabledIconColor,
+      disabledIconOpacity
    } = props.$local.default
    const {
      easeInOutCubicBezier
@ -82,7 +84,11 @@ export default c([
          cB('icon', {
            fill: disabledIconColor,
            stroke: disabledIconColor
-          })
+          }, [
+            c('svg', {
+              opacity: disabledIconOpacity
+            })
+          ])
        ]),
        cE('splitor', {
          color: disabledTextColor
@ -151,7 +157,11 @@ export default c([
          fontSize: iconSize,
          fill: iconColor,
          stroke: iconColor
-        })
+        }, [
+          c('svg', {
+            opacity: iconOpacity
+          })
+        ])
      ]),
      cE('suffix', {
        justifyContent: 'flex-end',
--- a/src/styles/_common-style/input-number.js
+++ b/src/styles/_common-style/input-number.js
@ -0,0 +1,7 @@
+export default {
+  buttonWidth: {
+    small: '24px',
+    medium: '28px',
+    large: '28px'
+  }
+}
--- a/src/styles/base/dark.js
+++ b/src/styles/base/dark.js
@ -17,7 +17,7 @@ export default create({
      alpha2: '0.82',
      alpha3: '0.52',
      alpha4: '0.38',
-      alpha5: '0.2',
+      alpha5: '0.28',

      alphaDisabled: '0.6',
      alphaDisabledInput: '0.06',
@ -122,15 +122,25 @@ export default create({
      quinaryTextColor: neutral(base.alpha5),
      quinaryTextOverlayColor: overlay(base.alpha5),

+      disabledTextColor: neutral(base.alpha4),
+      disabledTextOverlayColor: overlay(base.alpha4),
+      placeholderColor: neutral(base.alpha4),
+      placeholderOverlayColor: overlay(base.alpha4),
+      disabledPlaceholderColor: neutral(base.alpha5),
+      disabledPlaceholderOverlayColor: overlay(base.alpha5),
+      iconColor: neutral(base.alpha4),
+      iconOverlayColor: overlay(base.alpha4),
+      disabledIconColor: neutral(base.alpha5),
+      disabledIconOverlayColor: neutral(base.alpha5),
+
      primaryOpacity: base.alpha1,
      secondaryOpacity: base.alpha2,
      tertiaryOpacity: base.alpha3,
+      quaternaryOpacity: base.alpha4,
+      quinaryOpacity: base.alpha5,
      pendingOpacity: base.alphaPending,
      disabledInputOpacity: base.alphaDisabledInput,

-      iconColor: neutral(base.alpha4),
-      iconOverlayColor: overlay(base.alpha4),
-
      dividerColor: neutral(base.alphaDivider),
      dividerOverlayColor: overlay(base.alphaDivider),
      borderColor: neutral(base.alphaBorder),
--- a/src/styles/base/light.js
+++ b/src/styles/base/light.js
@ -17,7 +17,7 @@ export default create({
      alpha2: '0.72',
      alpha3: '0.38',
      alpha4: '0.24', // disabled text, placeholder, icon
-      alpha5: '0.12', // disabled placeholder
+      alpha5: '0.18', // disabled placeholder

      alphaDisabled: '0.5',
      alphaDisabledInput: '0.02',
@ -122,15 +122,25 @@ export default create({
      quinaryTextColor: neutral(base.alpha5),
      quinaryTextOverlayColor: overlay(base.alpha5),

+      disabledTextColor: neutral(base.alpha4),
+      disabledTextOverlayColor: overlay(base.alpha4),
+      placeholderColor: neutral(base.alpha4),
+      placeholderOverlayColor: overlay(base.alpha4),
+      disabledPlaceholderColor: neutral(base.alpha5),
+      disabledPlaceholderOverlayColor: overlay(base.alpha5),
+      iconColor: neutral(base.alpha4),
+      iconOverlayColor: overlay(base.alpha4),
+      disabledIconColor: neutral(base.alpha5),
+      disabledIconOverlayColor: neutral(base.alpha5),
+
      primaryOpacity: base.alpha1,
      secondaryOpacity: base.alpha2,
      tertiaryOpacity: base.alpha3,
+      quaternaryOpacity: base.alpha4,
+      quinaryOpacity: base.alpha5,
      pendingOpacity: base.alphaPending,
      disabledInputOpacity: base.alphaDisabledInput,

-      iconColor: neutral(base.alpha4),
-      iconOverlayColor: overlay(base.alpha4),
-
      dividerColor: neutral(base.alphaDivider),
      dividerOverlayColor: overlay(base.alphaDivider),
      borderColor: neutral(base.alphaBorder),
--- a/src/styles/input-number/dark.js
+++ b/src/styles/input-number/dark.js
@ -1,6 +1,86 @@
 import create from '../_utils/create-component-base'
+import { changeColor } from '../../_utils/color'
+import inputCommonVariables from '../_common-style/input'
+import inputNumberCommonVariables from '../_common-style/input-number'

 export default create({
  getDerivedVariables ({ base, derived }) {
+    const {
+      borderRadius
+    } = base
+    const {
+      primaryColor,
+      primaryHoverColor,
+      primaryActiveColor,
+      errorColor,
+      errorHoverColor,
+      errorActiveColor,
+      warningColor,
+      warningHoverColor,
+      warningActiveColor,
+      secondaryTextColor: textColor,
+      inputBackgroundOverlayColor,
+      disabledInputBackgroundOverlayColor: disabledBackgroundColor,
+      disabledTextColor,
+      placeholdeColor,
+      disabledPlaceholderColor,
+      actionBackgroundOverlayColor
+    } = derived
+    const backgroundColor = inputBackgroundOverlayColor
+    const borderHoverColor = primaryHoverColor
+    const buttonTextColor = textColor
+    const disabledButtonBackgroundColor = disabledBackgroundColor
+    const disabledButtonTextColor = disabledTextColor
+    const buttonBackgroundColor = actionBackgroundOverlayColor
+    const hoverButtonBackgroundColor = buttonBackgroundColor
+    const activeButtonBackgroundColor = buttonBackgroundColor
+    const caretColor = null
+    const hoverButtonTextColor = primaryHoverColor
+    const activeButtonTextColor = primaryActiveColor
+    return {
+      ...inputCommonVariables,
+      ...inputNumberCommonVariables,
+      borderRadius,
+      default: {
+        disabledButtonBackgroundColor,
+        disabledButtonTextColor,
+        disabledPlaceholderColor,
+        disabledBackgroundColor,
+        disabledTextColor,
+        textColor,
+        borderColor: 'transparent',
+        borderHoverColor,
+        buttonBackgroundColor,
+        hoverButtonBackgroundColor,
+        activeButtonBackgroundColor,
+        buttonTextColor,
+        hoverButtonTextColor,
+        activeButtonTextColor,
+        caretColor,
+        backgroundColor,
+        focusBackgroundColor: changeColor(primaryColor, { alpha: 0.1 }),
+        focusBorderMaskBoxShadow: `inset 0 0 0 1px ${primaryHoverColor}, 0 0 8px 0 ${changeColor(primaryColor, { alpha: 0.3 })}`,
+        hoverBorderMaskBoxShadow: `inset 0 0 0 1px ${primaryHoverColor}`,
+        placeholdeColor
+      },
+      warning: {
+        borderMaskBoxShadow: `inset 0 0 0 1px ${warningColor}`,
+        focusBorderMaskBoxShadow: `inset 0 0 0 1px ${warningHoverColor}, 0 0 8px 0 ${changeColor(warningColor, { alpha: 0.2 })}`,
+        hoverBorderMaskBoxShadow: `inset 0 0 0 1px ${warningHoverColor}`,
+        focusBackgroundColor: changeColor(warningColor, { alpha: 0.1 }),
+        caretColor: warningHoverColor,
+        hoverButtonTextColor: warningHoverColor,
+        activeButtonTextColor: warningActiveColor
+      },
+      error: {
+        borderMaskBoxShadow: `inset 0 0 0 1px ${errorColor}`,
+        focusBorderMaskBoxShadow: `inset 0 0 0 1px ${errorHoverColor}, 0 0 8px 0 ${changeColor(errorColor, { alpha: 0.2 })}`,
+        hoverBorderMaskBoxShadow: `inset 0 0 0 1px ${errorHoverColor}`,
+        focusBackgroundColor: changeColor(errorColor, { alpha: 0.1 }),
+        caretColor: errorHoverColor,
+        hoverButtonTextColor: errorHoverColor,
+        activeButtonTextColor: errorActiveColor
+      }
+    }
  }
 })
--- a/src/styles/input-number/light.js
+++ b/src/styles/input-number/light.js
@ -1,6 +1,86 @@
 import create from '../_utils/create-component-base'
+import { changeColor } from '../../_utils/color'
+import inputCommonVariables from '../_common-style/input'
+import inputNumberCommonVariables from '../_common-style/input-number'

 export default create({
  getDerivedVariables ({ base, derived }) {
+    const {
+      borderRadius
+    } = base
+    const {
+      primaryColor,
+      primaryHoverColor,
+      primaryActiveColor,
+      errorColor,
+      errorHoverColor,
+      errorActiveColor,
+      warningColor,
+      warningHoverColor,
+      warningActiveColor,
+      borderColor,
+      secondaryTextColor: textColor,
+      actionBackgroundColor: buttonBackgroundColor,
+      disabledInputBackgroundColor: disabledBackgroundColor,
+      disabledTextColor,
+      placeholdeColor,
+      quinaryTextColor: disabledPlaceholderColor,
+      inputBackgroundColor: backgroundColor
+    } = derived
+    const borderHoverColor = primaryHoverColor
+    const buttonTextColor = textColor
+    const disabledButtonBackgroundColor = disabledBackgroundColor
+    const disabledButtonTextColor = disabledTextColor
+    const hoverButtonBackgroundColor = buttonBackgroundColor
+    const activeButtonBackgroundColor = buttonBackgroundColor
+    const caretColor = null
+    const hoverButtonTextColor = primaryHoverColor
+    const activeButtonTextColor = primaryActiveColor
+    const focusBackgroundColor = backgroundColor
+    return {
+      ...inputCommonVariables,
+      ...inputNumberCommonVariables,
+      borderRadius,
+      default: {
+        disabledButtonBackgroundColor,
+        disabledButtonTextColor,
+        disabledPlaceholderColor,
+        disabledBackgroundColor,
+        disabledTextColor,
+        textColor,
+        borderColor,
+        borderHoverColor,
+        buttonBackgroundColor,
+        hoverButtonBackgroundColor,
+        activeButtonBackgroundColor,
+        buttonTextColor,
+        hoverButtonTextColor,
+        activeButtonTextColor,
+        caretColor,
+        backgroundColor,
+        focusBackgroundColor,
+        focusBorderMaskBoxShadow: `inset 0 0 0 1px ${primaryHoverColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.2 })}`,
+        hoverBorderMaskBoxShadow: `inset 0 0 0 1px ${primaryHoverColor}`,
+        placeholdeColor
+      },
+      warning: {
+        borderMaskBoxShadow: `inset 0 0 0 1px ${warningColor}`,
+        focusBorderMaskBoxShadow: `inset 0 0 0 1px ${warningHoverColor}, 0 0 0 2px ${changeColor(warningColor, { alpha: 0.2 })}`,
+        hoverBorderMaskBoxShadow: `inset 0 0 0 1px ${warningHoverColor}`,
+        focusBackgroundColor,
+        caretColor: warningHoverColor,
+        hoverButtonTextColor: warningHoverColor,
+        activeButtonTextColor: warningActiveColor
+      },
+      error: {
+        borderMaskBoxShadow: `inset 0 0 0 1px ${errorColor}`,
+        focusBorderMaskBoxShadow: `inset 0 0 0 1px ${errorHoverColor}, 0 0 0 2px ${changeColor(errorColor, { alpha: 0.2 })}`,
+        hoverBorderMaskBoxShadow: `inset 0 0 0 1px ${errorHoverColor}`,
+        focusBackgroundColor,
+        caretColor: errorHoverColor,
+        hoverButtonTextColor: errorHoverColor,
+        activeButtonTextColor: errorActiveColor
+      }
+    }
  }
 })
--- a/src/styles/input/dark.js
+++ b/src/styles/input/dark.js
@ -7,8 +7,9 @@ export default create({
    const {
      secondaryTextOverlayColor,
      quaternaryTextOverlayColor,
-      quinaryTextColor,
-      quaternaryTextColor,
+      quinaryTextOverlayColor,
+      quinaryOpacity,
+      quaternaryOpacity,
      primaryColor,
      primaryHoverColor,
      inputBackgroundOverlayColor,
@ -16,7 +17,8 @@ export default create({
      warningColor,
      warningHoverColor,
      errorColor,
-      errorHoverColor
+      errorHoverColor,
+      baseTextColor
    } = derived
    const {
      borderRadius
@ -30,19 +32,21 @@ export default create({
        disabledTextColor: quaternaryTextOverlayColor,
        caretColor: primaryColor,
        placeholderColor: quaternaryTextOverlayColor,
-        disabledPlaceholderColor: quinaryTextColor,
+        disabledPlaceholderColor: quinaryTextOverlayColor,
        backgroundColor: inputBackgroundOverlayColor,
        disabledBackgroundColor: disabledInputBackgroundOverlayColor,
        focusBackgroundColor: changeColor(primaryColor, { alpha: 0.1 }),
-        iconColor: quaternaryTextColor,
-        disabledIconColor: quinaryTextColor,
+        iconColor: baseTextColor,
+        disabledIconColor: baseTextColor,
+        iconOpacity: quaternaryOpacity,
+        disabledIconOpacity: quinaryOpacity,
        borderMaskColor: 'transparent',
        hoverBorderMaskColor: primaryHoverColor,
        disabledBorderMaskColor: 'transparent !important',
        focusBorderMaskColor: primaryHoverColor,
-        focusBorderMaskBoxShadow: `0 0 8px 0 ${changeColor(primaryColor, { alpha: 0.4 })}`,
+        focusBorderMaskBoxShadow: `0 0 8px 0 ${changeColor(primaryColor, { alpha: 0.3 })}`,
        boxShadow: 'inset 0 0 0 1px transparent',
-        focusBoxShadow: `0 0 0 2px ${changeColor(primaryColor, { alpha: 0.4 })}`,
+        focusBoxShadow: `0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`,
        disabledBoxShadow: 'inset 0 0 0 1px transparent'
      },
      warning: {
@ -50,7 +54,7 @@ export default create({
        hoverBorderMaskColor: warningHoverColor,
        focusBackgroundColor: changeColor(warningColor, { alpha: 0.1 }),
        focusBorderMaskColor: warningHoverColor,
-        focusBorderMaskBoxShadow: `0 0 8px 0 ${changeColor(warningColor, { alpha: 0.4 })}`,
+        focusBorderMaskBoxShadow: `0 0 8px 0 ${changeColor(warningColor, { alpha: 0.3 })}`,
        caretColor: warningColor
      },
      error: {
@ -58,7 +62,7 @@ export default create({
        hoverBorderMaskColor: errorHoverColor,
        focusBackgroundColor: changeColor(errorColor, { alpha: 0.1 }),
        focusBorderMaskColor: errorHoverColor,
-        focusBorderMaskBoxShadow: `0 0 8px 0 ${changeColor(errorColor, { alpha: 0.4 })}`,
+        focusBorderMaskBoxShadow: `0 0 8px 0 ${changeColor(errorColor, { alpha: 0.3 })}`,
        caretColor: errorColor
      }
    }
--- a/src/styles/input/light.js
+++ b/src/styles/input/light.js
@ -35,7 +35,9 @@ export default create({
        disabledBackgroundColor: disabledInputBackgroundColor,
        focusBackgroundColor: inputBackgroundColor,
        iconColor: quaternaryTextColor,
+        iconOpacity: 1,
        disabledIconColor: quinaryTextColor,
+        disabledIconOpacity: 1,
        borderMaskColor: 'transparent',
        hoverBorderMaskColor: primaryHoverColor,
        disabledBorderMaskColor: 'transparent !important',