feat(icon): uses n as CSS vars prefix

CHANGELOG.en-US.md

@@ -46,6 +46,7 @@
 - `n-carousel` uses `n` as CSS vars prefix.
 - `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.
 

CHANGELOG.zh-CN.md

@@ -46,6 +46,7 @@
 - `n-carousel` 的 CSS 变量使用 `n` 作为前缀
 - `n-page-header` 的 CSS 变量使用 `n` 作为前缀
 - `n-image` 的 CSS 变量使用 `n` 作为前缀
+- `n-icon` 的 CSS 变量使用 `n` 作为前缀
 - `n-modal` 的 CSS 变量使用 `n` 作为前缀
 - `n-notification` 的 CSS 变量使用 `n` 作为前缀
 

src/avatar/tests/__snapshots__/Avatar.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`n-avatar bordered avatar 1`] = `"<span class=\\"n-avatar\\" style=\\"--
 
 exports[`n-avatar custom style 1`] = `"<span class=\\"n-avatar\\" style=\\"--n-font-size: 14px; --n-border: 2px solid #fff; --n-border-radius: 50%; --n-color: rgba(204, 204, 204, 1); --n-color-modal: rgba(204, 204, 204, 1); --n-color-popover: rgba(204, 204, 204, 1); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-merged-size: var(--n-avatar-size-override, 34px); background-color: red;\\"><span class=\\"n-avatar__text\\"></span></span>"`;
 
-exports[`n-avatar icon avatar 1`] = `"<span class=\\"n-avatar\\" style=\\"--n-font-size: 14px; --n-border: 2px solid #fff; --n-border-radius: 50%; --n-color: rgba(204, 204, 204, 1); --n-color-modal: rgba(204, 204, 204, 1); --n-color-popover: rgba(204, 204, 204, 1); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-merged-size: var(--n-avatar-size-override, 34px);\\"><span class=\\"n-avatar__text\\"><i role=\\"img\\" class=\\"n-icon\\" style=\\"--bezier: cubic-bezier(.4, 0, .2, 1);\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" viewBox=\\"0 0 512 512\\"><rect x=\\"32\\" y=\\"80\\" width=\\"448\\" height=\\"256\\" rx=\\"16\\" ry=\\"16\\" transform=\\"rotate(180 256 208)\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\" d=\\"M64 384h384\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\" d=\\"M96 432h320\\"></path><circle cx=\\"256\\" cy=\\"208\\" r=\\"80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></circle><path d=\\"M480 160a80 80 0 0 1-80-80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path><path d=\\"M32 160a80 80 0 0 0 80-80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path><path d=\\"M480 256a80 80 0 0 0-80 80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path><path d=\\"M32 256a80 80 0 0 1 80 80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path></svg></i></span></span>"`;
+exports[`n-avatar icon avatar 1`] = `"<span class=\\"n-avatar\\" style=\\"--n-font-size: 14px; --n-border: 2px solid #fff; --n-border-radius: 50%; --n-color: rgba(204, 204, 204, 1); --n-color-modal: rgba(204, 204, 204, 1); --n-color-popover: rgba(204, 204, 204, 1); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-merged-size: var(--n-avatar-size-override, 34px);\\"><span class=\\"n-avatar__text\\"><i role=\\"img\\" class=\\"n-icon\\" style=\\"--n-bezier: cubic-bezier(.4, 0, .2, 1);\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" viewBox=\\"0 0 512 512\\"><rect x=\\"32\\" y=\\"80\\" width=\\"448\\" height=\\"256\\" rx=\\"16\\" ry=\\"16\\" transform=\\"rotate(180 256 208)\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\" d=\\"M64 384h384\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\" d=\\"M96 432h320\\"></path><circle cx=\\"256\\" cy=\\"208\\" r=\\"80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></circle><path d=\\"M480 160a80 80 0 0 1-80-80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path><path d=\\"M32 160a80 80 0 0 0 80-80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path><path d=\\"M480 256a80 80 0 0 0-80 80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path><path d=\\"M32 256a80 80 0 0 1 80 80\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"32\\"></path></svg></i></span></span>"`;
 
 exports[`n-avatar image avatar 1`] = `"<span class=\\"n-avatar\\" style=\\"--n-font-size: 14px; --n-border: 2px solid #fff; --n-border-radius: 50%; --n-color: rgba(204, 204, 204, 1); --n-color-modal: rgba(204, 204, 204, 1); --n-color-popover: rgba(204, 204, 204, 1); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-merged-size: var(--n-avatar-size-override, 34px);\\"><img src=\\"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg\\"></span>"`;
 

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

@@ -71,7 +71,7 @@ exports[`n-dropdown dropdown clickoutside 1`] = `
         <i
           class="n-icon"
           role="img"
-          style="--bezier: cubic-bezier(.4, 0, .2, 1);"
+          style="--n-bezier: cubic-bezier(.4, 0, .2, 1);"
         >
           <svg
             viewBox="0 0 512 512"
@@ -195,7 +195,7 @@ exports[`n-dropdown dropdown clickoutside 1`] = `
         <i
           class="n-icon"
           role="img"
-          style="--bezier: cubic-bezier(.4, 0, .2, 1);"
+          style="--n-bezier: cubic-bezier(.4, 0, .2, 1);"
         >
           <svg
             fill="none"
@@ -313,7 +313,7 @@ exports[`n-dropdown inverted style 1`] = `
         <i
           class="n-icon"
           role="img"
-          style="--bezier: cubic-bezier(.4, 0, .2, 1);"
+          style="--n-bezier: cubic-bezier(.4, 0, .2, 1);"
         >
           <svg
             viewBox="0 0 512 512"
@@ -437,7 +437,7 @@ exports[`n-dropdown inverted style 1`] = `
         <i
           class="n-icon"
           role="img"
-          style="--bezier: cubic-bezier(.4, 0, .2, 1);"
+          style="--n-bezier: cubic-bezier(.4, 0, .2, 1);"
         >
           <svg
             fill="none"
@@ -508,7 +508,7 @@ exports[`n-dropdown should work with \`render-icon\` props 1`] = `
         <i
           class="n-icon"
           role="img"
-          style="--bezier: cubic-bezier(.4, 0, .2, 1);"
+          style="--n-bezier: cubic-bezier(.4, 0, .2, 1);"
         >
           <svg
             viewBox="0 0 512 512"
@@ -618,7 +618,7 @@ exports[`n-dropdown should work with \`render-icon\` props 1`] = `
         <i
           class="n-icon"
           role="img"
-          style="--bezier: cubic-bezier(.4, 0, .2, 1);"
+          style="--n-bezier: cubic-bezier(.4, 0, .2, 1);"
         >
           <svg
             viewBox="0 0 512 512"
@@ -730,7 +730,7 @@ exports[`n-dropdown should work with \`render-icon\` props 1`] = `
         <i
           class="n-icon"
           role="img"
-          style="--bezier: cubic-bezier(.4, 0, .2, 1);"
+          style="--n-bezier: cubic-bezier(.4, 0, .2, 1);"
         >
           <svg
             viewBox="0 0 512 512"
@@ -824,7 +824,7 @@ exports[`n-dropdown should work with \`render-icon\` props 1`] = `
         <i
           class="n-icon"
           role="img"
-          style="--bezier: cubic-bezier(.4, 0, .2, 1);"
+          style="--n-bezier: cubic-bezier(.4, 0, .2, 1);"
         >
           <svg
             fill="none"
@@ -931,7 +931,7 @@ exports[`n-dropdown should work with \`render-label\` props 1`] = `
         <i
           class="n-icon"
           role="img"
-          style="--bezier: cubic-bezier(.4, 0, .2, 1);"
+          style="--n-bezier: cubic-bezier(.4, 0, .2, 1);"
         >
           <svg
             viewBox="0 0 512 512"
@@ -1063,7 +1063,7 @@ exports[`n-dropdown should work with \`render-label\` props 1`] = `
         <i
           class="n-icon"
           role="img"
-          style="--bezier: cubic-bezier(.4, 0, .2, 1);"
+          style="--n-bezier: cubic-bezier(.4, 0, .2, 1);"
         >
           <svg
             fill="none"
@@ -1164,7 +1164,7 @@ exports[`n-dropdown shows menu after click 1`] = `
         <i
           class="n-icon"
           role="img"
-          style="--bezier: cubic-bezier(.4, 0, .2, 1);"
+          style="--n-bezier: cubic-bezier(.4, 0, .2, 1);"
         >
           <svg
             viewBox="0 0 512 512"
@@ -1288,7 +1288,7 @@ exports[`n-dropdown shows menu after click 1`] = `
         <i
           class="n-icon"
           role="img"
-          style="--bezier: cubic-bezier(.4, 0, .2, 1);"
+          style="--n-bezier: cubic-bezier(.4, 0, .2, 1);"
         >
           <svg
             fill="none"

src/icon/src/Icon.ts

@@ -46,13 +46,13 @@ export default defineComponent({
         if (depth !== undefined) {
           const { color, [`opacity${depth}Depth` as const]: opacity } = self
           return {
-            '--bezier': cubicBezierEaseInOut,
-            '--color': color,
-            '--opacity': opacity
+            '--n-bezier': cubicBezierEaseInOut,
+            '--n-color': color,
+            '--n-opacity': opacity
           }
         }
         return {
-          '--bezier': cubicBezierEaseInOut
+          '--n-bezier': cubicBezierEaseInOut
         }
       })
     }

src/icon/src/styles/index.cssr.ts

@@ -1,9 +1,9 @@
 import { c, cB, cM } from '../../../_utils/cssr'
 
 // vars:
-// --bezier
-// --color
-// --opacity
+// --n-bezier
+// --n-color
+// --n-opacity
 export default cB('icon', `
   height: 1em;
   width: 1em;
@@ -15,14 +15,14 @@ export default cB('icon', `
   transform: translateZ(0);
 `, [
   cM('color-transition', {
-    transition: 'color .3s var(--bezier)'
+    transition: 'color .3s var(--n-bezier)'
   }),
   cM('depth', {
-    color: 'var(--color)'
+    color: 'var(--n-color)'
   }, [
     c('svg', {
-      opacity: 'var(--opacity)',
-      transition: 'opacity .3s var(--bezier)'
+      opacity: 'var(--n-opacity)',
+      transition: 'opacity .3s var(--n-bezier)'
     })
   ]),
   c('svg', {

src/icon/tests/__snapshots__/Icon.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`n-icon should work with \`depth\` prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --color: #000; --opacity: 0.18;"`;
+exports[`n-icon should work with \`depth\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: #000; --n-opacity: 0.18;"`;