From 0c0c6e257e687fc758f0246dd6cd3e0cec89d50c Mon Sep 17 00:00:00 2001
From: chenyinan <cyntimetravel@gmail.com>
Date: Mon, 20 Dec 2021 07:40:54 +0800
Subject: [PATCH] feat(thing): uses `n` as CSS vars prefix

---
 CHANGELOG.en-US.md                 |  6 ++++++
 CHANGELOG.zh-CN.md                 |  6 ++++++
 src/thing/src/Thing.tsx            | 10 +++++-----
 src/thing/src/styles/index.cssr.ts | 22 +++++++++++-----------
 4 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 18735a23766..b2afd78f1e7 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+# Pending
+
+### Feats
+
+- `n-thing` uses `n` as CSS vars prefix.
+
 ## 2.23.1 (2021-12-20)
 
 ### Fixes
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 8c9a9d3d751..9f6d64d6880 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+# Pending
+
+### Feats
+
+- `n-thing` 的 CSS 变量使用 `n` 作为前缀
+
 ## 2.23.1 (2021-12-20)
 
 ### Fixes
diff --git a/src/thing/src/Thing.tsx b/src/thing/src/Thing.tsx
index ea1b7e1915f..eb951335834 100644
--- a/src/thing/src/Thing.tsx
+++ b/src/thing/src/Thing.tsx
@@ -46,11 +46,11 @@ export default defineComponent({
         common: { cubicBezierEaseInOut }
       } = themeRef.value
       return {
-        '--bezier': cubicBezierEaseInOut,
-        '--font-size': fontSize,
-        '--text-color': textColor,
-        '--title-font-weight': titleFontWeight,
-        '--title-text-color': titleTextColor
+        '--n-bezier': cubicBezierEaseInOut,
+        '--n-font-size': fontSize,
+        '--n-text-color': textColor,
+        '--n-title-font-weight': titleFontWeight,
+        '--n-title-text-color': titleTextColor
       }
     })
     return () => {
diff --git a/src/thing/src/styles/index.cssr.ts b/src/thing/src/styles/index.cssr.ts
index 873122b9abf..1e473a07b80 100644
--- a/src/thing/src/styles/index.cssr.ts
+++ b/src/thing/src/styles/index.cssr.ts
@@ -1,16 +1,16 @@
 import { c, cB, cE } from '../../../_utils/cssr'
 
 // vars:
-// --bezier
-// --font-size
-// --text-color
-// --title-font-weight
-// --title-text-color
+// --n-bezier
+// --n-font-size
+// --n-text-color
+// --n-title-font-weight
+// --n-title-text-color
 export default cB('thing', `
   display: flex;
-  transition: color .3s var(--bezier);
-  font-size: var(--font-size);
-  color: var(--text-color);
+  transition: color .3s var(--n-bezier);
+  font-size: var(--n-font-size);
+  color: var(--n-text-color);
 `, [
   cB('thing-avatar', `
     margin-right: 12px;
@@ -35,9 +35,9 @@ export default cB('thing', `
     `, [
       cE('title', `
         font-size: 16px;
-        font-weight: var(--title-font-weight);
-        transition: color .3s var(--bezier);
-        color: var(--title-text-color);
+        font-weight: var(--n-title-font-weight);
+        transition: color .3s var(--n-bezier);
+        color: var(--n-title-text-color);
       `)
     ]),
     cE('description', [