Merge branch 'main' into feat-icon-css-var

CHANGELOG.en-US.md

@@ -6,13 +6,16 @@
 
 - Add `n-avatar-group`.
 - `n-popconfirm` uses `n` as CSS vars prefix.
+- `n-form` uses `n` as CSS vars prefix.
 - `n-pagination` uses `n` as CSS vars prefix.
 - `n-loading-bar` uses `n` as CSS vars prefix.
+- `n-empty` uses `n` as CSS vars prefix.
 - `n-list` uses `n` as CSS vars prefix.
 - `n-layout` uses `n` as CSS vars prefix.
 - `n-message` uses `n` as CSS vars prefix.
 - `n-mention` uses `n` as CSS vars prefix.
 - `n-menu` uses `n` as CSS vars prefix.
+- `n-popover` uses `n` as CSS vars prefix.
 - `n-transfer` uses `n` as CSS vars prefix.
 - `n-table` uses `n` as CSS vars prefix.
 - `n-statistic` uses `n` as CSS vars prefix.
@@ -32,6 +35,7 @@
 - `n-descriptions` uses `n` as CSS vars prefix.
 - `n-drawer` uses `n` as CSS vars prefix.
 - `n-dropdown` uses `n` as CSS vars prefix.
+- `n-element` uses `n` as CSS vars prefix.
 - `n-rate` uses `n` as CSS vars prefix.
 - `n-radio` uses `n` as CSS vars prefix.
 - `n-progress` uses `n` as CSS vars prefix.
@@ -43,6 +47,8 @@
 - `n-page-header` uses `n` as CSS vars prefix.
 - `n-image` uses `n` as CSS vars prefix.
 - `n-icon` uses `n` as CSS vars prefix.
+- `n-modal` uses `n` as CSS vars prefix.
+- `n-notification` uses `n` as CSS vars prefix.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -6,13 +6,16 @@
 
 - 新增 `n-avatar-group`
 - `n-popconfirm` 的 CSS 变量使用 `n` 作为前缀
+- `n-form` 的 CSS 变量使用 `n` 作为前缀
 - `n-pagination` 的 CSS 变量使用 `n` 作为前缀
 - `n-loading-bar` 的 CSS 变量使用 `n` 作为前缀
+- `n-empty` 的 CSS 变量使用 `n` 作为前缀
 - `n-list` 的 CSS 变量使用 `n` 作为前缀
 - `n-layout` 的 CSS 变量使用 `n` 作为前缀
 - `n-message` 的 CSS 变量使用 `n` 作为前缀
 - `n-mention` 的 CSS 变量使用 `n` 作为前缀
 - `n-menu` 的 CSS 变量使用 `n` 作为前缀
+- `n-popover` 的 CSS 变量使用 `n` 作为前缀
 - `n-transfer` 的 CSS 变量使用 `n` 作为前缀
 - `n-table` 的 CSS 变量使用 `n` 作为前缀
 - `n-statistic` 的 CSS 变量使用 `n` 作为前缀
@@ -32,6 +35,7 @@
 - `n-descriptions` 的 CSS 变量使用 `n` 作为前缀
 - `n-drawer` 的 CSS 变量使用 `n` 作为前缀
 - `n-dropdown` 的 CSS 变量使用 `n` 作为前缀
+- `n-element` 的 CSS 变量使用 `n` 作为前缀
 - `n-rate` 的 CSS 变量使用 `n` 作为前缀
 - `n-radio` 的 CSS 变量使用 `n` 作为前缀
 - `n-progress` 的 CSS 变量使用 `n` 作为前缀
@@ -43,6 +47,8 @@
 - `n-page-header` 的 CSS 变量使用 `n` 作为前缀
 - `n-image` 的 CSS 变量使用 `n` 作为前缀
 - `n-icon` 的 CSS 变量使用 `n` 作为前缀
+- `n-modal` 的 CSS 变量使用 `n` 作为前缀
+- `n-notification` 的 CSS 变量使用 `n` 作为前缀
 
 ### Fixes
 

src/dropdown/tests/__snapshots__/Dropdown.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`n-dropdown dropdown clickoutside 1`] = `
 <div
   class="n-dropdown-menu n-popover n-dropdown"
-  style="--box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); --bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --font-size: 14px; --text-color: rgb(51, 54, 57); --color: #fff; --divider-color: rgb(239, 239, 245); --border-radius: 3px; --arrow-height: 6px; --arrow-offset: 10px; --arrow-offset-vertical: 10px; --padding: 8px 14px; --space: 6px; --space-arrow: 10px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-padding: 4px 0; --n-border-radius: 3px; --n-option-height: 34px; --n-option-prefix-width: 14px; --n-option-icon-prefix-width: 36px; --n-option-suffix-width: 14px; --n-option-icon-suffix-width: 32px; --n-option-icon-size: 16px; --n-divider-color: rgb(239, 239, 245); --n-option-opacity-disabled: 0.5; --n-color: #fff; --n-option-color-hover: rgb(243, 243, 245); --n-option-color-active: rgba(24, 160, 88, 0.1); --n-option-text-color: rgb(51, 54, 57); --n-option-text-color-hover: rgb(51, 54, 57); --n-option-text-color-active: #18a058; --n-option-text-color-child-active: #18a058; --n-prefix-color: rgb(51, 54, 57); --n-suffix-color: rgb(51, 54, 57); --n-group-header-text-color: rgb(118, 124, 130);"
+  style="--n-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-font-size: 14px; --n-text-color: rgb(51, 54, 57); --n-color: #fff; --n-divider-color: rgb(239, 239, 245); --n-border-radius: 3px; --n-arrow-height: 6px; --n-arrow-offset: 10px; --n-arrow-offset-vertical: 10px; --n-padding: 4px 0; --n-space: 6px; --n-space-arrow: 10px; --n-option-height: 34px; --n-option-prefix-width: 14px; --n-option-icon-prefix-width: 36px; --n-option-suffix-width: 14px; --n-option-icon-suffix-width: 32px; --n-option-icon-size: 16px; --n-option-opacity-disabled: 0.5; --n-option-color-hover: rgb(243, 243, 245); --n-option-color-active: rgba(24, 160, 88, 0.1); --n-option-text-color: rgb(51, 54, 57); --n-option-text-color-hover: rgb(51, 54, 57); --n-option-text-color-active: #18a058; --n-option-text-color-child-active: #18a058; --n-prefix-color: rgb(51, 54, 57); --n-suffix-color: rgb(51, 54, 57); --n-group-header-text-color: rgb(118, 124, 130);"
 >
   
   
@@ -245,7 +245,7 @@ exports[`n-dropdown dropdown clickoutside 1`] = `
 exports[`n-dropdown inverted style 1`] = `
 <div
   class="n-dropdown-menu n-popover n-dropdown"
-  style="--box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); --bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --font-size: 14px; --text-color: rgb(51, 54, 57); --color: #fff; --divider-color: rgb(239, 239, 245); --border-radius: 3px; --arrow-height: 6px; --arrow-offset: 10px; --arrow-offset-vertical: 10px; --padding: 8px 14px; --space: 6px; --space-arrow: 10px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-padding: 4px 0; --n-border-radius: 3px; --n-option-height: 34px; --n-option-prefix-width: 14px; --n-option-icon-prefix-width: 36px; --n-option-suffix-width: 14px; --n-option-icon-suffix-width: 32px; --n-option-icon-size: 16px; --n-divider-color: rgb(239, 239, 245); --n-option-opacity-disabled: 0.5; --n-color: rgb(0, 20, 40); --n-option-color-hover: #18a058; --n-option-color-active: #18a058; --n-option-text-color: #BBB; --n-option-text-color-hover: #FFF; --n-option-text-color-active: #FFF; --n-option-text-color-child-active: #FFF; --n-prefix-color: #BBB; --n-suffix-color: #BBB; --n-group-header-text-color: #AAA;"
+  style="--n-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-font-size: 14px; --n-text-color: rgb(51, 54, 57); --n-color: rgb(0, 20, 40); --n-divider-color: rgb(239, 239, 245); --n-border-radius: 3px; --n-arrow-height: 6px; --n-arrow-offset: 10px; --n-arrow-offset-vertical: 10px; --n-padding: 4px 0; --n-space: 6px; --n-space-arrow: 10px; --n-option-height: 34px; --n-option-prefix-width: 14px; --n-option-icon-prefix-width: 36px; --n-option-suffix-width: 14px; --n-option-icon-suffix-width: 32px; --n-option-icon-size: 16px; --n-option-opacity-disabled: 0.5; --n-option-color-hover: #18a058; --n-option-color-active: #18a058; --n-option-text-color: #BBB; --n-option-text-color-hover: #FFF; --n-option-text-color-active: #FFF; --n-option-text-color-child-active: #FFF; --n-prefix-color: #BBB; --n-suffix-color: #BBB; --n-group-header-text-color: #AAA;"
 >
   
   
@@ -468,7 +468,7 @@ exports[`n-dropdown inverted style 1`] = `
 exports[`n-dropdown should work with \`render-icon\` props 1`] = `
 <div
   class="n-dropdown-menu n-popover n-dropdown"
-  style="--box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); --bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --font-size: 14px; --text-color: rgb(51, 54, 57); --color: #fff; --divider-color: rgb(239, 239, 245); --border-radius: 3px; --arrow-height: 6px; --arrow-offset: 10px; --arrow-offset-vertical: 10px; --padding: 8px 14px; --space: 6px; --space-arrow: 10px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-padding: 4px 0; --n-border-radius: 3px; --n-option-height: 34px; --n-option-prefix-width: 14px; --n-option-icon-prefix-width: 36px; --n-option-suffix-width: 14px; --n-option-icon-suffix-width: 32px; --n-option-icon-size: 16px; --n-divider-color: rgb(239, 239, 245); --n-option-opacity-disabled: 0.5; --n-color: #fff; --n-option-color-hover: rgb(243, 243, 245); --n-option-color-active: rgba(24, 160, 88, 0.1); --n-option-text-color: rgb(51, 54, 57); --n-option-text-color-hover: rgb(51, 54, 57); --n-option-text-color-active: #18a058; --n-option-text-color-child-active: #18a058; --n-prefix-color: rgb(51, 54, 57); --n-suffix-color: rgb(51, 54, 57); --n-group-header-text-color: rgb(118, 124, 130);"
+  style="--n-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-font-size: 14px; --n-text-color: rgb(51, 54, 57); --n-color: #fff; --n-divider-color: rgb(239, 239, 245); --n-border-radius: 3px; --n-arrow-height: 6px; --n-arrow-offset: 10px; --n-arrow-offset-vertical: 10px; --n-padding: 4px 0; --n-space: 6px; --n-space-arrow: 10px; --n-option-height: 34px; --n-option-prefix-width: 14px; --n-option-icon-prefix-width: 36px; --n-option-suffix-width: 14px; --n-option-icon-suffix-width: 32px; --n-option-icon-size: 16px; --n-option-opacity-disabled: 0.5; --n-option-color-hover: rgb(243, 243, 245); --n-option-color-active: rgba(24, 160, 88, 0.1); --n-option-text-color: rgb(51, 54, 57); --n-option-text-color-hover: rgb(51, 54, 57); --n-option-text-color-active: #18a058; --n-option-text-color-child-active: #18a058; --n-prefix-color: rgb(51, 54, 57); --n-suffix-color: rgb(51, 54, 57); --n-group-header-text-color: rgb(118, 124, 130);"
 >
   
   
@@ -855,7 +855,7 @@ exports[`n-dropdown should work with \`render-icon\` props 1`] = `
 exports[`n-dropdown should work with \`render-label\` props 1`] = `
 <div
   class="n-dropdown-menu n-popover n-dropdown"
-  style="--box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); --bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --font-size: 14px; --text-color: rgb(51, 54, 57); --color: #fff; --divider-color: rgb(239, 239, 245); --border-radius: 3px; --arrow-height: 6px; --arrow-offset: 10px; --arrow-offset-vertical: 10px; --padding: 8px 14px; --space: 6px; --space-arrow: 10px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-padding: 4px 0; --n-border-radius: 3px; --n-option-height: 34px; --n-option-prefix-width: 14px; --n-option-icon-prefix-width: 36px; --n-option-suffix-width: 14px; --n-option-icon-suffix-width: 32px; --n-option-icon-size: 16px; --n-divider-color: rgb(239, 239, 245); --n-option-opacity-disabled: 0.5; --n-color: #fff; --n-option-color-hover: rgb(243, 243, 245); --n-option-color-active: rgba(24, 160, 88, 0.1); --n-option-text-color: rgb(51, 54, 57); --n-option-text-color-hover: rgb(51, 54, 57); --n-option-text-color-active: #18a058; --n-option-text-color-child-active: #18a058; --n-prefix-color: rgb(51, 54, 57); --n-suffix-color: rgb(51, 54, 57); --n-group-header-text-color: rgb(118, 124, 130);"
+  style="--n-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-font-size: 14px; --n-text-color: rgb(51, 54, 57); --n-color: #fff; --n-divider-color: rgb(239, 239, 245); --n-border-radius: 3px; --n-arrow-height: 6px; --n-arrow-offset: 10px; --n-arrow-offset-vertical: 10px; --n-padding: 4px 0; --n-space: 6px; --n-space-arrow: 10px; --n-option-height: 34px; --n-option-prefix-width: 14px; --n-option-icon-prefix-width: 36px; --n-option-suffix-width: 14px; --n-option-icon-suffix-width: 32px; --n-option-icon-size: 16px; --n-option-opacity-disabled: 0.5; --n-option-color-hover: rgb(243, 243, 245); --n-option-color-active: rgba(24, 160, 88, 0.1); --n-option-text-color: rgb(51, 54, 57); --n-option-text-color-hover: rgb(51, 54, 57); --n-option-text-color-active: #18a058; --n-option-text-color-child-active: #18a058; --n-prefix-color: rgb(51, 54, 57); --n-suffix-color: rgb(51, 54, 57); --n-group-header-text-color: rgb(118, 124, 130);"
 >
   
   
@@ -1096,7 +1096,7 @@ exports[`n-dropdown shows arrow 1`] = `null`;
 exports[`n-dropdown shows menu after click 1`] = `
 <div
   class="n-dropdown-menu n-popover n-dropdown"
-  style="--box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); --bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --font-size: 14px; --text-color: rgb(51, 54, 57); --color: #fff; --divider-color: rgb(239, 239, 245); --border-radius: 3px; --arrow-height: 6px; --arrow-offset: 10px; --arrow-offset-vertical: 10px; --padding: 8px 14px; --space: 6px; --space-arrow: 10px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-font-size: 14px; --n-padding: 4px 0; --n-border-radius: 3px; --n-option-height: 34px; --n-option-prefix-width: 14px; --n-option-icon-prefix-width: 36px; --n-option-suffix-width: 14px; --n-option-icon-suffix-width: 32px; --n-option-icon-size: 16px; --n-divider-color: rgb(239, 239, 245); --n-option-opacity-disabled: 0.5; --n-color: #fff; --n-option-color-hover: rgb(243, 243, 245); --n-option-color-active: rgba(24, 160, 88, 0.1); --n-option-text-color: rgb(51, 54, 57); --n-option-text-color-hover: rgb(51, 54, 57); --n-option-text-color-active: #18a058; --n-option-text-color-child-active: #18a058; --n-prefix-color: rgb(51, 54, 57); --n-suffix-color: rgb(51, 54, 57); --n-group-header-text-color: rgb(118, 124, 130);"
+  style="--n-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-font-size: 14px; --n-text-color: rgb(51, 54, 57); --n-color: #fff; --n-divider-color: rgb(239, 239, 245); --n-border-radius: 3px; --n-arrow-height: 6px; --n-arrow-offset: 10px; --n-arrow-offset-vertical: 10px; --n-padding: 4px 0; --n-space: 6px; --n-space-arrow: 10px; --n-option-height: 34px; --n-option-prefix-width: 14px; --n-option-icon-prefix-width: 36px; --n-option-suffix-width: 14px; --n-option-icon-suffix-width: 32px; --n-option-icon-size: 16px; --n-option-opacity-disabled: 0.5; --n-option-color-hover: rgb(243, 243, 245); --n-option-color-active: rgba(24, 160, 88, 0.1); --n-option-text-color: rgb(51, 54, 57); --n-option-text-color-hover: rgb(51, 54, 57); --n-option-text-color-active: #18a058; --n-option-text-color-child-active: #18a058; --n-prefix-color: rgb(51, 54, 57); --n-suffix-color: rgb(51, 54, 57); --n-group-header-text-color: rgb(118, 124, 130);"
 >
   
   

src/element/src/Element.ts

@@ -37,7 +37,7 @@ export default defineComponent({
         return (
           Object.keys(common) as unknown as Array<keyof typeof common>
         ).reduce<Record<string, string | number>>((prevValue, key) => {
-          prevValue[`--${kebabCase(key)}`] = common[key]
+          prevValue[`--n-${kebabCase(key)}`] = common[key]
           return prevValue
         }, {})
       })

src/empty/src/Empty.tsx

@@ -82,12 +82,12 @@ export default defineComponent({
           }
         } = themeRef.value
         return {
-          '--icon-size': iconSize,
-          '--font-size': fontSize,
-          '--bezier': cubicBezierEaseInOut,
-          '--text-color': textColor,
-          '--icon-color': iconColor,
-          '--extra-text-color': extraTextColor
+          '--n-icon-size': iconSize,
+          '--n-font-size': fontSize,
+          '--n-bezier': cubicBezierEaseInOut,
+          '--n-text-color': textColor,
+          '--n-icon-color': iconColor,
+          '--n-extra-text-color': extraTextColor
         }
       })
     }

src/empty/src/styles/index.cssr.ts

@@ -1,36 +1,36 @@
 import { cB, cE } from '../../../_utils/cssr'
 
 // vars:
-// --font-size
-// --icon-size
-// --icon-color
-// --bezier
-// --text-color
-// --extra-text-color
+// --n-font-size
+// --n-icon-size
+// --n-icon-color
+// --n-bezier
+// --n-text-color
+// --n-extra-text-color
 export default cB('empty', `
   display: flex;
   flex-direction: column;
   align-items: center;
-  font-size: var(--font-size);
+  font-size: var(--n-font-size);
 `, [
   cE('icon', `
-    width: var(--icon-size);
-    height: var(--icon-size);
-    font-size: var(--icon-size);
-    line-height: var(--icon-size);
-    color: var(--icon-color);
+    width: var(--n-icon-size);
+    height: var(--n-icon-size);
+    font-size: var(--n-icon-size);
+    line-height: var(--n-icon-size);
+    color: var(--n-icon-color);
     transition:
-      color .3s var(--bezier);
+      color .3s var(--n-bezier);
   `),
   cE('description', `
     margin-top: 8px;
-    transition: color .3s var(--bezier);
-    color: var(--text-color);
+    transition: color .3s var(--n-bezier);
+    color: var(--n-text-color);
   `),
   cE('extra', `
     text-align: center;
-    transition: color .3s var(--bezier);
+    transition: color .3s var(--n-bezier);
     margin-top: 12px;
-    color: var(--extra-text-color);
+    color: var(--n-extra-text-color);
   `)
 ])

src/empty/tests/__snapshots__/Empty.spec.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`n-empty should work with \`size\` prop 1`] = `"--icon-size: 40px; --font-size: 14px; --bezier: cubic-bezier(.4, 0, .2, 1); --text-color: rgba(194, 194, 194, 1); --icon-color: rgba(194, 194, 194, 1); --extra-text-color: rgb(51, 54, 57);"`;
+exports[`n-empty should work with \`size\` prop 1`] = `"--n-icon-size: 40px; --n-font-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgba(194, 194, 194, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-extra-text-color: rgb(51, 54, 57);"`;
 
-exports[`n-empty should work with \`size\` prop 2`] = `"--icon-size: 34px; --font-size: 14px; --bezier: cubic-bezier(.4, 0, .2, 1); --text-color: rgba(194, 194, 194, 1); --icon-color: rgba(194, 194, 194, 1); --extra-text-color: rgb(51, 54, 57);"`;
+exports[`n-empty should work with \`size\` prop 2`] = `"--n-icon-size: 34px; --n-font-size: 14px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgba(194, 194, 194, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-extra-text-color: rgb(51, 54, 57);"`;
 
-exports[`n-empty should work with \`size\` prop 3`] = `"--icon-size: 46px; --font-size: 15px; --bezier: cubic-bezier(.4, 0, .2, 1); --text-color: rgba(194, 194, 194, 1); --icon-color: rgba(194, 194, 194, 1); --extra-text-color: rgb(51, 54, 57);"`;
+exports[`n-empty should work with \`size\` prop 3`] = `"--n-icon-size: 46px; --n-font-size: 15px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgba(194, 194, 194, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-extra-text-color: rgb(51, 54, 57);"`;
 
-exports[`n-empty should work with \`size\` prop 4`] = `"--icon-size: 52px; --font-size: 16px; --bezier: cubic-bezier(.4, 0, .2, 1); --text-color: rgba(194, 194, 194, 1); --icon-color: rgba(194, 194, 194, 1); --extra-text-color: rgb(51, 54, 57);"`;
+exports[`n-empty should work with \`size\` prop 4`] = `"--n-icon-size: 52px; --n-font-size: 16px; --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-text-color: rgba(194, 194, 194, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-extra-text-color: rgb(51, 54, 57);"`;