feat(button): depth prop

demo/pages/home/Footer.vue

@@ -28,43 +28,47 @@
     </div>
     <n-divider class="footer-divider" />
     <div style="text-align: center; padding: 20px">
-      <n-text depth="3">Naive UI 2.7.4 · Made by Tusimple</n-text>
+      <n-text depth="3">Naive UI {{ version }} · Made by Tusimple</n-text>
     </div>
   </n-layout-footer>
 </template>
 
 <script>
 import { i18n } from '../../utils/composables'
+import { version } from 'naive-ui'
 
 export default {
   props: {
     centered: Boolean
   },
   setup () {
-    return i18n({
-      'zh-CN': {
-        resources: '资源',
-        designResources: '设计资源',
-        help: '帮助',
-        community: '社区',
-        contact: '联系我们',
-        changelog: '更新日志',
-        commonIssues: '常见问题',
-        tusimple: '图森未来',
-        joinUs: '加入我们'
-      },
-      'en-US': {
-        resources: 'Resources',
-        designResources: 'Design Resources',
-        help: 'Help',
-        community: 'Community',
-        contact: 'Contact Us',
-        changelog: 'Change Log',
-        commonIssues: 'Common Issues',
-        tusimple: 'TuSimple',
-        joinUs: 'Join Us'
-      }
-    })
+    return {
+      version,
+      ...i18n({
+        'zh-CN': {
+          resources: '资源',
+          designResources: '设计资源',
+          help: '帮助',
+          community: '社区',
+          contact: '联系我们',
+          changelog: '更新日志',
+          commonIssues: '常见问题',
+          tusimple: '图森未来',
+          joinUs: '加入我们'
+        },
+        'en-US': {
+          resources: 'Resources',
+          designResources: 'Design Resources',
+          help: 'Help',
+          community: 'Community',
+          contact: 'Contact Us',
+          changelog: 'Change Log',
+          commonIssues: 'Common Issues',
+          tusimple: 'TuSimple',
+          joinUs: 'Join Us'
+        }
+      })
+    }
   }
 }
 </script>

demo/utils/ComponentDemo.vue

@@ -27,6 +27,7 @@
       <n-tooltip trigger="hover" :placement="'top'" :show-arrow="true">
         <template #trigger>
           <edit-on-github-button
+            depth="3"
             style="padding: 0; margin-right: 6px"
             size="tiny"
             :relative-url="relativeUrl"
@@ -45,6 +46,7 @@
             style="padding: 0"
             size="tiny"
             text
+            depth="3"
             @click="toggleCodeDisplay"
           >
             <template #icon>

demo/utils/EditInCodeSandboxButton.vue

@@ -1,5 +1,11 @@
 <template>
-  <n-button class="edit-button" text :size="size" @click="handleClick">
+  <n-button
+    class="edit-button"
+    text
+    :size="size"
+    @click="handleClick"
+    depth="3"
+  >
     <template #icon>
       <n-icon>
         <code-sandbox-icon />

demo/utils/EditOnGithubButton.vue

@@ -1,5 +1,11 @@
 <template>
-  <n-button class="edit-button" text :size="size" @click="handleClick">
+  <n-button
+    class="edit-button"
+    text
+    :size="size"
+    @click="handleClick"
+    :depth="depth"
+  >
     <template #icon>
       <n-icon>
         <edit-icon />
@@ -23,7 +29,8 @@ export default {
       required: true
     },
     text: Boolean,
-    size: String
+    size: String,
+    depth: String
   },
   setup (props) {
     return {

src/button/demos/enUS/tag.demo.md

@@ -1,6 +1,6 @@
 # Tag
 
-You can render button as different tags. For example `<a />`. 你可以把按钮渲染成不同的标签，比如 `<a />`。
+You can render button as different tags. For example `<a />`.
 
 ```html
 <n-button

src/button/src/Button.tsx

@@ -39,6 +39,7 @@ const buttonProps = {
   size: String as PropType<Size>,
   ghost: Boolean,
   round: Boolean,
+  depth: [Number, String] as PropType<1 | 2 | 3 | '1' | '2' | '3'>,
   focusable: {
     type: Boolean,
     default: true
@@ -227,6 +228,17 @@ export default defineComponent({
           '--text-color-disabled': 'initial'
         }
         if (text) {
+          const { depth } = props
+          const textColor =
+            color ||
+            (type === 'default' && depth !== undefined
+              ? self[
+                createKey(
+                  'textColorTextDepth',
+                  String(depth) as '1' | '2' | '3'
+                )
+              ]
+              : self[createKey('textColorText', type)])
           colorProps = {
             '--color': '#0000',
             '--color-hover': '#0000',
@@ -234,7 +246,7 @@ export default defineComponent({
             '--color-focus': '#0000',
             '--color-disabled': '#0000',
             '--ripple-color': '#0000',
-            '--text-color': color || self[createKey('textColorText', type)],
+            '--text-color': textColor,
             '--text-color-hover': color
               ? createHoverColor(color)
               : self[createKey('textColorTextHover', type)],

src/button/styles/light.ts

@@ -15,7 +15,9 @@ export const self = (vars: ThemeCommonVars) => {
     fontSizeMedium,
     fontSizeLarge,
     opacityDisabled,
+    textColor1,
     textColor2,
+    textColor3,
     primaryColorHover,
     primaryColorPressed,
     borderColor,
@@ -62,6 +64,9 @@ export const self = (vars: ThemeCommonVars) => {
     textColorFocus: primaryColorHover,
     textColorDisabled: textColor2,
     textColorText: textColor2,
+    textColorTextDepth1: textColor1,
+    textColorTextDepth2: textColor2,
+    textColorTextDepth3: textColor3,
     textColorTextHover: primaryColorHover,
     textColorTextPressed: primaryColorPressed,
     textColorTextFocus: primaryColorHover,