Skip to content

Commit ee5a148

Browse files
anlyyaoanlyyao
authored
feat(Checkbox&&Button): enrich css variable (#1530)
* feat(Checkbox&&Button): enrich css variable * fix: fix cr
1 parent cc7d3f9 commit ee5a148

File tree

3 files changed

+90
-14
lines changed

3 files changed

+90
-14
lines changed

‎example/project.config.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
"list": [
5959
{
6060
"id": -1,
61-
"name": "custom",
61+
"name": "button",
6262
"pathName": "pages/button/button",
6363
"query": "",
6464
"scene": null
@@ -98,6 +98,12 @@
9898
"name": "search",
9999
"pathName": "pages/search/search",
100100
"scene": null
101+
},
102+
{
103+
"id": -1,
104+
"name": "checkbox",
105+
"pathName": "pages/checkbox/checkbox",
106+
"scene": null
101107
}
102108
]
103109
}

‎src/button/button.less‎

Lines changed: 76 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,18 @@
5858
@button-danger-disabled-color: var(--td-button-danger-disabled-color, @text-anti-primary-color);
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);
61+
// default + outline
62+
@button-default-outline-color: var(--td-button-default-outline-color, @font-gray-1);
63+
@button-default-outline-border-color: var(--td-button-default-outline-border-color, @gray-color-4);
64+
@button-default-outline-disabled-color: var(--td-button-default-outline-disabled-color, @gray-color-4);
6165
// primary + outline
6266
@button-primary-outline-color: var(--td-button-primary-outline-color, @primary-color);
6367
@button-primary-outline-border-color: var(--td-button-primary-outline-border-color, @button-primary-outline-color);
6468
@button-primary-outline-disabled-color: var(--td-button-primary-outline-disabled-color, @primary-color-3);
6569
// danger + outline
6670
@button-danger-outline-color: var(--td-button-danger-outline-color, @error-color);
6771
@button-danger-outline-border-color: var(--td-button-danger-outline-border-color, @button-danger-outline-color);
68-
@button-danger-outline-disabled-color: var(--td-button-danger-outline-disabled-color, @button-danger-disabled-color);
72+
@button-danger-outline-disabled-color: var(--td-button-danger-outline-disabled-color, @error-color-3);
6973
// light + outline
7074
@button-light-outline-color: var(--td-button-light-outline-color, @primary-color);
7175
@button-light-outline-border-color: var(--td-button-light-outline-border-color, @button-light-outline-color);
@@ -96,13 +100,27 @@
96100
@button-ghost-danger-color: var(--td-button-ghost-danger-color, @error-color);
97101
@button-ghost-danger-border-color: var(--td-button-ghost-danger-border-color, @error-color);
98102

99-
// 激活态背景色
103+
// 激活态背景和边框色
100104
@button-default-active-bg-color: var(--td-button-default-active-bg-color, @gray-color-5);
105+
@button-default-active-border-color: var(--td-button-default-border-bg-color, @gray-color-5);
101106
@button-light-active-bg-color: var(--td-button-light-active-bg-color, @primary-color-2);
107+
@button-light-active-border-color: var(--td-button-light-active-border-color, @primary-color-2);
102108
@button-primary-active-bg-color: var(--td-button-primary-active-bg-color, @primary-color-9);
109+
@button-primary-active-border-color: var(--td-button-primary-active-border-color, @primary-color-9);
103110
@button-danger-active-bg-color: var(--td-button-danger-active-bg-color, @error-color-7);
104-
@button-outline-active-bg-color: var(--td-button-outline-active-bg-color, @gray-color-1);
105-
@button-text-active-bg-color: var(--td-button-text-active-bg-color, @primary-color-1);
111+
@button-danger-active-border-color: var(--td-button-danger-active-border-color, @error-color-7);
112+
@button-default-outline-active-bg-color: var(--td-button-default-outline-active-bg-color, @gray-color-3);
113+
@button-default-outline-active-border-color: var(--td-button-default-outline-active-border-color, @gray-color-4);
114+
@button-primary-outline-active-bg-color: var(--td-button-primary-outline-active-bg-color, @gray-color-3);
115+
@button-primary-outline-active-border-color: var(--td-button-primary-outline-active-border-color, @primary-color-9);
116+
@button-danger-outline-active-bg-color: var(--td-button-danger-outline-active-bg-color, @gray-color-3);
117+
@button-danger-outline-active-border-color: var(--td-button-danger-outline-active-border-color, @error-color-7);
118+
@button-light-outline-active-bg-color: var(--td-button-light-outline-active-bg-color, @primary-color-2);
119+
@button-light-outline-active-border-color: var(--td-button-light-outline-active-border-color, @primary-color-9);
120+
@button-default-text-active-bg-color: var(--td-button-default-text-active-bg-color, @gray-color-3);
121+
@button-primary-text-active-bg-color: var(--td-button-primary-text-active-bg-color, @gray-color-3);
122+
@button-danger-text-active-bg-color: var(--td-button-danger-text-active-bg-color, @gray-color-3);
123+
@button-light-text-active-bg-color: var(--td-button-light-text-active-bg-color, @gray-color-3);
106124

107125
@button: ~'@{prefix}-button';
108126

@@ -133,6 +151,7 @@
133151
@disabledBorderColor: 'button-@{theme}-disabled-border-color';
134152
@disabledBgColor: 'button-@{theme}-disabled-bg';
135153
@activeBgColor: 'button-@{theme}-active-bg-color';
154+
@activeBorderColor: 'button-@{theme}-active-border-color';
136155

137156
.@{button}--@{theme} {
138157
color: @@color;
@@ -147,6 +166,7 @@
147166
z-index: 0;
148167
&::after {
149168
background-color: @@activeBgColor;
169+
border-color: @@activeBorderColor;
150170
}
151171
}
152172

@@ -205,13 +225,17 @@
205225
}
206226

207227
&.@{button}--hover::after {
208-
background-color: @button-text-active-bg-color;
228+
background-color: @button-default-text-active-bg-color;
209229
}
210230

211231
&.@{button}--primary {
212232
color: @button-primary-text-color;
213233
background: none;
214234

235+
&.@{button}--hover::after {
236+
background-color: @button-primary-text-active-bg-color;
237+
}
238+
215239
&.@{button}--disabled {
216240
color: @button-primary-text-disabled-color;
217241
background: none;
@@ -222,6 +246,10 @@
222246
color: @button-danger-text-color;
223247
background: none;
224248

249+
&.@{button}--hover::after {
250+
background-color: @button-danger-text-active-bg-color;
251+
}
252+
225253
&.@{button}--disabled {
226254
color: @button-danger-text-disabled-color;
227255
background: none;
@@ -231,6 +259,10 @@
231259
&.@{button}--light {
232260
color: @button-light-text-color;
233261
background: none;
262+
263+
&.@{button}--hover::after {
264+
background-color: @button-light-text-active-bg-color;
265+
}
234266
}
235267

236268
&.@{button}--disabled {
@@ -277,14 +309,24 @@
277309
}
278310

279311
&--outline {
312+
color: @button-default-outline-color;
280313
background-color: transparent;
281314

282315
&::after {
283-
border-color: @button-default-border-color;
316+
border-color: @button-default-outline-border-color;
284317
}
285318

286319
&.@{button}--hover::after {
287-
background-color: @button-outline-active-bg-color;
320+
background-color: @button-default-outline-active-bg-color;
321+
border-color: @button-default-outline-active-border-color;
322+
}
323+
324+
&.@{button}--disabled {
325+
color: @button-default-outline-disabled-color;
326+
327+
&::after {
328+
border-color: @button-default-outline-disabled-color;
329+
}
288330
}
289331

290332
&.@{button}--primary {
@@ -294,6 +336,15 @@
294336
border-color: @button-primary-outline-border-color;
295337
}
296338

339+
&.@{button}--hover {
340+
color: @button-primary-outline-active-border-color;
341+
342+
&::after {
343+
background-color: @button-primary-outline-active-bg-color;
344+
border-color: @button-primary-outline-active-border-color;
345+
}
346+
}
347+
297348
&.@{button}--disabled {
298349
background-color: transparent;
299350
color: @button-primary-outline-disabled-color;
@@ -311,6 +362,15 @@
311362
border-color: @button-danger-outline-border-color;
312363
}
313364

365+
&.@{button}--hover {
366+
color: @button-danger-outline-active-border-color;
367+
368+
&::after {
369+
background-color: @button-danger-outline-active-bg-color;
370+
border-color: @button-danger-outline-active-border-color;
371+
}
372+
}
373+
314374
&.@{button}--disabled {
315375
background-color: transparent;
316376
color: @button-danger-outline-disabled-color;
@@ -329,6 +389,15 @@
329389
border-color: @button-light-outline-border-color;
330390
}
331391

392+
&.@{button}--hover {
393+
color: @button-light-outline-active-border-color;
394+
395+
&::after {
396+
background-color: @button-light-outline-active-bg-color;
397+
border-color: @button-light-outline-active-border-color;
398+
}
399+
}
400+
332401
&.@{button}--disabled {
333402
background-color: transparent;
334403
color: @button-light-outline-disabled-color;

‎src/checkbox/checkbox.less‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
@checkbox: ~'@{prefix}-checkbox';
44

5+
@checkbox-border-width: 6rpx;
56
@checkbox-icon-size: var(--td-checkbox-icon-size, 48rpx);
67
@checkbox-font-size: var(--td-checkbox-font-size, 32rpx);
78
@checkbox-title-line-height: var(--td-checkbox-title-line-height, 48rpx);
@@ -95,9 +96,9 @@
9596
}
9697

9798
&-circle {
98-
width: 84rpx;
99-
height: 84rpx;
100-
border: 3px solid @checkbox-icon-color;
99+
width: calc((@checkbox-icon-size - @checkbox-border-width) * 2);
100+
height: calc((@checkbox-icon-size - @checkbox-border-width) * 2);
101+
border: @checkbox-border-width solid @checkbox-icon-color;
101102
border-radius: 50%;
102103
position: absolute;
103104
top: 50%;
@@ -111,9 +112,9 @@
111112
}
112113

113114
&-rectangle {
114-
width: 72rpx;
115-
height: 72rpx;
116-
border: 3px solid @checkbox-icon-color;
115+
width: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2);
116+
height: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2);
117+
border: @checkbox-border-width solid @checkbox-icon-color;
117118
border-radius: 4rpx;
118119
position: absolute;
119120
top: 50%;

0 commit comments

Comments
 (0)