From d10978ab57896534e7650298a34c40ee04bee5d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=9C=E9=A3=8E=E4=BD=BF=E5=91=BD=E5=BF=85=E8=BE=BE?=
 <1664677472@qq.com>
Date: Thu, 5 Sep 2024 23:32:45 -0700
Subject: [PATCH] feat(button): [button] Adapting to the SMB theme (#2054)

* feat(button): [button] Adapting to the SMB theme

* feat(button): [button] Adapting to the SMB theme
---
 .../app/button/autofocus-composition-api.vue  |   2 +-
 .../demos/pc/app/button/autofocus.spec.ts     |   2 +-
 .../sites/demos/pc/app/button/autofocus.vue   |   2 +-
 .../button/basic-usage-composition-api.vue    |   6 +-
 .../demos/pc/app/button/basic-usage.spec.ts   |   8 +-
 .../sites/demos/pc/app/button/basic-usage.vue |   6 +-
 .../dynamic-disabled-composition-api.vue      |   4 +-
 .../pc/app/button/dynamic-disabled.spec.ts    |   4 +-
 .../demos/pc/app/button/dynamic-disabled.vue  |   4 +-
 .../pc/app/button/ghost-composition-api.vue   |   2 +-
 .../sites/demos/pc/app/button/ghost.spec.ts   |  26 ++--
 examples/sites/demos/pc/app/button/ghost.vue  |   2 +-
 .../pc/app/button/icon-composition-api.vue    |   4 +-
 examples/sites/demos/pc/app/button/icon.vue   |   4 +-
 .../pc/app/button/loading-composition-api.vue |   2 +-
 .../sites/demos/pc/app/button/loading.vue     |   2 +-
 packages/theme/src/button/index.less          |   9 ++
 packages/theme/src/button/smb-theme.js        | 122 +++++++++++++++++-
 packages/theme/src/button/vars.less           |   8 +-
 19 files changed, 173 insertions(+), 46 deletions(-)

diff --git a/examples/sites/demos/pc/app/button/autofocus-composition-api.vue b/examples/sites/demos/pc/app/button/autofocus-composition-api.vue
index 290578a36..081b3cccc 100644
--- a/examples/sites/demos/pc/app/button/autofocus-composition-api.vue
+++ b/examples/sites/demos/pc/app/button/autofocus-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button>默认按钮</tiny-button>
+    <tiny-button>次要按钮</tiny-button>
     <tiny-button autofocus>默认聚焦</tiny-button>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/button/autofocus.spec.ts b/examples/sites/demos/pc/app/button/autofocus.spec.ts
index 336dd1acb..90e075358 100644
--- a/examples/sites/demos/pc/app/button/autofocus.spec.ts
+++ b/examples/sites/demos/pc/app/button/autofocus.spec.ts
@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('测试是否有默认聚焦', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('button#autofocus')
-  await page.getByRole('button', { name: '默认按钮' }).click()
+  await page.getByRole('button', { name: '次要按钮' }).click()
   await page.getByRole('button', { name: '默认聚焦' }).click()
   const button = await page.getByRole('button', { name: '默认聚焦' })
   const hasAutofocus = await button.evaluate((button) => button.hasAttribute('autofocus'))
diff --git a/examples/sites/demos/pc/app/button/autofocus.vue b/examples/sites/demos/pc/app/button/autofocus.vue
index 7c315e072..d435dad6d 100644
--- a/examples/sites/demos/pc/app/button/autofocus.vue
+++ b/examples/sites/demos/pc/app/button/autofocus.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button>默认按钮</tiny-button>
+    <tiny-button>次要按钮</tiny-button>
     <tiny-button autofocus>默认聚焦</tiny-button>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue
index 22afd8853..11f02921a 100644
--- a/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue
@@ -1,24 +1,24 @@
 <template>
   <tiny-layout>
     <tiny-row>
-      <tiny-button>默认按钮</tiny-button>
       <tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
+      <tiny-button>次要按钮</tiny-button>
       <tiny-button type="success"> 成功按钮 </tiny-button>
       <tiny-button type="info"> 信息按钮 </tiny-button>
       <tiny-button type="warning"> 警告按钮 </tiny-button>
       <tiny-button type="danger"> 危险按钮 </tiny-button>
     </tiny-row>
     <tiny-row>
-      <tiny-button plain> 朴素按钮 </tiny-button>
       <tiny-button type="primary" plain> 主要按钮 </tiny-button>
+      <tiny-button plain>次要按钮 </tiny-button>
       <tiny-button type="success" plain> 成功按钮 </tiny-button>
       <tiny-button type="info" plain> 信息按钮 </tiny-button>
       <tiny-button type="warning" plain> 警告按钮 </tiny-button>
       <tiny-button type="danger" plain> 危险按钮 </tiny-button>
     </tiny-row>
     <tiny-row>
-      <tiny-button round> 圆角按钮 </tiny-button>
       <tiny-button type="primary" round> 主要按钮 </tiny-button>
+      <tiny-button round> 圆角按钮 </tiny-button>
       <tiny-button type="success" round> 成功按钮 </tiny-button>
       <tiny-button type="info" round> 信息按钮 </tiny-button>
       <tiny-button type="warning" round> 警告按钮 </tiny-button>
diff --git a/examples/sites/demos/pc/app/button/basic-usage.spec.ts b/examples/sites/demos/pc/app/button/basic-usage.spec.ts
index 61bf402df..418a695d9 100644
--- a/examples/sites/demos/pc/app/button/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/button/basic-usage.spec.ts
@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('测试默认按钮', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('button#base')
-  await expect(page.locator('.tiny-button').first()).toHaveClass(/tiny-button--default/)
+  await expect(page.getByRole('button', { name: '次要按钮' }).first()).toHaveClass(/tiny-button--default/)
   await expect(page.getByRole('button', { name: '主要按钮' }).first()).toHaveClass(/tiny-button--primary/)
   await expect(page.getByRole('button', { name: '成功按钮' }).first()).toHaveClass(/tiny-button--success/)
   await expect(page.getByRole('button', { name: '信息按钮' }).first()).toHaveClass(/tiny-button--info/)
@@ -14,7 +14,7 @@ test('测试默认按钮', async ({ page }) => {
 test('测试朴素按钮', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('button#base')
-  await expect(page.getByRole('button', { name: '朴素按钮' })).toHaveClass(/is-plain/)
+  await expect(page.getByRole('button', { name: '次要按钮' }).nth(1)).toHaveClass(/is-plain/)
   await expect(page.getByRole('button', { name: '主要按钮' }).nth(1)).toHaveClass(/tiny-button--primary is-plain/)
   await expect(page.getByRole('button', { name: '成功按钮' }).nth(1)).toHaveClass(/tiny-button--success is-plain/)
   await expect(page.getByRole('button', { name: '信息按钮' }).nth(1)).toHaveClass(/tiny-button--info is-plain/)
@@ -36,8 +36,8 @@ test('测试圆角按钮', async ({ page }) => {
 test('测试是否是圆形按钮', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('button#base')
-  await expect(page.locator('.tiny-button').first()).toHaveClass(/tiny-button--default/)
-  await expect(page.locator('button:nth-child(2)').first()).toHaveClass(/tiny-button--primary/)
+  await expect(page.getByRole('button', { name: '圆角按钮' })).toHaveClass(/tiny-button--default/)
+  await expect(page.getByRole('button', { name: '主要按钮' }).nth(2)).toHaveClass(/tiny-button--primary/)
   await expect(page.locator('button:nth-child(3)').first()).toHaveClass(/tiny-button--success/)
   await expect(page.locator('button:nth-child(4)').first()).toHaveClass(/tiny-button--info/)
   await expect(page.locator('button:nth-child(5)').first()).toHaveClass(/tiny-button--warning/)
diff --git a/examples/sites/demos/pc/app/button/basic-usage.vue b/examples/sites/demos/pc/app/button/basic-usage.vue
index a8c021efb..16d5f33eb 100644
--- a/examples/sites/demos/pc/app/button/basic-usage.vue
+++ b/examples/sites/demos/pc/app/button/basic-usage.vue
@@ -1,24 +1,24 @@
 <template>
   <tiny-layout>
     <tiny-row>
-      <tiny-button>默认按钮</tiny-button>
       <tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
+      <tiny-button>次要按钮</tiny-button>
       <tiny-button type="success"> 成功按钮 </tiny-button>
       <tiny-button type="info"> 信息按钮 </tiny-button>
       <tiny-button type="warning"> 警告按钮 </tiny-button>
       <tiny-button type="danger"> 危险按钮 </tiny-button>
     </tiny-row>
     <tiny-row>
-      <tiny-button plain> 朴素按钮 </tiny-button>
       <tiny-button type="primary" plain> 主要按钮 </tiny-button>
+      <tiny-button plain>次要按钮 </tiny-button>
       <tiny-button type="success" plain> 成功按钮 </tiny-button>
       <tiny-button type="info" plain> 信息按钮 </tiny-button>
       <tiny-button type="warning" plain> 警告按钮 </tiny-button>
       <tiny-button type="danger" plain> 危险按钮 </tiny-button>
     </tiny-row>
     <tiny-row>
-      <tiny-button round> 圆角按钮 </tiny-button>
       <tiny-button type="primary" round> 主要按钮 </tiny-button>
+      <tiny-button round> 圆角按钮 </tiny-button>
       <tiny-button type="success" round> 成功按钮 </tiny-button>
       <tiny-button type="info" round> 信息按钮 </tiny-button>
       <tiny-button type="warning" round> 警告按钮 </tiny-button>
diff --git a/examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue b/examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue
index fb756e6f9..200291f73 100644
--- a/examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue
@@ -2,8 +2,8 @@
   <tiny-layout>
     <tiny-row> 是否禁用：<tiny-switch v-model="disabled"></tiny-switch> </tiny-row>
     <tiny-row>
-      <tiny-button :disabled="disabled">默认按钮</tiny-button>
       <tiny-button type="primary" :disabled="disabled">主要按钮</tiny-button>
+      <tiny-button :disabled="disabled">次要按钮</tiny-button>
       <tiny-button type="success" :disabled="disabled">成功按钮</tiny-button>
       <tiny-button type="info" :disabled="disabled">信息按钮</tiny-button>
       <tiny-button type="warning" :disabled="disabled">警告按钮</tiny-button>
@@ -11,8 +11,8 @@
     </tiny-row>
 
     <tiny-row>
-      <tiny-button :disabled="disabled" plain>默认按钮</tiny-button>
       <tiny-button type="primary" :disabled="disabled" plain>主要按钮</tiny-button>
+      <tiny-button :disabled="disabled" plain>次要按钮</tiny-button>
       <tiny-button type="success" :disabled="disabled" plain>成功按钮</tiny-button>
       <tiny-button type="info" :disabled="disabled" plain>信息按钮</tiny-button>
       <tiny-button type="warning" :disabled="disabled" plain>警告按钮</tiny-button>
diff --git a/examples/sites/demos/pc/app/button/dynamic-disabled.spec.ts b/examples/sites/demos/pc/app/button/dynamic-disabled.spec.ts
index 966998aaf..9d2d44234 100644
--- a/examples/sites/demos/pc/app/button/dynamic-disabled.spec.ts
+++ b/examples/sites/demos/pc/app/button/dynamic-disabled.spec.ts
@@ -13,7 +13,7 @@ test('测试禁用状态是否生效', async ({ page }) => {
   await expect(demo.locator('.tiny-button').first()).toHaveCSS('background-color', 'rgb(245, 245, 246)')
   await expect(demo.locator('.tiny-button').first()).toHaveCSS('color', 'rgb(173, 176, 184)')
   await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(223, 225, 230)')
-  await expect(demo.getByRole('button', { name: '默认按钮' }).first()).toBeDisabled()
+  await expect(demo.getByRole('button', { name: '次要按钮' }).first()).toBeDisabled()
   await expect(demo.getByRole('button', { name: '主要按钮' }).first()).toBeDisabled()
   await expect(demo.getByRole('button', { name: '成功按钮' }).first()).toBeDisabled()
   await expect(ghostBtn).toHaveCSS('color', 'rgb(173, 176, 184)')
@@ -22,7 +22,7 @@ test('测试禁用状态是否生效', async ({ page }) => {
 
   await switchBtn.click()
   await expect(demo.locator('.tiny-button').first()).not.toBeDisabled()
-  await expect(demo.getByRole('button', { name: '默认按钮' }).first()).not.toBeDisabled()
+  await expect(demo.getByRole('button', { name: '次要按钮' }).first()).not.toBeDisabled()
   await expect(demo.getByRole('button', { name: '主要按钮' }).first()).not.toBeDisabled()
   await expect(demo.getByRole('button', { name: '成功按钮' }).first()).not.toBeDisabled()
 })
diff --git a/examples/sites/demos/pc/app/button/dynamic-disabled.vue b/examples/sites/demos/pc/app/button/dynamic-disabled.vue
index d0a246474..07c24b811 100644
--- a/examples/sites/demos/pc/app/button/dynamic-disabled.vue
+++ b/examples/sites/demos/pc/app/button/dynamic-disabled.vue
@@ -2,8 +2,8 @@
   <tiny-layout>
     <tiny-row> 是否禁用：<tiny-switch v-model="disabled"></tiny-switch> </tiny-row>
     <tiny-row>
-      <tiny-button :disabled="disabled">默认按钮</tiny-button>
       <tiny-button type="primary" :disabled="disabled">主要按钮</tiny-button>
+      <tiny-button :disabled="disabled">次要按钮</tiny-button>
       <tiny-button type="success" :disabled="disabled">成功按钮</tiny-button>
       <tiny-button type="info" :disabled="disabled">信息按钮</tiny-button>
       <tiny-button type="warning" :disabled="disabled">警告按钮</tiny-button>
@@ -11,8 +11,8 @@
     </tiny-row>
 
     <tiny-row>
-      <tiny-button :disabled="disabled" plain>朴素按钮</tiny-button>
       <tiny-button type="primary" :disabled="disabled" plain>主要按钮</tiny-button>
+      <tiny-button :disabled="disabled" plain>次要按钮</tiny-button>
       <tiny-button type="success" :disabled="disabled" plain>成功按钮</tiny-button>
       <tiny-button type="info" :disabled="disabled" plain>信息按钮</tiny-button>
       <tiny-button type="warning" :disabled="disabled" plain>警告按钮</tiny-button>
diff --git a/examples/sites/demos/pc/app/button/ghost-composition-api.vue b/examples/sites/demos/pc/app/button/ghost-composition-api.vue
index f5558de88..d3bfae3f7 100644
--- a/examples/sites/demos/pc/app/button/ghost-composition-api.vue
+++ b/examples/sites/demos/pc/app/button/ghost-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="gray-bg">
-    <tiny-button ghost reset-time="0">幽灵按钮</tiny-button>
     <tiny-button ghost type="primary" reset-time="0">主要按钮</tiny-button>
+    <tiny-button ghost reset-time="0">次要按钮</tiny-button>
     <tiny-button ghost type="success" reset-time="0">成功按钮</tiny-button>
     <tiny-button ghost type="info" reset-time="0">信息按钮</tiny-button>
     <tiny-button ghost type="warning" reset-time="0">告警按钮</tiny-button>
diff --git a/examples/sites/demos/pc/app/button/ghost.spec.ts b/examples/sites/demos/pc/app/button/ghost.spec.ts
index 425f0bc05..c47ab5c8f 100644
--- a/examples/sites/demos/pc/app/button/ghost.spec.ts
+++ b/examples/sites/demos/pc/app/button/ghost.spec.ts
@@ -7,28 +7,28 @@ test('幽灵按钮', async ({ page }) => {
   const demo = page.locator('#ghost')
   const getGhostBtn = (index: number) => demo.locator('.tiny-button').nth(index)
 
-  // 默认幽灵按钮
-  await page.waitForTimeout(1000)
-  await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(37, 43, 58)')
-  await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
-  await page.waitForTimeout(100)
-  await getGhostBtn(0).click()
-  await page.waitForTimeout(100)
+  // 主要幽灵按钮
   await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(94, 124, 224)')
   await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
+  await page.waitForTimeout(100)
+  await getGhostBtn(0).click()
+  await page.waitForTimeout(100)
+  await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(118, 147, 245)')
+  await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(118, 147, 245)')
 
-  // 主要幽灵按钮
-  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(94, 124, 224)')
+  // 默认幽灵按钮
+  await page.waitForTimeout(1000)
+  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(37, 43, 58)')
   await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
+  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
   await page.waitForTimeout(100)
   await getGhostBtn(1).click()
   await page.waitForTimeout(100)
-  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(118, 147, 245)')
+  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(94, 124, 224)')
   await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(118, 147, 245)')
+  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
 
   // 成功幽灵按钮
   await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(80, 212, 171)')
diff --git a/examples/sites/demos/pc/app/button/ghost.vue b/examples/sites/demos/pc/app/button/ghost.vue
index 5ee34287e..dbf529801 100644
--- a/examples/sites/demos/pc/app/button/ghost.vue
+++ b/examples/sites/demos/pc/app/button/ghost.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="gray-bg">
-    <tiny-button ghost reset-time="0">幽灵按钮</tiny-button>
     <tiny-button ghost reset-time="0" type="primary">主要按钮</tiny-button>
+    <tiny-button ghost reset-time="0">次要按钮</tiny-button>
     <tiny-button ghost reset-time="0" type="success">成功按钮</tiny-button>
     <tiny-button ghost reset-time="0" type="info">信息按钮</tiny-button>
     <tiny-button ghost reset-time="0" type="warning">告警按钮</tiny-button>
diff --git a/examples/sites/demos/pc/app/button/icon-composition-api.vue b/examples/sites/demos/pc/app/button/icon-composition-api.vue
index b7bb7b68b..c3d071633 100644
--- a/examples/sites/demos/pc/app/button/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/button/icon-composition-api.vue
@@ -2,16 +2,16 @@
   <div>
     <tiny-layout>
       <tiny-row>
-        <tiny-button :icon="TinyIconSearch"> 图标按钮 </tiny-button>
         <tiny-button type="primary" :icon="TinyIconEdit"> 图标按钮 </tiny-button>
+        <tiny-button :icon="TinyIconSearch"> 图标按钮 </tiny-button>
         <tiny-button type="success" :icon="TinyIconYes"> 图标按钮 </tiny-button>
         <tiny-button type="info" :icon="TinyIconMail"> 图标按钮 </tiny-button>
         <tiny-button type="warning" :icon="TinyIconStarO"> 图标按钮 </tiny-button>
         <tiny-button type="danger" :icon="TinyIconDel"> 图标按钮 </tiny-button>
       </tiny-row>
       <tiny-row>
-        <tiny-button :icon="TinyIconSearch"> </tiny-button>
         <tiny-button type="primary" :icon="TinyIconEdit"> </tiny-button>
+        <tiny-button :icon="TinyIconSearch"> </tiny-button>
         <tiny-button type="success" :icon="TinyIconYes"> </tiny-button>
         <tiny-button type="info" :icon="TinyIconMail"></tiny-button>
         <tiny-button type="warning" :icon="TinyIconStarO"></tiny-button>
diff --git a/examples/sites/demos/pc/app/button/icon.vue b/examples/sites/demos/pc/app/button/icon.vue
index 8bb0dc4f3..a05e03da2 100644
--- a/examples/sites/demos/pc/app/button/icon.vue
+++ b/examples/sites/demos/pc/app/button/icon.vue
@@ -2,16 +2,16 @@
   <div>
     <tiny-layout>
       <tiny-row>
-        <tiny-button :icon="IconSearch"> 图标按钮 </tiny-button>
         <tiny-button type="primary" :icon="IconEdit"> 图标按钮 </tiny-button>
+        <tiny-button :icon="IconSearch"> 图标按钮 </tiny-button>
         <tiny-button type="success" :icon="IconYes"> 图标按钮 </tiny-button>
         <tiny-button type="info" :icon="IconMail"> 图标按钮 </tiny-button>
         <tiny-button type="warning" :icon="IconStarO"> 图标按钮 </tiny-button>
         <tiny-button type="danger" :icon="IconDel"> 图标按钮 </tiny-button>
       </tiny-row>
       <tiny-row>
-        <tiny-button :icon="IconSearch"> </tiny-button>
         <tiny-button type="primary" :icon="IconEdit"> </tiny-button>
+        <tiny-button :icon="IconSearch"> </tiny-button>
         <tiny-button type="success" :icon="IconYes"> </tiny-button>
         <tiny-button type="info" :icon="IconMail"></tiny-button>
         <tiny-button type="warning" :icon="IconStarO"></tiny-button>
diff --git a/examples/sites/demos/pc/app/button/loading-composition-api.vue b/examples/sites/demos/pc/app/button/loading-composition-api.vue
index e009a2212..a62c125a5 100644
--- a/examples/sites/demos/pc/app/button/loading-composition-api.vue
+++ b/examples/sites/demos/pc/app/button/loading-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-button loading>加载中</tiny-button>
     <tiny-button type="primary" loading>加载中</tiny-button>
+    <tiny-button loading>加载中</tiny-button>
     <tiny-button type="success" loading>加载中</tiny-button>
     <tiny-button type="info" loading>加载中</tiny-button>
     <tiny-button type="warning" loading>加载中</tiny-button>
diff --git a/examples/sites/demos/pc/app/button/loading.vue b/examples/sites/demos/pc/app/button/loading.vue
index f42c39840..7eed01706 100644
--- a/examples/sites/demos/pc/app/button/loading.vue
+++ b/examples/sites/demos/pc/app/button/loading.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-button loading>加载中</tiny-button>
     <tiny-button type="primary" loading>加载中</tiny-button>
+    <tiny-button loading>加载中</tiny-button>
     <tiny-button type="success" loading>加载中</tiny-button>
     <tiny-button type="info" loading>加载中</tiny-button>
     <tiny-button type="warning" loading>加载中</tiny-button>
diff --git a/packages/theme/src/button/index.less b/packages/theme/src/button/index.less
index abe893f41..ba1b558bd 100644
--- a/packages/theme/src/button/index.less
+++ b/packages/theme/src/button/index.less
@@ -249,6 +249,15 @@
       var(--ti-button-size-mini-padding)
     );
   }
+  &&--default.is-plain {
+    border-color: var(--ti-button-plain-border-color);
+  }
+  &&--default.is-disabled.is-plain {
+    border-color: var(--ti-button-plain-disabled-border-color);
+  }
+  &&--default.is-plain:hover {
+    border-color: var(--ti-button-plain-hover-border-color);
+  }
 
   &&--primary {
     .button-type(
diff --git a/packages/theme/src/button/smb-theme.js b/packages/theme/src/button/smb-theme.js
index 9aa42335b..2ea88e7cb 100644
--- a/packages/theme/src/button/smb-theme.js
+++ b/packages/theme/src/button/smb-theme.js
@@ -20,9 +20,6 @@ export const tinyButtonSmbTheme = {
   'ti-button-size-medium-min-width': 'var(--ti-common-size-28x)',
   'ti-button-size-normal-min-width': 'var(--ti-common-size-24x)',
   'ti-button-size-small-min-width': 'var(--ti-common-size-18x)',
-  'ti-button-danger-plain-hover-bg-color': 'var(--ti-common-color-bg-minor-hover)',
-  'ti-button-danger-plain-hover-text-color': 'var(--ti-common-color-error-text)',
-  'ti-button-danger-plain-hover-border-color': 'var(--ti-common-color-error-border-secondary)',
   'ti-button-danger-plain-disabled-border-color': 'transparent',
   'ti-button-normal-hover-border-color': '#C2C2C2',
   'ti-button-size-large-font-size': 'var(--ti-common-font-size-base)',
@@ -79,5 +76,122 @@ export const tinyButtonSmbTheme = {
   'ti-button-ghost-disabled-text-color': '#c2c2c2',
   'ti-button-ghost-disabled-border-color': '#dbdbdb',
   'ti-button-ghost-hover-border-color': '#c2c2c2',
-  'ti-button-size-normal-padding': 'var(--ti-common-space-6)'
+  'ti-button-size-normal-padding': 'var(--ti-common-space-6)',
+
+  'ti-button-primary-text-color': 'var(--ti-common-color-text-white)',
+  'ti-button-primary-normal-bg-color': '#191919',
+  'ti-button-primary-normal-border-color': '#191919',
+  'ti-button-primary-hover-bg-color': '#595959',
+  'ti-button-primary-hover-border-color': '#595959',
+  'ti-button-primary-active-bg-color': '#191919',
+  'ti-button-primary-disabled-text-color': '#C2C2C2',
+  'ti-button-primary-plain-text-color': '#191919',
+  'ti-button-primary-plain-hover-text-color': '#191919',
+  'ti-button-primary-plain-bg-color': 'var(--ti-common-color-bg-minor)',
+  'ti-button-primary-plain-border-color': '#595959',
+  'ti-button-primary-plain-hover-border-color': '#FFFFFF',
+  'ti-button-primary-plain-hover-bg-color': 'var(--ti-common-color-bg-minor)',
+  'ti-button-primary-plain-disabled-bg-color': '#F0F0F0',
+  'ti-button-primary-disabled-border-color': '#F0F0F0',
+  'ti-button-primary-ghost-text-color': '#191919',
+  'ti-button-primary-ghost-hover-text-color': '#191919',
+  'ti-button-primary-ghost-disabled-text-color': '#C2C2C2',
+  'ti-button-primary-ghost-border-color': '#595959',
+  'ti-button-primary-ghost-hover-border-color': '#C2C2C2',
+  'ti-button-primary-ghost-disabled-border-color': '#F0F0F0',
+
+  'ti-button-plain-border-color': '#C2C2C2',
+  'ti-button-plain-hover-border-color': '#F5F5F5',
+  'ti-button-plain-disabled-border-color': '#F0F0F0',
+
+  'ti-button-success-text-color': 'var(--ti-common-color-text-white)',
+  'ti-button-success-normal-bg-color': '#5CB300',
+  'ti-button-success-normal-border-color': '#5CB300',
+  'ti-button-success-hover-bg-color': '#7DCC29',
+  'ti-button-success-hover-border-color': '#7DCC29',
+  'ti-button-success-active-bg-color': '#5CB300',
+  'ti-button-success-disabled-text-color': '#C2C2C2',
+  'ti-button-success-disabled-bg-color': '#F0F0F0',
+  'ti-button-success-plain-text-color': '#5CB300',
+  'ti-button-success-plain-hover-text-color': '#5CB300',
+  'ti-button-success-plain-bg-color': '#EDF7DF',
+  'ti-button-success-plain-hover-bg-color': '#EDF7DF',
+  'ti-button-success-plain-border-color': '#DAF2BB',
+  'ti-button-success-plain-hover-border-color': '#EDF7DF',
+  'ti-button-success-plain-disabled-bg-color': '#F0F0F0',
+  'ti-button-success-disabled-border-color': '#F0F0F0',
+  'ti-button-success-ghost-text-color': '#5CB300',
+  'ti-button-success-ghost-hover-text-color': '#5CB300',
+  'ti-button-success-ghost-disabled-text-color': '#C2C2C2',
+  'ti-button-success-ghost-border-color': '#5CB300',
+  'ti-button-success-ghost-hover-border-color': '#DAF2BB',
+  'ti-button-success-ghost-disabled-border-color': '#F0F0F0',
+
+  'ti-button-info-text-color': 'var(--ti-common-color-text-white)',
+  'ti-button-info-normal-bg-color': '#1476FF',
+  'ti-button-info-normal-border-color': '#1476FF',
+  'ti-button-info-hover-bg-color': '#4191FA',
+  'ti-button-info-hover-border-color': '#4191FA',
+  'ti-button-info-active-bg-color': '#1476FF',
+  'ti-button-info-disabled-text-color': '#C2C2C2',
+  'ti-button-info-disabled-bg-color': '#F0F0F0',
+  'ti-button-info-plain-text-color': '#1476FF',
+  'ti-button-info-plain-hover-text-color': '#1476FF',
+  'ti-button-info-plain-bg-color': '#F0F7FF',
+  'ti-button-info-plain-border-color': '#DEECFF',
+  'ti-button-info-plain-hover-bg-color': '#F0F7FF',
+  'ti-button-info-plain-hover-border-color': '#F0F7FF',
+  'ti-button-info-plain-disabled-bg-color': '#F0F0F0',
+  'ti-button-info-ghost-text-color': '#1476FF',
+  'ti-button-info-ghost-hover-text-color': '#1476FF',
+  'ti-button-info-ghost-disabled-text-color': '#C2C2C2',
+  'ti-button-info-ghost-border-color': '#1476FF',
+  'ti-button-info-ghost-hover-border-color': '#FAFAFA',
+  'ti-button-info-disabled-border-color': '#F0F0F0',
+  'ti-button-info-ghost-disabled-border-color': '#F0F0F0',
+
+  'ti-button-warning-text-color': 'var(--ti-common-color-text-white)',
+  'ti-button-warning-normal-bg-color': '#FF8800',
+  'ti-button-warning-normal-border-color': '#FF8800',
+  'ti-button-warning-hover-bg-color': '#FF9A2E',
+  'ti-button-warning-hover-border-color': '#FF9A2E',
+  'ti-button-warning-active-bg-color': '#FF8800',
+  'ti-button-warning-disabled-text-color': '#C2C2C2',
+  'ti-button-warning-disabled-bg-color': '#F0F0F0',
+  'ti-button-warning-plain-text-color': '#FF8800',
+  'ti-button-warning-plain-hover-text-color': '#FF8800',
+  'ti-button-warning-plain-bg-color': '#FFF4E8',
+  'ti-button-warning-plain-hover-bg-color': '#FFF4E8',
+  'ti-button-warning-plain-border-color': '#FFEBD1',
+  'ti-button-warning-plain-hover-border-color': '#FFF4E8',
+  'ti-button-warning-plain-disabled-bg-color': '#F0F0F0',
+  'ti-button-warning-disabled-border-color': '#F0F0F0',
+  'ti-button-warning-ghost-text-color': '#FF8800',
+  'ti-button-warning-ghost-hover-text-color': '#FF8800',
+  'ti-button-warning-ghost-disabled-text-color': '#C2C2C2',
+  'ti-button-warning-ghost-border-color': '#FF8800',
+  'ti-button-warning-ghost-hover-border-color': '#FFEBD1',
+  'ti-button-warning-ghost-disabled-border-color': '#F0F0F0',
+
+  'ti-button-danger-text-color': 'var(--ti-common-color-text-white)',
+  'ti-button-danger-normal-bg-color': '#F23030',
+  'ti-button-danger-normal-border-color': '#F23030',
+  'ti-button-danger-hover-bg-color': '#F76360',
+  'ti-button-danger-hover-border-color': '#F76360',
+  'ti-button-danger-active-bg-color': '#F23030',
+  'ti-button-danger-disabled-text-color': '#C2C2C2',
+  'ti-button-danger-disabled-bg-color': '#F0F0F0',
+  'ti-button-danger-plain-text-color': '#F23030',
+  'ti-button-danger-plain-hover-text-color': '#F23030',
+  'ti-button-danger-plain-hover-bg-color': '#FFF1F0',
+  'ti-button-danger-plain-border-color': '#FCE2E0',
+  'ti-button-danger-plain-hover-border-color': '#FFF1F0',
+  'ti-button-danger-plain-disabled-bg-color': '#F0F0F0',
+  'ti-button-danger-disabled-border-color': '#F0F0F0',
+  'ti-button-danger-ghost-text-color': '#F23030',
+  'ti-button-danger-ghost-hover-text-color': '#F23030',
+  'ti-button-danger-ghost-disabled-text-color': '#C2C2C2',
+  'ti-button-danger-ghost-border-color': '#F23030',
+  'ti-button-danger-ghost-hover-border-color': '#FCE2E0',
+  'ti-button-danger-ghost-disabled-border-color': '#F0F0F0'
 }
diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less
index ac9dccf65..411e87e41 100644
--- a/packages/theme/src/button/vars.less
+++ b/packages/theme/src/button/vars.less
@@ -100,6 +100,10 @@
   --ti-button-normal-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
   // 禁用类默认按钮背景色
   --ti-button-normal-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
+  // 默认 朴素 边框色
+  --ti-button-plain-border-color: var(--ti-common-color-border, #adb0b8);
+  // 默认 朴素 禁用边框色
+  --ti-button-plain-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
 
   // 文字按钮文本色
   --ti-button-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
@@ -440,9 +444,9 @@
   --ti-button-text-size-mini-svg-height: 1em;
 
   // 纯图标按钮最小宽度
-  --ti-button-icon-font-size: var(--ti-common-font-size-1);
+  --ti-button-icon-font-size: var(--ti-common-font-size-0, 12px);
   // 纯图标/文字按钮宽度
-  --ti-button-only-icon-width: var(--ti-common-size-7x);
+  --ti-button-only-icon-width: var(ti-common-size-width-minor, 30px);
   --ti-button-only-icon-min-width: unset;
   --ti-button-only-icon-text-width: unset;
   // 纯图标按钮水平内边距