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

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>

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'))

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>

examples/sites/demos/pc/app/button/basic-usage-composition-api.vue

@@ -1,29 +1,23 @@
 <template>
   <tiny-layout>
+    <p>基本按钮</p>
     <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>
+    <p>朴素按钮</p>
     <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 type="success" round> 成功按钮 </tiny-button>
-      <tiny-button type="info" round> 信息按钮 </tiny-button>
-      <tiny-button type="warning" round> 警告按钮 </tiny-button>
-      <tiny-button type="danger" round> 危险按钮 </tiny-button>
-    </tiny-row>
     <tiny-row>
       <tiny-button :icon="IconSearch" circle></tiny-button>
       <tiny-button type="primary" :icon="IconEdit" circle></tiny-button>
@@ -49,7 +43,7 @@ const IconSearch = iconSearch()
 
 <style scoped>
 .tiny-row {
-  margin-bottom: 20px;
+  margin: 20px 0;
 }
 .tiny-button {
   margin-bottom: 10px;

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,32 +14,10 @@ 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/)
   await expect(page.getByRole('button', { name: '警告按钮' }).nth(1)).toHaveClass(/tiny-button--warning is-plain/)
   await expect(page.getByRole('button', { name: '危险按钮' }).nth(1)).toHaveClass(/tiny-button--danger is-plain/)
 })
-
-test('测试圆角按钮', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('button#base')
-  await expect(page.getByRole('button', { name: '圆角按钮' })).toHaveClass(/is-round/)
-  await expect(page.getByRole('button', { name: '主要按钮' }).nth(2)).toHaveClass(/tiny-button--primary is-round/)
-  await expect(page.getByRole('button', { name: '成功按钮' }).nth(2)).toHaveClass(/tiny-button--success is-round/)
-  await expect(page.getByRole('button', { name: '信息按钮' }).nth(2)).toHaveClass(/tiny-button--info is-round/)
-  await expect(page.getByRole('button', { name: '警告按钮' }).nth(2)).toHaveClass(/tiny-button--warning is-round/)
-  await expect(page.getByRole('button', { name: '危险按钮' }).nth(2)).toHaveClass(/tiny-button--danger is-round/)
-})
-
-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.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/)
-  await expect(page.locator('button:nth-child(6)').first()).toHaveClass(/tiny-button--danger/)
-})

examples/sites/demos/pc/app/button/basic-usage.vue

@@ -1,29 +1,23 @@
 <template>
   <tiny-layout>
+    <p>基本按钮</p>
     <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>
+    <p>朴素按钮</p>
     <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 type="success" round> 成功按钮 </tiny-button>
-      <tiny-button type="info" round> 信息按钮 </tiny-button>
-      <tiny-button type="warning" round> 警告按钮 </tiny-button>
-      <tiny-button type="danger" round> 危险按钮 </tiny-button>
-    </tiny-row>
     <tiny-row>
       <tiny-button :icon="IconSearch" circle></tiny-button>
       <tiny-button type="primary" :icon="IconEdit" circle></tiny-button>
@@ -60,7 +54,7 @@ export default {
 
 <style scoped>
 .tiny-row {
-  margin-bottom: 20px;
+  margin: 20px 0;
 }
 .tiny-button {
   margin-bottom: 10px;

examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue

@@ -2,17 +2,17 @@
   <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>
       <tiny-button type="danger" :disabled="disabled">危险按钮</tiny-button>
     </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>

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()
 })

examples/sites/demos/pc/app/button/dynamic-disabled.vue

@@ -2,17 +2,17 @@
   <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>
       <tiny-button type="danger" :disabled="disabled">危险按钮</tiny-button>
     </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>

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>

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('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(173, 176, 184)')
+  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(94, 124, 224)')
+  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(94, 124, 224)')
+  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)')

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>

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>

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>

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>

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>

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(