wip(input): fix clear button style

src/_base/clear-button/src/ClearButton.vue

@@ -4,7 +4,7 @@
       <n-icon
         v-if="show"
         key="dismiss"
-        :depth="null"
+        :configurable="false"
         class="n-base-clear-button__clear"
         @click="onClear"
         @mousedown.prevent
@@ -20,10 +20,10 @@
 
 <script>
 import { computed, defineComponent } from 'vue'
-import { DismissCircleIcon } from '../../icons'
 import { NIcon } from '../../../icon'
 import { NIconSwitchTransition } from '../../../_base'
 import { useTheme } from '../../../_mixins'
+import { DismissCircleIcon } from '../../icons'
 import { baseClearButtonLight } from '../styles'
 import style from './styles/index.cssr.js'
 

src/_base/clear-button/src/styles/index.cssr.js

@@ -2,11 +2,11 @@ import { cB, c, cE } from '../../../../_utils/cssr'
 import createIconSwitchTransition from '../../../../_styles/transitions/icon-switch'
 
 // vars:
-// --cb-bezier
-// --cb-color
-// --cb-size
-// --cb-color-hover
-// --cb-color-pressed
+// --bezier
+// --color
+// --size
+// --color-hover
+// --color-pressed
 export default cB('base-clear-button', {
   flexShrink: 0,
   height: '1em',
@@ -15,16 +15,16 @@ export default cB('base-clear-button', {
 }, [
   c('>', [
     cE('clear', {
-      fontSize: 'var(--cb-size)!important',
+      fontSize: 'var(--size)',
       cursor: 'pointer',
-      color: 'var(--cb-color)!important',
-      transition: 'color .3s var(--cb-bezier)!important'
+      color: 'var(--color)',
+      transition: 'color .3s var(--bezier)'
     }, [
       c('&:hover', {
-        color: 'var(--cb-color-hover)!important'
+        color: 'var(--color-hover)!important'
       }),
       c('&:active', {
-        color: 'var(--cb-color-pressed)!important'
+        color: 'var(--color-pressed)!important'
       })
     ]),
     cE('placeholder', {

src/icon/src/Icon.js

@@ -28,14 +28,19 @@ export default defineComponent({
     colorTransition: {
       type: Boolean,
       default: false
+    },
+    // private
+    configurable: {
+      type: Boolean,
+      default: true
     }
   },
   setup (props) {
     const NIconConfigProvider = inject('NIconConfigProvider', null)
     const mergedDepthRef = computed(() => {
-      const { depth } = props
+      const { depth, configurable } = props
       if (depth !== undefined) return depth
-      return NIconConfigProvider?.depth
+      return configurable ? NIconConfigProvider?.depth : undefined
     })
     const themeRef = useTheme('Icon', 'Icon', style, iconLight, props)
     return {
@@ -53,7 +58,7 @@ export default defineComponent({
           common: { cubicBezierEaseInOut },
           self
         } = themeRef.value
-        if (depth !== undefined && depth !== null) {
+        if (depth !== undefined) {
           const { color, [`opacity${depth}Depth`]: opacity } = self
           return {
             '--bezier': cubicBezierEaseInOut,
@@ -62,9 +67,7 @@ export default defineComponent({
           }
         }
         return {
-          '--bezier': cubicBezierEaseInOut,
-          '--color': '"unset"',
-          '--opacity': '"unset"'
+          '--bezier': cubicBezierEaseInOut
         }
       })
     }
@@ -80,9 +83,8 @@ export default defineComponent({
         class: [
           'n-icon',
           {
-            [`n-icon--${mergedDepth}-depth`]: mergedDepth,
-            'n-icon--color-transition':
-              colorTransition || mergedDepth !== undefined
+            'n-icon--depth': mergedDepth,
+            'n-icon--color-transition': colorTransition || mergedDepth
           }
         ],
         style: Object.assign(this.cssVars, this.mergedStyle)

src/icon/src/styles/index.cssr.js

@@ -12,16 +12,21 @@ export default cB('icon', `
   display: inline-block;
   position: relative;
   fill: currentColor;
-  color: var(--color);
 `,
 [
   cM('color-transition', {
     transition: 'color .3s var(--bezier)'
   }),
+  cM('depth', {
+    color: 'var(--color)'
+  }, [
+    c('svg', {
+      opacity: 'var(--opacity)',
+      transition: 'opacity .3s var(--bezier)'
+    })
+  ]),
   c('svg', {
     height: '1em',
-    width: '1em',
-    opacity: 'var(--opacity)',
-    transition: 'opacity .3s var(--bezier)'
+    width: '1em'
   })
 ])

src/input/src/Input.vue

@@ -748,28 +748,28 @@ export default defineComponent({
           }
         } = themeRef.value
         return {
-          '--ip-bezier': cubicBezierEaseInOut,
-          '--ip-color': color,
-          '--ip-font-size': fontSize,
-          '--ip-border-radius': borderRadius,
-          '--ip-height': height,
-          '--ip-padding-left': paddingLeft,
-          '--ip-padding-right': paddingRight,
-          '--ip-text-color': textColor,
-          '--ip-caret-color': caretColor,
-          '--ip-text-decoration-color': textDecorationColor,
-          '--ip-border': border,
-          '--ip-border-disabled': borderDisabled,
-          '--ip-border-hover': borderHover,
-          '--ip-border-focus': borderFocus,
-          '--ip-placeholder-color': placeholderColor,
-          '--ip-placeholder-color-disabled': placeholderColorDisabled,
-          '--ip-icon-size': iconSize,
-          '--ip-line-height-textarea': lineHeightTextarea,
-          '--ip-color-disabled': colorDisabled,
-          '--ip-color-focus': colorFocus,
-          '--ip-text-color-disabled': textColorDisabled,
-          '--ip-box-shadow-focus': boxShadowFocus
+          '--bezier': cubicBezierEaseInOut,
+          '--color': color,
+          '--font-size': fontSize,
+          '--border-radius': borderRadius,
+          '--height': height,
+          '--padding-left': paddingLeft,
+          '--padding-right': paddingRight,
+          '--text-color': textColor,
+          '--caret-color': caretColor,
+          '--text-decoration-color': textDecorationColor,
+          '--border': border,
+          '--border-disabled': borderDisabled,
+          '--border-hover': borderHover,
+          '--border-focus': borderFocus,
+          '--placeholder-color': placeholderColor,
+          '--placeholder-color-disabled': placeholderColorDisabled,
+          '--icon-size': iconSize,
+          '--line-height-textarea': lineHeightTextarea,
+          '--color-disabled': colorDisabled,
+          '--color-focus': colorFocus,
+          '--text-color-disabled': textColorDisabled,
+          '--box-shadow-focus': boxShadowFocus
         }
       })
     }

src/input/src/InputGroupLabel.vue

@@ -47,13 +47,13 @@ export default defineComponent({
           }
         } = themeRef.value
         return {
-          '--ip-bezier': cubicBezierEaseInOut,
-          '--ip-group-label-color': groupLabelColor,
-          '--ip-border-radius': borderRadius,
-          '--ip-text-color': textColor,
-          '--ip-font-size': fontSize,
-          '--ip-line-height': lineHeight,
-          '--ip-height': height
+          '--bezier': cubicBezierEaseInOut,
+          '--group-label-color': groupLabelColor,
+          '--border-radius': borderRadius,
+          '--text-color': textColor,
+          '--font-size': fontSize,
+          '--line-height': lineHeight,
+          '--height': height
         }
       })
     }

src/input/src/styles/input-group-label.cssr.js

@@ -1,28 +1,28 @@
 import { cB, cE } from '../../../_utils/cssr'
 
 // vars:
-// --ip-bezier
-// --ip-group-label-color
-// --ip-border-radius
-// --ip-text-color
-// --ip-font-size
-// --ip-height
+// --bezier
+// --group-label-color
+// --border-radius
+// --text-color
+// --font-size
+// --height
 export default cB('input-group-label', `
   position: relative;
   user-select: none;
   box-sizing: border-box;
   padding: 0 12px;
   display: inline-block;
-  border-radius: var(--ip-border-radius);
-  background-color: var(--ip-group-label-color);
-  color: var(--ip-text-color);
-  font-size: var(--ip-font-size);
-  line-height: var(--ip-height);
-  height: var(--ip-height);
+  border-radius: var(--border-radius);
+  background-color: var(--group-label-color);
+  color: var(--text-color);
+  font-size: var(--font-size);
+  line-height: var(--height);
+  height: var(--height);
   transition: 
-    color .3s var(--ip-bezier),
-    background-color .3s var(--ip-bezier),
-    box-shadow .3s var(--ip-bezier);
+    color .3s var(--bezier),
+    background-color .3s var(--bezier),
+    box-shadow .3s var(--bezier);
 `, [
   cE('border', `
     position: absolute;
@@ -31,7 +31,7 @@ export default cB('input-group-label', `
     top: 0;
     bottom: 0;
     border-radius: inherit;
-    border: var(--ip-border);
-    transition: 'border-color .3s var(--ip-bezier);
+    border: var(--border);
+    transition: 'border-color .3s var(--bezier);
   `)
 ])

src/input/src/styles/input.cssr.js

@@ -2,28 +2,28 @@ import { cB, c, cE, cM, cNotM } from '../../../_utils/cssr'
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up'
 
 // vars:
-// --ip-bezier
-// --ip-color
-// --ip-font-size
-// --ip-border-radius
-// --ip-height
-// --ip-padding-left
-// --ip-padding-right
-// --ip-text-color
-// --ip-text-color-disabled
-// --ip-caret-color
-// --ip-text-decoration-color
-// --ip-border
-// --ip-border-disabled
-// --ip-border-hover
-// --ip-border-focus
-// --ip-placeholder-color
-// --ip-placeholder-color-disabled
-// --ip-line-height-textarea
-// --ip-color-disabled
-// --ip-color-focus
-// --ip-box-shadow-focus
-// --ip-icon-size
+// --bezier
+// --color
+// --font-size
+// --border-radius
+// --height
+// --padding-left
+// --padding-right
+// --text-color
+// --text-color-disabled
+// --caret-color
+// --text-decoration-color
+// --border
+// --border-disabled
+// --border-hover
+// --border-focus
+// --placeholder-color
+// --placeholder-color-disabled
+// --line-height-textarea
+// --color-disabled
+// --color-focus
+// --box-shadow-focus
+// --icon-size
 export default c([
   cB('input', `
     line-height: 1.5;
@@ -33,20 +33,20 @@ export default c([
     position: relative;
     width: 100%;
     display: inline-block;
-    border-radius: var(--ip-border-radius);
-    background-color: var(--ip-color);
-    transition: background-color .3s var(--ip-bezier);
-    --ip-padding-vertical: calc((var(--ip-height) - 1.5 * var(--ip-font-size)) / 2);
+    border-radius: var(--border-radius);
+    background-color: var(--color);
+    transition: background-color .3s var(--bezier);
+    --padding-vertical: calc((var(--height) - 1.5 * var(--font-size)) / 2);
   `, [
     cE('input', {
-      height: 'var(--ip-height)'
+      height: 'var(--height)'
     }),
     cE('input, textarea, textarea-mirror, splitor, placeholder', `
-      padding-left: var(--ip-padding-left);
-      padding-right: var(--ip-padding-right);
-      padding-top: var(--ip-padding-vertical);
-      padding-bottom: var(--ip-padding-vertical);
-      font-size: var(--ip-font-size);
+      padding-left: var(--padding-left);
+      padding-right: var(--padding-right);
+      padding-top: var(--padding-vertical);
+      padding-bottom: var(--padding-vertical);
+      font-size: var(--font-size);
       line-height: 1.5;
     `),
     // cM('suffix, clearable', [
@@ -99,7 +99,7 @@ export default c([
     // ]),
     cM('round', [
       cNotM('textarea', {
-        borderRadius: 'calc(var(--ip-height) / 2)'
+        borderRadius: 'calc(var(--height) / 2)'
       })
     ]),
     cM('split', {
@@ -121,34 +121,34 @@ export default c([
     ]),
     cM('disabled', {
       cursor: 'not-allowed',
-      backgroundColor: 'var(--ip-color-disabled)'
+      backgroundColor: 'var(--color-disabled)'
     }, [
       cE('border', {
-        border: 'var(--ip-border-disabled)'
+        border: 'var(--border-disabled)'
       }),
       cE('input, textarea', {
         cursor: 'not-allowed',
-        color: 'var(--ip-text-color-disabled)'
+        color: 'var(--text-color-disabled)'
       }),
       cE('placeholder', {
-        color: 'var(--ip-placeholder-color-disabled)'
+        color: 'var(--placeholder-color-disabled)'
       }),
       cE('splitor', {
-        color: 'var(--ip-text-color-disabled)'
+        color: 'var(--text-color-disabled)'
       })
     ]),
     cNotM('disabled', [
       cM('focus', {
-        backgroundColor: 'var(--ip-color-focus)'
+        backgroundColor: 'var(--color-focus)'
       }, [
         cE('state-border', {
-          border: 'var(--ip-border-focus)',
-          boxShadow: 'var(--ip-box-shadow-focus)'
+          border: 'var(--border-focus)',
+          boxShadow: 'var(--box-shadow-focus)'
         })
       ]),
       c('&:hover', [
         cE('state-border', {
-          border: 'var(--ip-border-focus)'
+          border: 'var(--border-focus)'
         })
       ])
     ]),
@@ -161,10 +161,10 @@ export default c([
       bottom: 0;
       pointer-events: none;
       border-radius: inherit;
-      border: var(--ip-border);
+      border: var(--border);
       transition:
-        box-shadow .3s var(--ip-bezier),
-        border-color .3s var(--ip-bezier);
+        box-shadow .3s var(--bezier),
+        border-color .3s var(--bezier);
     `),
     cE('state-border', {
       borderColor: 'transparent',
@@ -179,8 +179,8 @@ export default c([
       top: 0;
       bottom: 0;
       overflow: hidden;
-      transition: color .3s var(--ip-bezier);
-      color: var(--ip-placeholder-color);
+      transition: color .3s var(--bezier);
+      color: var(--placeholder-color);
     `),
     cE('suffix, prefix', `
       position: absolute;
@@ -190,16 +190,15 @@ export default c([
       display: flex;
       align-items: center;
       top: 50%;
-      width: var(--ip-icon-size);
+      width: var(--icon-size);
     `, [
       cB('base-clear-button', {
-        fontSize: 'var(--ip-icon-size)'
+        fontSize: 'var(--icon-size)'
       }),
       cB('icon', {
         justifySelf: 'center',
-        fontSize: 'var(--ip-icon-color)',
-        color: 'var(--ip-icon-color)',
-        transition: 'color .3s var(--ip-bezier)'
+        fontSize: 'var(--icon-size)',
+        transition: 'color .3s var(--bezier)'
       })
     ]),
     cE('suffix', {
@@ -218,7 +217,7 @@ export default c([
       box-sizing: border-box;
       font-family: inherit;
       font-size: inherit;
-      line-height: var(--ip-line-height-textarea);
+      line-height: var(--line-height-textarea);
       margin: 0;
       resize: vertical;
       padding-left: 14px;
@@ -250,21 +249,21 @@ export default c([
       width: 100%;
       background-color: transparent;
       min-width: 0;
-      text-decoration-color: var(--ip-text-decoration-color);
-      color: var(--ip-text-color);
-      caret-color: var(--ip-caret-color);
+      text-decoration-color: var(--text-decoration-color);
+      color: var(--text-color);
+      caret-color: var(--caret-color);
       transition:
-        caret-color .3s var(--ip-bezier),
-        color .3s var(--ip-bezier),
-        text-decoration-color .3s var(--ip-bezier);
+        caret-color .3s var(--bezier),
+        color .3s var(--bezier),
+        text-decoration-color .3s var(--bezier);
     `, [
       c('&::placeholder', {
         color: 'transparent'
       })
     ]),
     cE('splitor', {
-      transition: 'color .3s var(--ip-bezier)',
-      color: 'var(--ip-text-color)',
+      transition: 'color .3s var(--bezier)',
+      color: 'var(--text-color)',
       paddingLeft: '0 !important',
       paddingRight: '0 !important'
     }),