Leon19656
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

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
This commit is contained in:
东风使命必达 2024-09-05 23:32:45 -07:00 committed by GitHub
parent 4a42977ce1
commit d10978ab57
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 173 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/sites/demos/pc/app/button/autofocus-composition-api.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<tiny-button>默认按钮</tiny-button>
<tiny-button>次要按钮</tiny-button>
<tiny-button autofocus>默认聚焦</tiny-button>
</div>
</template>

2
examples/sites/demos/pc/app/button/autofocus.spec.ts
View File

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

2
examples/sites/demos/pc/app/button/autofocus.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<tiny-button>默认按钮</tiny-button>
<tiny-button>次要按钮</tiny-button>
<tiny-button autofocus>默认聚焦</tiny-button>
</div>
</template>

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

@ -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>

8
examples/sites/demos/pc/app/button/basic-usage.spec.ts
View File

@ -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/)

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

@ -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>

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

@ -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>

4
examples/sites/demos/pc/app/button/dynamic-disabled.spec.ts
View File

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

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

@ -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>

2
examples/sites/demos/pc/app/button/ghost-composition-api.vue
View File

@ -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>

26
examples/sites/demos/pc/app/button/ghost.spec.ts
View File

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

2
examples/sites/demos/pc/app/button/ghost.vue
View File

@ -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>

4
examples/sites/demos/pc/app/button/icon-composition-api.vue
View File

@ -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>

4
examples/sites/demos/pc/app/button/icon.vue
View File

@ -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>

2
examples/sites/demos/pc/app/button/loading-composition-api.vue
View File

@ -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>

2
examples/sites/demos/pc/app/button/loading.vue
View File

@ -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>

9
packages/theme/src/button/index.less
View File

@ -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(

122
packages/theme/src/button/smb-theme.js
View File

@ -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'
}

8
packages/theme/src/button/vars.less
View File

@ -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;
// 纯图标按钮水平内边距