Skip to content

Commit 466796a

Browse files
MomoPoppyMomoPoppy
authored
fix(radio): [radio,select,tree-select,checkbox,radio,button] fix the style of dark themes (#3237)
* fix(select): [select] fix styles that have been disabled by the selected checkbox * fix(tree-select): [tree-select] repair horizontal spacing * fix(checkbox): [select,checkbox] fix the style of the checkbox * fix(radio): [radio] fix the style of dark themes * fix(button): [button] fix the style of dark themes * fix(test): [select,checkbox,button] fix test
1 parent 69e350f commit 466796a

File tree

14 files changed

+82
-55
lines changed

14 files changed

+82
-55
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ test('测试禁用状态是否生效', async ({ page }) => {
1212
await expect(demo.locator('.tiny-button').first()).toBeDisabled()
1313
await expect(demo.locator('.tiny-button').first()).toHaveCSS('background-color', 'rgb(240, 240, 240)')
1414
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)')
15+
await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(219, 219, 219)')
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()

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

+3
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

+3
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/checkbox/basic-usage.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ test('基础用法', async ({ page }) => {
55
await page.goto('checkbox#basic-usage')
66
const checkbox = await page.locator('.tiny-checkbox').first()
77
await expect(checkbox).toHaveClass(/is-checked/)
8-
await expect(checkbox.locator('.tiny-checkbox__inner svg path').first()).toHaveCSS('fill', 'rgb(20, 118, 255)')
8+
await expect(checkbox.locator('.tiny-checkbox__inner svg path').nth(1)).toHaveCSS('fill', 'rgb(20, 118, 255)')
99
await checkbox.click()
1010
await expect(checkbox).not.toHaveClass(/is-checked/)
1111
})

‎examples/sites/demos/pc/app/select/nest-radio-grid-much-data.spec.ts

+1
Original file line numberDiff line numberDiff line change
@@ -32,5 +32,6 @@ test('下拉表格大数据', async ({ page }) => {
3232
await expect(row).toHaveCount(6)
3333
await row.nth(5).scrollIntoViewIfNeeded()
3434
await expect(row).toHaveCount(6)
35+
await page.waitForTimeout(500)
3536
await page.getByRole('row', { name: '华南区 12 广东省 广州市' }).getByRole('cell').first().click()
3637
})

‎packages/theme/src/base/dark-theme.less

+2-2
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,7 @@
328328
--tv-color-icon-checked-disabled: var(--tv-base-color-brand-4); // #264DAB 图标禁用色-1 checkbox选中且禁用
329329
--tv-color-icon-control: var(--tv-base-color-common-4); //#B3B3B3 图标按钮 / 图标+文本按钮图标色,主要在按钮场景（稳定态图标色， hover时不用变化）
330330
--tv-color-icon-control-active: var(--tv-base-color-brand-7); // #317AF7 控件图标激活色，主要在checkbox、radio图标激活场景
331-
--tv-color-icon-control-disabled: rgba(255, 255, 255, 0.3); // rgba(255,255,255,0.15) 控件图标禁用色，主要在checkbox、radio图标禁用场景 (视觉效果是0.15透明度白色的边框和背景色重叠的效果，也就是0.3透明度）
331+
--tv-color-icon-control-disabled: rgba(255, 255, 255, 0.15); // rgba(255,255,255,0.15) 控件图标禁用色，主要在checkbox、radio图标禁用场景
332332
--tv-color-icon-link: var(--tv-base-color-brand-8); // #5291FF 链接图标色
333333
--tv-color-icon-warn-secondary: var(--tv-base-color-warn-secondary-1); // #ffb700 次要警告图标色 / 评分组件rate-图标色/状态图标-异常
334334
// -- 暗色新增 --
@@ -346,7 +346,7 @@
346346
--tv-color-bg-gray-2: rgba(255, 255, 255, 0.2); // rgba(255,255,255,0.2) 灰色背景-2：灰色标签背景色/进度条灰色背景
347347
--tv-color-bg-header: var(--tv-base-color-common-10); // #262626 表头背景色
348348
--tv-color-bg-mask: rgba(0, 0, 0, 70%); // 全局加载蒙层/抽屉弹窗蒙层
349-
--tv-color-bg-mask-block: rgb(26, 26, 26, 70%); // 模块内容加载蒙层
349+
--tv-color-bg-mask-block: rgba(26, 26, 26, 70%); // 模块内容加载蒙层
350350
--tv-color-bg-dark: var(--tv-base-color-common-11); // #1A1A1A 深色背景色 顶部导航/ 深色tab
351351

352352

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

+29-8
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

+13-3
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
// 禁用时按钮图标色

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

+10-18
Original file line numberDiff line numberDiff line change
@@ -150,46 +150,43 @@
150150
}
151151
}
152152

153-
&__input {
153+
&__input {
154154
.@{checkbox-prefix-cls}__inner {
155155
svg {
156156
font-size: var(--tv-Checkbox-icon-size);
157157
}
158+
158159
.icon-checked-sur,
159160
.icon-halfselect {
160161
fill: var(--tv-Checkbox-bg-color-active);
161162

162-
path:first-child {
163-
fill: var(--tv-Checkbox-bg-color-active);
164-
}
165163
path:last-child {
166164
fill: var(--tv-Checkbox-border-color-inverse);
167165
}
168166
}
167+
169168
.icon-check {
169+
fill: var(--tv-Checkbox-unchecked-border-color);
170+
170171
path:first-child {
171172
fill: transparent;
172173
}
173-
path:last-child {
174-
fill: var(--tv-Checkbox-unchecked-border-color);
175-
}
176174
}
175+
177176
.icon-check:hover {
178-
path:last-child {
179-
fill: var(--tv-Checkbox-unchecked-border-color-hover);
180-
}
177+
fill: var(--tv-Checkbox-unchecked-border-color-hover);
181178
}
182179
}
183180
}
181+
184182
&__input.is-disabled {
183+
cursor: not-allowed;
184+
185185
.@{checkbox-prefix-cls}__inner {
186186
.icon-checked-sur,
187187
.icon-halfselect {
188188
fill: var(--tv-Checkbox-checked-disabled-bg-color);
189189

190-
path:first-child {
191-
fill: var(--tv-Checkbox-checked-disabled-bg-color);
192-
}
193190
path:last-child {
194191
fill: var(--tv-Checkbox-icon-inverse-disabled);
195192
}
@@ -200,11 +197,6 @@
200197
path:first-child {
201198
fill: var(--tv-Checkbox-bg-color-disabled);
202199
}
203-
&:hover {
204-
path:last-child {
205-
fill: var(--tv-Checkbox-unchecked-border-color);
206-
}
207-
}
208200
}
209201
}
210202
}

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

+11-14
Original file line numberDiff line numberDiff line change
@@ -49,19 +49,21 @@
4949
.checked-sur.tiny-svg,
5050
.halfselect.tiny-svg {
5151
fill: var(--tv-Option-icon-color-checked);
52-
path:first-child {
53-
fill: var(--tv-Option-icon-color-checked);
54-
}
52+
5553
path:last-child {
5654
fill: var(--tv-Option-icon-inverse-disabled);
5755
}
5856
}
57+
5958
.check.tiny-svg {
59+
fill: var(--tv-Option-icon-color-unchecked);
60+
6061
path:first-child {
6162
fill: transparent;
6263
}
63-
path:last-child {
64-
fill: var(--tv-Option-unchecked-border-color);
64+
65+
&:hover {
66+
fill: var(--tv-Option-icon-color-hover);
6567
}
6668
}
6769

@@ -112,23 +114,18 @@
112114
&.checked-sur,
113115
&.halfselect {
114116
fill: var(--tv-Option-checked-disabled-bg-color);
115-
path:first-child {
116-
fill: var(--tv-Option-bg-color-active);
117-
}
117+
118118
path:last-child {
119-
fill: var(--tv-Option-icon-inverse-disabled);
119+
fill: var(--tv-Option-icon-color-checked-disabled-inverse);
120120
}
121121
}
122122

123123
&.check {
124+
fill: var(--tv-Option-icon-color-unchecked-disabled);
125+
124126
path:first-child {
125127
fill: var(--tv-Option-bg-color-disabled);
126128
}
127-
&:hover {
128-
path:last-child {
129-
fill: var(--tv-Option-unchecked-border-color);
130-
}
131-
}
132129
}
133130
}
134131
}

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030
--tv-Option-icon-color-unchecked: var(--tv-color-border, #c2c2c2);
3131
// 复选框选中色
3232
--tv-Option-icon-color-checked: var(--tv-color-icon-control-active, #1476ff);
33+
// 复选框悬浮色
34+
--tv-Option-icon-color-hover: var(--tv-color-icon-hover, #191919);
3335
// 复选框禁用色（选中）
3436
--tv-Option-icon-color-checked-disabled: var(--tv-color-icon-checked-disabled, #dbdbdb);
3537
// 复选框图标中心path禁用反色（选中）
@@ -57,8 +59,7 @@
5759
--tv-Option-border-color-inverse: var(--tv-color-text-inverse, #ffffff);
5860
// 复选框未选边框色
5961
--tv-Option-unchecked-border-color: var(--tv-color-border, #c2c2c2);
60-
// 复选框未选边框hover色
61-
--tv-Option-unchecked-border-color-hover: var(--tv-color-border-active, #191919);
62+
6263
// 复选框选中禁用背景色
6364
--tv-Option-checked-disabled-bg-color: var(--tv-color-icon-checked-disabled, #dbdbdb);
6465
// 复选框选中禁用边框色

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
// 单选框为选中且禁用状态时的背景色
3535
--tv-Radio-input-checked-disabled-bg-color: var(--tv-color-bg-secondary, #ffffff);
3636
// 单选框为选中且禁用状态时的边框色
37-
--tv-Radio-input-checked-disabled-border-color: var(--tv-color-border-disabled); // dark: 264dab, smb: #dbdbdb
37+
--tv-Radio-input-checked-disabled-border-color: var(--tv-color-icon-checked-disabled, #dbdbdb);
3838
// 单选框为输入框样式时禁用状态时的文本色
3939
--tv-Radio-input-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
4040
// 单选框单选按钮的背景色

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@
235235
content: '';
236236
position: absolute;
237237
top: calc(-1 * var(--tv-Tree-node-content-height) / 2);
238-
left: calc(var(--tv-Tree-node-padding-left) + var(--tv-Tree-node-showline-icon-size) / 2);
238+
left: calc(var(--tv-Tree-node-padding-x) + var(--tv-Tree-node-showline-icon-size) / 2);
239239
height: 100%;
240240
border-left: 1px solid var(--tv-Tree-node-guide-line-border-color);
241241
}
@@ -249,7 +249,7 @@
249249
&::before {
250250
content: '';
251251
position: absolute;
252-
left: calc(var(--tv-Tree-node-padding-left) + var(--tv-Tree-node-showline-icon-size) / 2);
252+
left: calc(var(--tv-Tree-node-padding-x) + var(--tv-Tree-node-showline-icon-size) / 2);
253253
top: 0;
254254
width: var(--tv-Tree-node-guide-line-width);
255255
height: calc(var(--tv-Tree-node-content-height) / 2);
@@ -337,7 +337,6 @@
337337
.@{tree-node-prefix-cls}__content-right {
338338
background-color: var(--tv-Tree-node-content-hover-bg-color);
339339
}
340-
341340
}
342341

343342
& label.@{css-prefix}checkbox,
@@ -358,7 +357,7 @@
358357
flex: 1 1 auto;
359358
height: 100%;
360359
overflow: hidden;
361-
padding-left: var(--tv-Tree-node-padding-left);
360+
padding: 0 var(--tv-Tree-node-padding-x);
362361

363362
& > svg {
364363
fill: var(--tv-Tree-node-operate-icon-color);

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
--tv-Tree-node-checked-icon-color: var(--tv-color-icon-hover, #191919);
6464

6565
// 节点左内边距
66-
--tv-Tree-node-padding-left: var(--tv-space-xl, 16px);
66+
--tv-Tree-node-padding-x: var(--tv-space-xl, 16px);
6767
// 节点高亮背景色
6868
--tv-Tree-node-highlight-bg-color: var(--tv-color-bg-active, #f5f5f5);
6969
// 节点内容高度

0 commit comments

Comments
 (0)