From f36f78766826861c9e946a3dab39286302b802b7 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sat, 7 Nov 2020 01:02:26 +0800
Subject: [PATCH] refactor(typography): depth

---
 .../components/typography/enUS/index.demo-entry.md   |  4 ++--
 .../components/typography/enUS/text.demo.md          |  6 +++---
 .../components/typography/zhCN/index.demo-entry.md   |  4 ++--
 .../components/typography/zhCN/text.demo.md          |  6 +++---
 .../components/upload/enUS/drag.demo.md              |  2 +-
 .../components/upload/zhCN/drag.demo.md              |  2 +-
 demo/documentation/landing/Footer.vue                |  2 +-
 demo/utils/ComponentDemo.vue                         |  1 -
 demo/utils/EditOnGithubButton.vue                    |  1 -
 src/button/src/Button.vue                            |  6 ------
 src/typography/src/p.vue                             |  4 ++--
 src/typography/src/styles/themed-p.cssr.js           |  6 +++---
 src/typography/src/styles/themed-text.cssr.js        | 12 ++++++------
 src/typography/src/text.vue                          |  2 +-
 vue3.md                                              |  3 +++
 15 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/demo/documentation/components/typography/enUS/index.demo-entry.md b/demo/documentation/components/typography/enUS/index.demo-entry.md
index 4a0f92672..35324e455 100644
--- a/demo/documentation/components/typography/enUS/index.demo-entry.md
+++ b/demo/documentation/components/typography/enUS/index.demo-entry.md
@@ -27,13 +27,13 @@ text
 |underline|`boolean`|`false`||
 |delete|`boolean`|`false`||
 |code|`boolean`|`false`||
-|depth|`'primary' \| 'secondary' \| 'tertiary'`|`undefined`||
+|depth|`1 \| 2 \| 3 \| '1' \| '2' \| '3'`|`undefined`||
 |tag|`string`|`undefined`|What tag should be this component be rendered as. Won't work when `code` or `del` is set.|
 
 ### P Props
 |Name|Type|Default|Description|
 |-|-|-|-|
-|depth|`'primary' \| 'secondary' \| 'tertiary'`|`undefined`||
+|depth|`1 \| 2 \| 3 \| '1' \| '2' \| '3'`|`undefined`||
 
 
 ### H1, H2, H3, H4, H5, H6 Props
diff --git a/demo/documentation/components/typography/enUS/text.demo.md b/demo/documentation/components/typography/enUS/text.demo.md
index 4078be54b..21b5a522d 100644
--- a/demo/documentation/components/typography/enUS/text.demo.md
+++ b/demo/documentation/components/typography/enUS/text.demo.md
@@ -11,8 +11,8 @@ Use different type of text to display different kind of info.
 <n-text delete>Delete</n-text>&nbsp;
 <n-text code>Code</n-text>&nbsp;
 <n-text code delete>Code</n-text>&nbsp;
-<n-text depth="primary">Primary Depth</n-text>&nbsp;
-<n-text depth="secondary">Secondary Depth</n-text>&nbsp;
-<n-text depth="tertiary">Tertiary Depth</n-text>&nbsp;
+<n-text depth="1">Primary Depth</n-text>&nbsp;
+<n-text depth="2">Secondary Depth</n-text>&nbsp;
+<n-text depth="3">Tertiary Depth</n-text>&nbsp;
 <n-text tag="div">As Div</n-text> 
 ```
\ No newline at end of file
diff --git a/demo/documentation/components/typography/zhCN/index.demo-entry.md b/demo/documentation/components/typography/zhCN/index.demo-entry.md
index 3a042a359..8b60d98d2 100644
--- a/demo/documentation/components/typography/zhCN/index.demo-entry.md
+++ b/demo/documentation/components/typography/zhCN/index.demo-entry.md
@@ -27,13 +27,13 @@ text
 |underline|`boolean`|`false`||
 |delete|`boolean`|`false`||
 |code|`boolean`|`false`||
-|depth|`'primary' \| 'secondary' \| 'tertiary'`|`undefined`||
+|depth|`1 \| 2 \| 3 \| '1' \| '2' \| '3'`|`undefined`||
 |tag|`string`|`undefined`|需要被渲染为什么标签，在 `code` 和 `del` 设定的情况下不生效|
 
 ### P Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
-|depth|`'primary' \| 'secondary' \| 'tertiary'`|`undefined`||
+|depth|`1 \| 2 \| 3 \| '1' \| '2' \| '3'`|`undefined`||
 
 ### H1, H2, H3, H4, H5, H6 Props
 |名称|类型|默认值|说明|
diff --git a/demo/documentation/components/typography/zhCN/text.demo.md b/demo/documentation/components/typography/zhCN/text.demo.md
index 910ee71ea..609340c83 100644
--- a/demo/documentation/components/typography/zhCN/text.demo.md
+++ b/demo/documentation/components/typography/zhCN/text.demo.md
@@ -11,8 +11,8 @@
 <n-text delete>Delete</n-text>&nbsp;
 <n-text code>Code</n-text>&nbsp;
 <n-text code delete>Code</n-text>&nbsp;
-<n-text depth="primary">Primary Depth</n-text>&nbsp;
-<n-text depth="secondary">Secondary Depth</n-text>&nbsp;
-<n-text depth="tertiary">Tertiary Depth</n-text>&nbsp;
+<n-text depth="1">Primary Depth</n-text>&nbsp;
+<n-text depth="2">Secondary Depth</n-text>&nbsp;
+<n-text depth="3">Tertiary Depth</n-text>&nbsp;
 <n-text tag="div">作为 Div</n-text>
 ```
diff --git a/demo/documentation/components/upload/enUS/drag.demo.md b/demo/documentation/components/upload/enUS/drag.demo.md
index 96e552ff3..3f61b8994 100644
--- a/demo/documentation/components/upload/enUS/drag.demo.md
+++ b/demo/documentation/components/upload/enUS/drag.demo.md
@@ -8,7 +8,7 @@
       </n-icon>
     </div>
     <n-text style="font-size: 16px;">Click or drag file to this area to upload</n-text>
-    <n-p depth="tertiary" style="margin-bottom: 0;">Strictly prohibit from uploading sensitive information. For example, your deposit card's password or your credit card's expiration date and security code.</n-p>
+    <n-p depth="3" style="margin-bottom: 0;">Strictly prohibit from uploading sensitive information. For example, your deposit card's password or your credit card's expiration date and security code.</n-p>
   </n-upload-dragger>
 </n-upload>
 ```
diff --git a/demo/documentation/components/upload/zhCN/drag.demo.md b/demo/documentation/components/upload/zhCN/drag.demo.md
index 69938f86b..cbc50c61b 100644
--- a/demo/documentation/components/upload/zhCN/drag.demo.md
+++ b/demo/documentation/components/upload/zhCN/drag.demo.md
@@ -8,7 +8,7 @@
       </n-icon>
     </div>
     <n-text style="font-size: 16px;">点击或者拖动文件到该区域来上传</n-text>
-    <n-p depth="tertiary" style="margin-bottom: 0;">请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码</n-p>
+    <n-p depth="3" style="margin-bottom: 0;">请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码</n-p>
   </n-upload-dragger>
 </n-upload>
 ```
diff --git a/demo/documentation/landing/Footer.vue b/demo/documentation/landing/Footer.vue
index 904d95f35..2533766e3 100644
--- a/demo/documentation/landing/Footer.vue
+++ b/demo/documentation/landing/Footer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="footer">
     <n-divider v-if="showDivider" style="margin: 0 0 16px 0;" />
-    <n-text depth="tertiary">
+    <n-text depth="3">
       Made by Tusimple
     </n-text>
   </div>
diff --git a/demo/utils/ComponentDemo.vue b/demo/utils/ComponentDemo.vue
index 9834c9bc4..668d9fbab 100644
--- a/demo/utils/ComponentDemo.vue
+++ b/demo/utils/ComponentDemo.vue
@@ -37,7 +37,6 @@
             style="padding: 0;"
             size="tiny"
             text
-            icon-depth="tertiary"
             @click="toggleCodeDisplay"
           >
             <template #icon>
diff --git a/demo/utils/EditOnGithubButton.vue b/demo/utils/EditOnGithubButton.vue
index a662dc6eb..f32f5d04b 100644
--- a/demo/utils/EditOnGithubButton.vue
+++ b/demo/utils/EditOnGithubButton.vue
@@ -2,7 +2,6 @@
   <n-button
     class="edit-button"
     text
-    icon-depth="tertiary"
     :size="size"
     @click="handleEditOnGithubClick"
   >
diff --git a/src/button/src/Button.vue b/src/button/src/Button.vue
index 09af1acce..0538a0cb1 100644
--- a/src/button/src/Button.vue
+++ b/src/button/src/Button.vue
@@ -178,12 +178,6 @@ export default {
         return ['left', 'right'].includes(value)
       }
     },
-    iconDepth: {
-      default: 'secondary',
-      validator (value) {
-        return ['secondary', 'tertiary'].includes(value)
-      }
-    },
     attrType: {
       default: 'button',
       validator (value) {
diff --git a/src/typography/src/p.vue b/src/typography/src/p.vue
index 66ba0d5e2..2d4224638 100644
--- a/src/typography/src/p.vue
+++ b/src/typography/src/p.vue
@@ -30,9 +30,9 @@ export default {
   props: {
     depth: {
       validator (value) {
-        return ['primary', 'secondary', 'tertiary'].includes(value)
+        return [1, 2, 3, '1', '2', '3'].includes(value)
       },
-      default: null
+      default: undefined
     }
   }
 }
diff --git a/src/typography/src/styles/themed-p.cssr.js b/src/typography/src/styles/themed-p.cssr.js
index acbd1dc32..8d0ef3389 100644
--- a/src/typography/src/styles/themed-p.cssr.js
+++ b/src/typography/src/styles/themed-p.cssr.js
@@ -24,13 +24,13 @@ export default c([
       c('&:first-child', {
         marginTop: 0
       }),
-      cM('primary-depth', {
+      cM('1-depth', {
         color: pTextColorPrimaryDepth
       }),
-      cM('secondary-depth', {
+      cM('2-depth', {
         color: pTextColorSecondaryDepth
       }),
-      cM('tertiary-depth', {
+      cM('3-depth', {
         color: pTextColorTertiaryDepth
       })
     ])
diff --git a/src/typography/src/styles/themed-text.cssr.js b/src/typography/src/styles/themed-text.cssr.js
index 70b518a16..1a381c1ae 100644
--- a/src/typography/src/styles/themed-text.cssr.js
+++ b/src/typography/src/styles/themed-text.cssr.js
@@ -57,24 +57,24 @@ export default c([
         border: `1px solid ${codeBorderColor}`
       }),
       cM('default-type', [
-        cM('primary-depth', {
+        cM('1-depth', {
           color: textColor1Depth
         }),
-        cM('secondary-depth', {
+        cM('2-depth', {
           color: textColor2Depth
         }),
-        cM('tertiary-depth', {
+        cM('3-depth', {
           color: textColor3Depth
         })
       ]),
       cNotM('default-type', [
-        cM('primary-depth', {
+        cM('1-depth', {
           color: textOpacityPrimaryDepth
         }),
-        cM('secondary-depth', {
+        cM('2-depth', {
           color: textOpacitySecondaryDepth
         }),
-        cM('tertiary-depth', {
+        cM('3-depth', {
           color: textOpacityTertiaryDepth
         })
       ]),
diff --git a/src/typography/src/text.vue b/src/typography/src/text.vue
index db1a75f91..30aae68e9 100644
--- a/src/typography/src/text.vue
+++ b/src/typography/src/text.vue
@@ -106,7 +106,7 @@ export default {
     },
     depth: {
       validator (value) {
-        return ['primary', 'secondary', 'tertiary'].includes(value)
+        return [1, 2, 3, '1', '2', '3'].includes(value)
       },
       default: undefined
     },
diff --git a/vue3.md b/vue3.md
index b4a1342c2..23b4b02cf 100644
--- a/vue3.md
+++ b/vue3.md
@@ -296,6 +296,9 @@
     - `on-checked-keys-change` => `on-update:checked-keys`
     - `on-expanded-keys-change` => `on-update:expanded-keys`
 - [x] typography
+  - breaking
+    - text, p
+      - `depth` from `primary` ... `tertiary` => `1`, `2`, `3`
   - deprecate
     - text
       - `as` => `tag`