Skip to content

Commit 852c07d

Browse files
Youyou-smilesYouyou-smiles
authored
feat(button): [button] Adapting to the SMB theme (#2104)
* feat(button): [button] Adapting to the SMB theme * feat(button): [button] Adapting to the SMB theme * feat(button): [button] Adapting to the SMB theme
1 parent 6573708 commit 852c07d

File tree

7 files changed

+46
-43
lines changed

7 files changed

+46
-43
lines changed

‎examples/sites/demos/pc/app/button/dynamic-disabled.spec.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ test('测试禁用状态是否生效', async ({ page }) => {
1010

1111
await switchBtn.click()
1212
await expect(demo.locator('.tiny-button').first()).toBeDisabled()
13-
await expect(demo.locator('.tiny-button').first()).toHaveCSS('background-color', 'rgb(245, 245, 246)')
14-
await expect(demo.locator('.tiny-button').first()).toHaveCSS('color', 'rgb(173, 176, 184)')
15-
await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(223, 225, 230)')
13+
await expect(demo.locator('.tiny-button').first()).toHaveCSS('background-color', 'rgb(240, 240, 240)')
14+
await expect(demo.locator('.tiny-button').first()).toHaveCSS('color', 'rgb(194, 194, 194)')
15+
await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(240, 240, 240)')
1616
await expect(demo.getByRole('button', { name: '次要按钮' }).first()).toBeDisabled()
1717
await expect(demo.getByRole('button', { name: '主要按钮' }).first()).toBeDisabled()
1818
await expect(demo.getByRole('button', { name: '成功按钮' }).first()).toBeDisabled()
19-
await expect(ghostBtn).toHaveCSS('color', 'rgb(173, 176, 184)')
19+
await expect(ghostBtn).toHaveCSS('color', 'rgb(194, 194, 194)')
2020
await expect(ghostBtn).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
21-
await expect(ghostBtn).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
21+
await expect(ghostBtn).toHaveCSS('border-bottom-color', 'rgb(219, 219, 219)')
2222

2323
await switchBtn.click()
2424
await expect(demo.locator('.tiny-button').first()).not.toBeDisabled()

‎examples/sites/demos/pc/app/button/ghost.spec.ts

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,69 +8,69 @@ test('幽灵按钮', async ({ page }) => {
88
const getGhostBtn = (index: number) => demo.locator('.tiny-button').nth(index)
99

1010
// 主要幽灵按钮
11-
await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(94, 124, 224)')
11+
await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(25, 25, 25)')
1212
await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
13-
await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
13+
await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(89, 89, 89)')
1414
await page.waitForTimeout(100)
1515
await getGhostBtn(0).click()
1616
await page.waitForTimeout(100)
17-
await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(118, 147, 245)')
17+
await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(25, 25, 25)')
1818
await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
19-
await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(118, 147, 245)')
19+
await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)')
2020

21-
// 默认幽灵按钮
21+
// 次要幽灵按钮
2222
await page.waitForTimeout(1000)
23-
await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(37, 43, 58)')
23+
await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(89, 89, 89)')
2424
await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
25-
await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
25+
await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(89, 89, 89)')
2626
await page.waitForTimeout(100)
2727
await getGhostBtn(1).click()
2828
await page.waitForTimeout(100)
29-
await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(94, 124, 224)')
29+
await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(89, 89, 89)')
3030
await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
31-
await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
31+
await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(219, 219, 219)')
3232

3333
// 成功幽灵按钮
34-
await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(80, 212, 171)')
34+
await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(92, 179, 0)')
3535
await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
36-
await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(80, 212, 171)')
36+
await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(92, 179, 0)')
3737
await page.waitForTimeout(100)
3838
await getGhostBtn(2).click()
3939
await page.waitForTimeout(100)
40-
await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(172, 242, 220)')
40+
await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(92, 179, 0)')
4141
await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
42-
await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(172, 242, 220)')
42+
await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(218, 242, 187)')
4343

4444
// 信息幽灵按钮
45-
await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(37, 43, 58)')
45+
await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(20, 118, 255)')
4646
await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
47-
await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(37, 43, 58)')
47+
await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(20, 118, 255)')
4848
await page.waitForTimeout(100)
4949
await getGhostBtn(3).click()
5050
await page.waitForTimeout(100)
51-
await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(92, 97, 115)')
51+
await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(20, 118, 255)')
5252
await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
53-
await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(92, 97, 115)')
53+
await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(222, 236, 255)')
5454

5555
// 告警幽灵按钮
56-
await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(250, 152, 65)')
56+
await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(255, 136, 0)')
5757
await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
58-
await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(250, 152, 65)')
58+
await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(255, 136, 0)')
5959
await page.waitForTimeout(100)
6060
await getGhostBtn(4).click()
6161
await page.waitForTimeout(100)
62-
await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(250, 194, 10)')
62+
await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(255, 136, 0)')
6363
await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
64-
await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(250, 194, 10)')
64+
await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(255, 235, 209)')
6565

6666
// 危险幽灵按钮
67-
await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(199, 0, 11)')
67+
await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(242, 48, 48)')
6868
await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
69-
await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(199, 0, 11)')
69+
await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(242, 48, 48)')
7070
await page.waitForTimeout(100)
7171
await getGhostBtn(5).click()
7272
await page.waitForTimeout(100)
73-
await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(214, 74, 82)')
73+
await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(242, 48, 48)')
7474
await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
75-
await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(214, 74, 82)')
75+
await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(252, 226, 224)')
7676
})

‎examples/sites/demos/pc/app/button/size.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ test('测试按钮尺寸', async ({ page }) => {
1414
// 判断高度是否正确
1515
await expect(demo.getByRole('button', { name: '超大按钮' }).first()).toHaveCSS('height', '48px')
1616
await expect(demo.getByRole('button', { name: '中等按钮' }).first()).toHaveCSS('height', '40px')
17-
await expect(demo.getByRole('button', { name: '小型按钮' }).first()).toHaveCSS('height', '32px')
18-
await expect(demo.getByRole('button', { name: '默认按钮' }).first()).toHaveCSS('height', '28px')
17+
await expect(demo.getByRole('button', { name: '小型按钮' }).first()).toHaveCSS('height', '28px')
18+
await expect(demo.getByRole('button', { name: '默认按钮' }).first()).toHaveCSS('height', '32px')
1919
await expect(demo.getByRole('button', { name: '超小按钮' }).first()).toHaveCSS('height', '24px')
2020
})

‎examples/sites/demos/pc/app/button/text.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@ test('测试按钮文字', async ({ page }) => {
1313
await expect(demo.locator('.tiny-button').nth(5)).toHaveClass(/tiny-button--text/)
1414

1515
// 纯文本和图标加文本的字体颜色不一样
16-
await expect(demo.locator('.tiny-button').nth(2)).toHaveCSS('color', 'rgb(94, 124, 224)')
17-
await expect(demo.locator('.tiny-button').nth(4)).toHaveCSS('color', 'rgb(37, 43, 58)')
16+
await expect(demo.locator('.tiny-button').nth(2)).toHaveCSS('color', 'rgb(20, 118, 255)')
17+
await expect(demo.locator('.tiny-button').nth(4)).toHaveCSS('color', 'rgb(25, 25, 25)')
1818
})

‎packages/theme/src/button/index.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@
104104

105105
&.is-ghost {
106106
background-color: transparent;
107+
color: var(--ti-button-ghost-text-color);
107108

108109
&:active,
109110
&:focus,

‎packages/theme/src/button/vars.less

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
--ti-button-size-medium-margin-left: 16px;
5858

5959
// 小型按钮高度
60-
--ti-button-size-small-height: var(--ti-common-size-height-small, 32px);
60+
--ti-button-size-small-height: 28px;
6161
// 小型按钮字号
6262
--ti-button-size-small-font-size: 12px;
6363
// 小尺寸按钮水平内边距
@@ -104,6 +104,8 @@
104104
--ti-button-plain-border-color: #C2C2C2;
105105
// 默认 朴素 禁用边框色
106106
--ti-button-plain-disabled-border-color: #F0F0F0;
107+
// 默认 朴素 悬浮边框色
108+
--ti-button-plain-hover-border-color: #F5F5F5;
107109

108110
// 文字按钮文本色
109111
--ti-button-text-color: var(--ti-common-color-text-highlight);
@@ -308,17 +310,17 @@
308310
--ti-button-info-plain-disabled-bg-color: #F0F0F0;
309311

310312
// 默认类型幽灵按钮文本色
311-
--ti-button-ghost-text-color: var(--ti-common-color-text-primary, #252b3a);
313+
--ti-button-ghost-text-color: #595959;
312314
// 默认类型幽灵按钮边框色
313315
--ti-button-ghost-border-color: var(--ti-common-color-border, #adb0b8);
314316
// 默认类型幽灵按钮悬浮文本色
315-
--ti-button-ghost-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
317+
--ti-button-ghost-hover-text-color: #595959;
316318
// 默认类型幽灵按钮悬浮边框色
317-
--ti-button-ghost-hover-border-color: #c2c2c2;
319+
--ti-button-ghost-hover-border-color: #DBDBDB;
318320
// 默认类型幽灵按钮禁用文本色
319321
--ti-button-ghost-disabled-text-color: #c2c2c2;
320322
// 默认类型幽灵按钮禁用边框色
321-
--ti-button-ghost-disabled-border-color: #dbdbdb;
323+
--ti-button-ghost-disabled-border-color: #DBDBDB;
322324
// 主要类型幽灵按钮文本色
323325
--ti-button-primary-ghost-text-color: #191919;
324326
// 主要类型幽灵按钮边框色
@@ -350,7 +352,7 @@
350352
// 信息类型幽灵按钮悬浮文本色
351353
--ti-button-info-ghost-hover-text-color: #1476FF;
352354
// 信息类型幽灵按钮悬浮边框色
353-
--ti-button-info-ghost-hover-border-color: #FAFAFA;
355+
--ti-button-info-ghost-hover-border-color: #DEECFF;
354356
// 信息类型幽灵按钮禁用文本色
355357
--ti-button-info-ghost-disabled-text-color: #C2C2C2;
356358
// 信息类型幽灵按钮禁用边框色
@@ -440,7 +442,7 @@
440442
// 纯图标按钮水平内边距
441443
--ti-button-only-icon-padding-horizontal: 7px;
442444
// 纯图标按钮边框圆角
443-
--ti-button-only-icon-border-radius: var(--ti-common-border-radius-1);
445+
--ti-button-only-icon-border-radius: var(--ti-common-border-radius-3);
444446
// 纯图标按钮边框颜色
445447
--ti-button-only-icon-border-color: #c2c2c2;
446448
// 纯图标按钮悬浮时边框颜色

‎packages/vue/src/button/src/pc.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
<script lang="ts">
4545
import { renderless, api } from '@opentiny/vue-renderless/button/vue'
4646
import { props, setup, defineComponent } from '@opentiny/vue-common'
47-
import { iconLoading } from '@opentiny/vue-icon'
47+
import { iconLoadingShadow } from '@opentiny/vue-icon'
4848
import type { IButtonApi } from '@opentiny/vue-renderless/types/button.type'
4949
import '@opentiny/vue-theme/button/index.less'
5050
@@ -68,7 +68,7 @@ export default defineComponent({
6868
'customClass',
6969
'ghost'
7070
],
71-
components: { IconLoading: iconLoading() },
71+
components: { IconLoading: iconLoadingShadow() },
7272
setup(props, context) {
7373
return setup({ props, context, renderless, api }) as unknown as IButtonApi
7474
}

0 commit comments

Comments
 (0)