Skip to content

Commit fa4e5e9

Browse files
committed
fix(button): [button] fix the style of dark themes
1 parent 71891fd commit fa4e5e9

File tree

4 files changed

+48
-11
lines changed

4 files changed

+48
-11
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<div>
33
<tiny-button type="primary" loading>加载中</tiny-button>
4+
<br />
5+
<br />
6+
<tiny-button loading>加载中</tiny-button>
47
</div>
58
</template>
69

examples/sites/demos/pc/app/button/loading.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<div>
33
<tiny-button type="primary" loading>加载中</tiny-button>
4+
<br />
5+
<br />
6+
<tiny-button loading>加载中</tiny-button>
47
</div>
58
</template>
69

packages/theme/src/button/index.less

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -111,12 +111,14 @@
111111
&:active,
112112
&:focus,
113113
&:hover,
114-
&.is-active {
114+
&.is-active,
115+
&.is-loading.is-loading.is-loading.is-loading.is-loading {
115116
background-color: e(@bg);
116117
border-color: e(@border);
117118
color: e(@c);
118119
}
119120
}
121+
120122
// 激活态: 叠加到 ghost 状态上。
121123
.color-ghost-active-mixin(@theme) {
122124
@border: %('var(--tv-Button-border-color-ghost-active-%a)', @theme);
@@ -221,9 +223,8 @@
221223

222224
// 禁用态+loading 优先级最高, 五优先级
223225
&.is-disabled.is-disabled.is-disabled.is-disabled.is-disabled,
224-
&.is-loading.is-loading.is-loading.is-loading.is-loading,
225226
&[disabled][disabled][disabled][disabled][disabled] {
226-
color: var(--tv-Button-text-color-disabled);
227+
color: var(--tv-Button-text-color-disabled);
227228
background-color: var(--tv-Button-bg-color-disabled);
228229
border-color: var(--tv-Button-border-color-disabled);
229230
fill: var(--tv-Button-icon-color-disabled);
@@ -232,9 +233,29 @@
232233
&.is-ghost {
233234
border-color: var(--tv-Button-border-color-ghost-disabled);
234235
}
235-
// 仅图标,禁用时无背景
236+
236237
&.is-only-icon {
237-
background-color: transparent;
238+
.tiny-svg {
239+
fill: var(--tv-Button-icon-color-disabled);
240+
}
241+
// 仅图标且无边框类型,禁用时无背景
242+
&.tiny-button--text {
243+
background-color: transparent;
244+
}
245+
}
246+
}
247+
248+
&.is-loading {
249+
&.@{button-prefix-cls}--default {
250+
.tiny-svg {
251+
fill: var(--tv-Button-icon-color-default-loading);
252+
}
253+
}
254+
255+
&.@{button-prefix-cls}--primary {
256+
.tiny-svg {
257+
fill: var(--tv-Button-icon-color-primary-loading);
258+
}
238259
}
239260
}
240261

@@ -316,7 +337,7 @@
316337
background-color: var(--tv-Button-bg-color-only-icon-ontext);
317338
// 无边框时的仅图标按钮,增加图标默认颜色
318339
svg {
319-
fill: var(--tv-Button-bg-color-only-icon)
340+
fill: var(--tv-Button-bg-color-only-icon);
320341
}
321342
&:active,
322343
&:focus,
@@ -325,7 +346,7 @@
325346
background-color: var(--tv-Button-bg-color-only-icon-ontext-hover);
326347
// 无边框时的仅图标按钮,增加图标悬浮颜色
327348
svg {
328-
fill: var(--tv-Button-bg-color-only-icon-hover)
349+
fill: var(--tv-Button-bg-color-only-icon-hover);
329350
}
330351
}
331352
// 不同的尺寸,icon大小 为高度。 原型稿不包含
@@ -352,7 +373,7 @@
352373
&.is-disabled {
353374
&:hover {
354375
svg {
355-
fill: var(--tv-Button-disabled-color-only-icon-hover)
376+
fill: var(--tv-Button-disabled-color-only-icon-hover);
356377
}
357378
}
358379
}

packages/theme/src/button/vars.less

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,8 @@
9090
--tv-Button-border-color-default: var(--tv-color-border-secondary, #595959);
9191
// 默认时按钮图标色
9292
--tv-Button-icon-color-default: var(--tv-color-icon-control, #191919);
93+
// 默认时按钮加载图标色
94+
--tv-Button-icon-color-default-loading: var(--tv-color-icon-control, #191919);
9395

9496
// primary 主题时按钮文本色
9597
--tv-Button-text-color-primary: var(--tv-color-act-primary-text-inverse-tint, #ffffff);
@@ -99,6 +101,8 @@
99101
--tv-Button-border-color-primary: var(--tv-color-act-primary-border, #191919);
100102
// primary 主题时按钮图标色
101103
--tv-Button-icon-color-primary: var(--tv-color-icon-inverse-tint, #ffffff);
104+
// primary 主题时按钮加载图标色
105+
--tv-Button-icon-color-primary-loading: var(--tv-color-icon-inverse-tint, #ffffff);
102106

103107
// success 主题时按钮文本色
104108
--tv-Button-text-color-success: var(--tv-color-act-success-text-white, #ffffff);
@@ -218,7 +222,10 @@
218222
//------------------------------------------------------------------------------ // level 2结束 ----------------
219223

220224
// 默认时按钮激活的背景色
221-
--tv-Button-bg-color-active-default: var(--tv-color-bg-hover-secondary, #ffffff); // 现规范,激活态时,只影响边框和背景
225+
--tv-Button-bg-color-active-default: var(
226+
--tv-color-bg-hover-secondary,
227+
#ffffff
228+
); // 现规范,激活态时,只影响边框和背景
222229
// 默认时按钮激活的边框色
223230
--tv-Button-border-color-active-default: var(--tv-color-border-secondary-hover, #c2c2c2);
224231
// 默认时按钮激活的文本
@@ -308,11 +315,14 @@
308315
--tv-Button-border-color-ghost-active-info: var(--tv-color-act-info-border-active-1, #deecff); // level3 结束------
309316

310317
// 禁用时按钮文本色
311-
--tv-Button-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2); // 目前规则下,disabled优先级最高,所以变量少
318+
--tv-Button-text-color-disabled: var(
319+
--tv-color-text-disabled,
320+
#c2c2c2
321+
); // 目前规则下,disabled优先级最高,所以变量少
312322
// 禁用时按钮背景色
313323
--tv-Button-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
314324
// 禁用时按钮边框色
315-
--tv-Button-border-color-disabled: var(--tv-color-bg-disabled, #f0f0f0); // 设计边框是f0f0f0,没这个值,用背景色代替。
325+
--tv-Button-border-color-disabled: var(--tv-color-border-disabled, #dbdbdb);
316326
// 禁用时, 幽灵按钮的边框色
317327
--tv-Button-border-color-ghost-disabled: var(--tv-color-border-disabled, #dbdbdb);
318328
// 禁用时按钮图标色

0 commit comments

Comments
 (0)