Skip to content

Commit 7a0ce6f

Browse files
anlyyaoanlyyao
authored
feat(Button): support ghost + text button (#3163)
1 parent 673dee2 commit 7a0ce6f

File tree

3 files changed

+103
-65
lines changed

3 files changed

+103
-65
lines changed

‎src/button/README.en-US.md‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ t-class | \-
127127
t-class-icon | class name of icon
128128
t-class-loading | class name of loading
129129

130+
130131
### CSS Variables
131132

132133
The component provides the following CSS variables, which can be used to customize styles.
@@ -144,7 +145,7 @@ Name | Default Value | Description
144145
--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | -
145146
--td-button-danger-disabled-bg | @error-color-3 | -
146147
--td-button-danger-disabled-border-color | @error-color-3 | -
147-
--td-button-danger-disabled-color | @font-white-1 | -
148+
--td-button-danger-disabled-color | @error-color-disabled | -
148149
--td-button-danger-outline-active-bg-color | @bg-color-container-active | -
149150
--td-button-danger-outline-active-border-color | @error-color-7 | -
150151
--td-button-danger-outline-border-color | @button-danger-outline-color | -
@@ -157,14 +158,14 @@ Name | Default Value | Description
157158
--td-button-default-active-border-color | @bg-color-component-active | -
158159
--td-button-default-bg-color | @bg-color-component | -
159160
--td-button-default-border-color | @bg-color-component | -
160-
--td-button-default-color | @font-gray-1 | -
161+
--td-button-default-color | @text-color-primary | -
161162
--td-button-default-disabled-bg | @bg-color-component-disabled | -
162163
--td-button-default-disabled-border-color | @bg-color-component-disabled | -
163-
--td-button-default-disabled-color | @font-gray-4 | -
164+
--td-button-default-disabled-color | @text-color-disabled | -
164165
--td-button-default-outline-active-bg-color | @bg-color-container-active | -
165166
--td-button-default-outline-active-border-color | @component-border | -
166167
--td-button-default-outline-border-color | @component-border | -
167-
--td-button-default-outline-color | @font-gray-1 | -
168+
--td-button-default-outline-color | @text-color-primary | -
168169
--td-button-default-outline-disabled-color | @component-border | -
169170
--td-button-default-text-active-bg-color | @bg-color-container-active | -
170171
--td-button-extra-small-font-size | @font-size-base | -
@@ -176,9 +177,12 @@ Name | Default Value | Description
176177
--td-button-ghost-color | @bg-color-container | -
177178
--td-button-ghost-danger-border-color | @error-color | -
178179
--td-button-ghost-danger-color | @error-color | -
179-
--td-button-ghost-disabled-color | rgba(255, 255, 255, 0.35) | -
180+
--td-button-ghost-danger-hover-color | @error-color-active | -
181+
--td-button-ghost-disabled-color | @font-white-4 | -
182+
--td-button-ghost-hover-color | @font-white-2 | -
180183
--td-button-ghost-primary-border-color | @brand-color | -
181184
--td-button-ghost-primary-color | @brand-color | -
185+
--td-button-ghost-primary-hover-color | @brand-color-active | -
182186
--td-button-icon-border-radius | 8rpx | -
183187
--td-button-icon-spacer | @spacer | -
184188
--td-button-large-font-size | @font-size-m | -
@@ -227,4 +231,4 @@ Name | Default Value | Description
227231
--td-button-small-font-size | @font-size-base | -
228232
--td-button-small-height | 64rpx | -
229233
--td-button-small-icon-font-size | 36rpx | -
230-
--td-button-small-padding-horizontal | 24rpx | -
234+
--td-button-small-padding-horizontal | 24rpx | -

‎src/button/README.md‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ t-class | 根节点样式类
129129
t-class-icon | 图标样式类
130130
t-class-loading | 加载样式类
131131

132+
132133
### CSS Variables
133134

134135
组件提供了下列 CSS 变量，可用于自定义样式。
@@ -146,7 +147,7 @@ t-class-loading | 加载样式类
146147
--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | -
147148
--td-button-danger-disabled-bg | @error-color-3 | -
148149
--td-button-danger-disabled-border-color | @error-color-3 | -
149-
--td-button-danger-disabled-color | @font-white-1 | -
150+
--td-button-danger-disabled-color | @error-color-disabled | -
150151
--td-button-danger-outline-active-bg-color | @bg-color-container-active | -
151152
--td-button-danger-outline-active-border-color | @error-color-7 | -
152153
--td-button-danger-outline-border-color | @button-danger-outline-color | -
@@ -159,14 +160,14 @@ t-class-loading | 加载样式类
159160
--td-button-default-active-border-color | @bg-color-component-active | -
160161
--td-button-default-bg-color | @bg-color-component | -
161162
--td-button-default-border-color | @bg-color-component | -
162-
--td-button-default-color | @font-gray-1 | -
163+
--td-button-default-color | @text-color-primary | -
163164
--td-button-default-disabled-bg | @bg-color-component-disabled | -
164165
--td-button-default-disabled-border-color | @bg-color-component-disabled | -
165-
--td-button-default-disabled-color | @font-gray-4 | -
166+
--td-button-default-disabled-color | @text-color-disabled | -
166167
--td-button-default-outline-active-bg-color | @bg-color-container-active | -
167168
--td-button-default-outline-active-border-color | @component-border | -
168169
--td-button-default-outline-border-color | @component-border | -
169-
--td-button-default-outline-color | @font-gray-1 | -
170+
--td-button-default-outline-color | @text-color-primary | -
170171
--td-button-default-outline-disabled-color | @component-border | -
171172
--td-button-default-text-active-bg-color | @bg-color-container-active | -
172173
--td-button-extra-small-font-size | @font-size-base | -
@@ -178,9 +179,12 @@ t-class-loading | 加载样式类
178179
--td-button-ghost-color | @bg-color-container | -
179180
--td-button-ghost-danger-border-color | @error-color | -
180181
--td-button-ghost-danger-color | @error-color | -
181-
--td-button-ghost-disabled-color | rgba(255, 255, 255, 0.35) | -
182+
--td-button-ghost-danger-hover-color | @error-color-active | -
183+
--td-button-ghost-disabled-color | @font-white-4 | -
184+
--td-button-ghost-hover-color | @font-white-2 | -
182185
--td-button-ghost-primary-border-color | @brand-color | -
183186
--td-button-ghost-primary-color | @brand-color | -
187+
--td-button-ghost-primary-hover-color | @brand-color-active | -
184188
--td-button-icon-border-radius | 8rpx | -
185189
--td-button-icon-spacer | @spacer | -
186190
--td-button-large-font-size | @font-size-m | -
@@ -229,4 +233,4 @@ t-class-loading | 加载样式类
229233
--td-button-small-font-size | @font-size-base | -
230234
--td-button-small-height | 64rpx | -
231235
--td-button-small-icon-font-size | 36rpx | -
232-
--td-button-small-padding-horizontal | 24rpx | -
236+
--td-button-small-padding-horizontal | 24rpx | -

‎src/button/button.less‎

Lines changed: 83 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
@button-danger-color: var(--td-button-danger-color, @font-white-1);
5656
@button-danger-border-color: var(--td-button-danger-border-color, @error-color);
5757
@button-danger-bg-color: var(--td-button-danger-bg-color, @error-color);
58-
@button-danger-disabled-color: var(--td-button-danger-disabled-color, @font-white-1);
58+
@button-danger-disabled-color: var(--td-button-danger-disabled-color, @error-color-disabled);
5959
@button-danger-disabled-bg: var(--td-button-danger-disabled-bg, @error-color-3);
6060
@button-danger-disabled-border-color: var(--td-button-danger-disabled-border-color, @error-color-3);
6161
// default + outline
@@ -94,11 +94,14 @@
9494
// ghost 优先级高于 theme，固定透明背景，白色边框，白色字体
9595
@button-ghost-color: var(--td-button-ghost-color, @bg-color-container);
9696
@button-ghost-border-color: var(--td-button-ghost-border-color, @button-ghost-color);
97-
@button-ghost-disabled-color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
97+
@button-ghost-disabled-color: var(--td-button-ghost-disabled-color, @font-white-4);
98+
@button-ghost-hover-color: var(--td-button-ghost-hover-color, @font-white-2);
9899
@button-ghost-primary-color: var(--td-button-ghost-primary-color, @brand-color);
99100
@button-ghost-primary-border-color: var(--td-button-ghost-primary-border-color, @brand-color);
101+
@button-ghost-primary-hover-color: var(--td-button-ghost-primary-hover-color, @brand-color-active);
100102
@button-ghost-danger-color: var(--td-button-ghost-danger-color, @error-color);
101103
@button-ghost-danger-border-color: var(--td-button-ghost-danger-border-color, @error-color);
104+
@button-ghost-danger-hover-color: var(--td-button-ghost-danger-hover-color, @error-color-active);
102105

103106
// 激活态背景和边框色
104107
@button-default-active-bg-color: var(--td-button-default-active-bg-color, @bg-color-component-active);
@@ -194,6 +197,48 @@
194197
.button-theme(light);
195198
.button-theme(danger);
196199

200+
.ghost-theme(@theme) {
201+
@color: 'button-ghost-@{theme}-color';
202+
@hoverColor: 'button-ghost-@{theme}-hover-color';
203+
@borderColor: 'button-ghost-@{theme}-border-color';
204+
205+
&.@{button}--@{theme} when (@theme = primary), (@theme = danger) {
206+
color: @@color;
207+
208+
&,
209+
&::after {
210+
border-color: @@borderColor;
211+
}
212+
213+
&.@{button}--hover {
214+
color: @@hoverColor;
215+
216+
&,
217+
&::after {
218+
background-color: transparent;
219+
border-color: @@hoverColor;
220+
}
221+
}
222+
}
223+
224+
&.@{button}--@{theme} {
225+
&.@{button}--text.@{button}--hover,
226+
&.@{button}--text.@{button}--hover::after {
227+
background-color: @gray-color-10;
228+
}
229+
230+
&.@{button}--disabled {
231+
background-color: transparent;
232+
color: @button-ghost-disabled-color;
233+
234+
&,
235+
&::after {
236+
border-color: @button-ghost-disabled-color;
237+
}
238+
}
239+
}
240+
}
241+
197242
.@{button} {
198243
display: inline-flex;
199244
align-items: center;
@@ -222,7 +267,7 @@
222267

223268
&--text {
224269
color: @button-default-color;
225-
background-color: @bg-color-container;
270+
background-color: transparent;
226271

227272
&,
228273
&::after {
@@ -236,7 +281,7 @@
236281

237282
&.@{button}--primary {
238283
color: @button-primary-text-color;
239-
background-color: @bg-color-container;
284+
background-color: transparent;
240285

241286
&.@{button}--hover,
242287
&.@{button}--hover::after {
@@ -251,7 +296,7 @@
251296

252297
&.@{button}--danger {
253298
color: @button-danger-text-color;
254-
background-color: @bg-color-container;
299+
background-color: transparent;
255300

256301
&.@{button}--hover,
257302
&.@{button}--hover::after {
@@ -266,7 +311,7 @@
266311

267312
&.@{button}--light {
268313
color: @button-light-text-color;
269-
background-color: @bg-color-container;
314+
background-color: transparent;
270315

271316
&.@{button}--hover,
272317
&.@{button}--hover::after {
@@ -279,49 +324,6 @@
279324
}
280325
}
281326

282-
&--ghost {
283-
background-color: transparent;
284-
color: @button-ghost-color;
285-
286-
&,
287-
&::after {
288-
border-color: @button-ghost-border-color;
289-
}
290-
291-
&.@{button}--hover,
292-
&.@{button}--hover::after {
293-
background: none;
294-
}
295-
296-
&.@{button}--primary {
297-
color: @button-ghost-primary-color;
298-
299-
&,
300-
&::after {
301-
border-color: @button-ghost-primary-border-color;
302-
}
303-
}
304-
305-
&.@{button}--danger {
306-
color: @button-ghost-danger-color;
307-
308-
&,
309-
&::after {
310-
border-color: @button-ghost-danger-border-color;
311-
}
312-
}
313-
314-
&.@{button}--disabled {
315-
background-color: transparent;
316-
color: @button-ghost-disabled-color;
317-
318-
&,
319-
&::after {
320-
border-color: @button-ghost-disabled-color;
321-
}
322-
}
323-
}
324-
325327
&--outline {
326328
color: @button-default-outline-color;
327329
background-color: @bg-color-container;
@@ -438,6 +440,10 @@
438440
border-style: dashed;
439441
border-width: 2rpx;
440442

443+
&::after {
444+
border: 0;
445+
}
446+
441447
&.@{button}--hover,
442448
&.@{button}--hover::after {
443449
background-color: @button-default-outline-active-bg-color;
@@ -447,30 +453,29 @@
447453
&.@{button}--primary {
448454
color: @button-primary-dashed-color;
449455

456+
&,
450457
&::after {
451458
border-color: @button-primary-dashed-border-color;
452-
border: 0;
453459
}
454-
border-color: @button-primary-dashed-border-color;
455460

456461
&.@{button}--disabled {
457462
background-color: @bg-color-container;
458463
color: @button-primary-dashed-disabled-color;
459464

465+
&,
460466
&::after {
461467
border-color: @button-primary-dashed-disabled-color;
462468
}
463-
border-color: @button-primary-dashed-disabled-color;
464469
}
465470
}
466471

467472
&.@{button}--danger {
468473
color: @button-danger-dashed-color;
469474

475+
&,
470476
&::after {
471477
border-color: @button-danger-dashed-border-color;
472478
}
473-
border-color: @button-danger-dashed-border-color;
474479

475480
&.@{button}--disabled {
476481
background-color: transparent;
@@ -483,6 +488,31 @@
483488
}
484489
}
485490

491+
&--ghost {
492+
background-color: transparent;
493+
color: @button-ghost-color;
494+
495+
&,
496+
&::after {
497+
border-color: @button-ghost-border-color;
498+
}
499+
500+
&.@{button}--default.@{button}--hover {
501+
color: @button-ghost-hover-color;
502+
503+
&,
504+
&::after {
505+
background-color: transparent;
506+
border-color: @button-ghost-hover-color;
507+
}
508+
}
509+
510+
// 不考虑 ghost + light 场景
511+
.ghost-theme(primary);
512+
.ghost-theme(danger);
513+
.ghost-theme(default);
514+
}
515+
486516
&__loading + &__content:not(:empty),
487517
&__icon + &__content:not(:empty) {
488518
margin-left: 8rpx;

0 commit comments

Comments
 (0)