Skip to content

Commit 7ffb106

Browse files
Youyou-smilesYouyou-smiles
committed
refactor(calendar): [calendar] refactor theme vars
1 parent 92ba61d commit 7ffb106

File tree

2 files changed

+95
-75
lines changed

2 files changed

+95
-75
lines changed

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

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020
@popper-prefix-cls: ~'@{css-prefix}popper';
2121

2222
.@{calendar-prefix-cls} {
23-
.component-css-vars-calendar();
23+
.injiect-Calendar-vars();
2424

25-
background: var(--ti-calendar-bg-color);
25+
background: var(--tv-Calendar-bg-color);
2626
overflow: hidden;
2727
margin: 10px;
2828

@@ -37,12 +37,12 @@
3737
}
3838

3939
& &__selected {
40-
border: 1px solid var(--ti-calendar-text-color-primary);
41-
background: var(--ti-calendar-background-color-primary);
40+
border: 1px solid var(--tv-Calendar-text-color-primary);
41+
background: var(--tv-Calendar-day-selected-bg);
4242
padding: 8px;
43-
color: var(--ti-calendar-text-color-info);
43+
color: var(--tv-Calendar-text-color-info);
4444
line-height: 140%;
45-
border-radius: var(--ti-calendar-selected-border-radius);
45+
border-radius: var(--tv-Calendar-selected-border-radius);
4646
margin-bottom: 8px;
4747
}
4848

@@ -68,19 +68,19 @@
6868
}
6969

7070
& &__input {
71-
width: var(--ti-calendar-tool-width);
71+
width: 104px;
7272
position: relative;
7373
outline: 0;
7474

7575
> input {
7676
width: 100%;
77-
height: var(--ti-calendar-input-height, 28px);
78-
line-height: var(--ti-calendar-input-height, 28px);
79-
border: 1px solid var(--ti-calendar-border-color);
80-
color: var(--ti-calendar-text-color-info);
81-
border-radius: var(--ti-calendar-input-border-radius);
82-
background: var(--ti-calendar-bg-color);
83-
font-size: var(--ti-calendar-input-font-size);
77+
height: 32px;
78+
line-height: 32px;
79+
border: 1px solid #999999;
80+
color: var(--tv-Calendar-text-color-info);
81+
border-radius: var(--tv-Calendar-input-border-radius);
82+
background: var(--tv-Calendar-bg-color);
83+
font-size: var(--tv-Calendar-input-font-size);
8484
padding: 0 30px 0 8px;
8585
display: block;
8686
white-space: nowrap;
@@ -93,7 +93,7 @@
9393
&:active,
9494
&.active,
9595
&[active] {
96-
border: 1px solid var(--ti-calendar-text-color-primary);
96+
border: 1px solid #191919;
9797
}
9898

9999
&[readonly] {
@@ -111,16 +111,16 @@
111111
box-sizing: border-box;
112112
text-align: center;
113113
overflow: hidden;
114-
font-size: var(--ti-common-font-size-base);
114+
font-size: 14px;
115115
display: flex;
116116
align-items: center;
117117
cursor: pointer;
118118

119119
svg {
120-
fill: var(--ti-calendar-text-color-primary);
120+
fill: var(--tv-Calendar-text-color-primary);
121121

122122
&:hover {
123-
fill: var(--ti-calendar-hover-text-color);
123+
fill: var(--tv-Calendar-hover-text-color);
124124
}
125125
}
126126
}
@@ -132,14 +132,14 @@
132132
> li {
133133
position: relative;
134134
float: left;
135-
width: calc(var(--ti-calendar-tool-width) / 2);
136-
height: var(--ti-calendar-input-height, 28px);
137-
line-height: var(--ti-calendar-input-height, 28px);
138-
border: 1px solid var(--ti-calendar-border-color);
135+
width: 52px;
136+
height: 32px;
137+
line-height: 32px;
138+
border: 1px solid #999999;
139139
text-align: center;
140-
font-size: var(--ti-calendar-input-font-size);
140+
font-size: var(--tv-Calendar-input-font-size);
141141
font-weight: 500;
142-
color: var(--ti-calendar-text-color-info);
142+
color: var(--tv-Calendar-text-color-info);
143143
cursor: pointer;
144144

145145
&:first-child {
@@ -152,13 +152,13 @@
152152
}
153153

154154
&:hover {
155-
color: var(--ti-calendar-text-color-primary);
155+
color: var(--tv-Calendar-text-color-primary);
156156
}
157157
}
158158

159159
> .active {
160-
color: var(--ti-calendar-text-color-primary);
161-
border: 1px solid var(--ti-calendar-text-color-primary);
160+
color: var(--tv-Calendar-text-color-primary);
161+
border: 1px solid var(--tv-Calendar-text-color-primary);
162162
z-index: 1;
163163
}
164164
}
@@ -174,7 +174,7 @@
174174
> th {
175175
line-height: 18px;
176176
padding: 0 10px 5px 10px;
177-
font-size: var(--ti-calendar-content-heard-font-size);
177+
font-size: var(--tv-Calendar-content-heard-font-size);
178178
text-align: right;
179179
width: 100% / 7;
180180
}
@@ -192,46 +192,46 @@
192192
}
193193

194194
& &__day {
195-
border-top: 3px solid var(--ti-calendar-border-color);
195+
border-top: 3px solid #999999;
196196
margin: 0 3px 5px 3px;
197197
height: 100px;
198198
padding: 5px;
199199

200200
&.selected {
201-
background: var(--ti-calendar-background-color-primary);
201+
background: var(--tv-Calendar-day-selected-bg);
202202

203203
.label {
204-
color: var(--ti-calendar-text-color-primary);
204+
color: var(--tv-Calendar-day-selected-text-color);
205205
}
206206
}
207207

208208
&:hover {
209-
background: var(--ti-calendar-background-color-primary);
209+
background: var(--tv-Calendar-day-hover-bg);
210210
}
211211

212212
&.disable {
213-
color: var(--ti-calendar-disabled-text-color);
213+
color: var(--tv-Calendar-disabled-text-color);
214214

215215
.info:before {
216-
background: var(--ti-calendar-disabled-info-bg-color);
216+
background: var(--tv-Calendar-disabled-info-bg-color);
217217
}
218218

219219
.success:before {
220-
background: var(--ti-calendar-disabled-success-bg-color);
220+
background: var(--tv-Calendar-disabled-success-bg-color);
221221
}
222222

223223
.warning:before {
224-
background: var(--ti-calendar-disabled-warning-bg-color);
224+
background: var(--tv-Calendar-disabled-warning-bg-color);
225225
}
226226

227227
.error:before {
228-
background: var(--ti-calendar-disabled-error-bg-color);
228+
background: var(--tv-Calendar-disabled-error-bg-color);
229229
}
230230
}
231231

232232
&.this-month,
233233
&.today {
234-
border-color: var(--ti-calendar-text-color-primary);
234+
border-color: var(--tv-Calendar-text-color-primary);
235235
}
236236
}
237237

@@ -255,19 +255,19 @@
255255
}
256256

257257
.info:before {
258-
background: var(--ti-calendar-text-color-info);
258+
background: var(--tv-Calendar-text-color-info);
259259
}
260260

261261
.success:before {
262-
background: var(--ti-calendar-bg-color-success);
262+
background: var(--tv-Calendar-bg-color-success);
263263
}
264264

265265
.warning:before {
266-
background: var(--ti-calendar-bg-color-warning);
266+
background: var(--tv-Calendar-bg-color-warning);
267267
}
268268

269269
.error:before {
270-
background: var(--ti-calendar-bg-color-danger);
270+
background: var(--tv-Calendar-bg-color-danger);
271271
}
272272
}
273273

@@ -279,7 +279,7 @@
279279
overflow: hidden;
280280
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
281281
padding: 5px 0;
282-
font-size: var(--ti-calendar-content-heard-font-size);
282+
font-size: var(--tv-Calendar-content-heard-font-size);
283283
}
284284

285285
&-year {
@@ -297,30 +297,30 @@
297297
}
298298

299299
& &__selector {
300-
width: var(--ti-calendar-tool-width);
300+
width: 104px;
301301
max-height: 300px;
302302
overflow-y: auto;
303303
overflow-x: hidden;
304304
}
305305

306306
& &__list-item {
307-
min-height: var(--ti-calendar-list-item-height);
308-
line-height: var(--ti-calendar-list-item-height);
307+
min-height: 32px;
308+
line-height: 32px;
309309
max-width: 100%;
310310
overflow: hidden;
311311
text-overflow: ellipsis;
312312
white-space: nowrap;
313313
padding: 0 8px;
314-
color: var(--ti-calendar-text-color-info);
314+
color: var(--tv-Calendar-text-color-info);
315315

316316
&:hover {
317317
cursor: pointer;
318-
background: var(--ti-calendar-list-item-hover-bg-color);
318+
background: var(--tv-Calendar-list-item-hover-bg-color);
319319
}
320320

321321
&.is-selected {
322-
background: var(--ti-calendar-list-item-selected-bg-color);
323-
color: var(--ti-calendar-list-item-selected-text-color);
322+
background: var(--tv-Calendar-list-item-selected-bg-color);
323+
color: var(--tv-Calendar-list-item-selected-text-color);
324324
}
325325
}
326326
}

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

Lines changed: 45 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,49 @@
1010
*
1111
*/
1212

13-
.component-css-vars-calendar() {
14-
--ti-calendar-bg-color: var(--ti-common-color-light, #ffffff);
15-
--ti-calendar-list-item-selected-text-color: var(--ti-common-color-light, #ffffff);
16-
--ti-calendar-hover-text-color: var(--ti-base-color-brand-5, #c2c2c2);
17-
--ti-calendar-border-color: var(--ti-common-color-border, #999999);
18-
--ti-calendar-text-color-primary: #1890ff;
19-
--ti-calendar-background-color-primary: rgba(24, 144, 255, 0.1);
20-
--ti-calendar-bg-color-success: var(--ti-common-color-success-normal, #5cb300);
21-
--ti-calendar-bg-color-warning: var(--ti-common-color-warning-normal, #ff8800);
22-
--ti-calendar-bg-color-danger: var(--ti-base-color-bg-8, #c7000b);
23-
--ti-calendar-text-color-info: var(--ti-common-color-info-normal, #191919);
24-
--ti-calendar-tool-width: var(--ti-common-size-width-normal, 104px);
25-
--ti-calendar-content-heard-font-size: var(--ti-common-font-size-1, 14px);
26-
--ti-calendar-input-height: var(--ti-common-size-height-normal, 32px);
27-
--ti-calendar-selected-border-radius: var(--ti-common-border-radius-normal, 6px);
28-
--ti-calendar-input-border-radius: var(--ti-common-border-radius-normal, 6px);
29-
--ti-calendar-input-font-size: var(--ti-common-font-size-base, 14px);
30-
--ti-calendar-list-item-height: var(--ti-common-size-height-normal, 32px);
31-
--ti-calendar-list-item-hover-bg-color: var(--ti-common-color-hover-background, #f5f5f5);
32-
--ti-calendar-list-item-selected-bg-color: var(--ti-common-color-selected-background, #f5f5f5);
33-
--ti-calendar-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
34-
--ti-calendar-disabled-info-bg-color: var(--ti-base-color-bg-5, #ffffff);
35-
--ti-calendar-disabled-success-bg-color: var(--ti-base-color-bg-5, #ffffff);
36-
--ti-calendar-disabled-warning-bg-color: var(--ti-base-color-bg-5, #ffffff);
37-
--ti-calendar-disabled-error-bg-color: var(--ti-base-color-bg-5, #ffffff);
13+
.injiect-Calendar-vars() {
14+
// 日历背景颜色
15+
--tv-Calendar-bg-color: var(--tv-color-bg-secondary);
16+
// 日历日期列表选中文字颜色
17+
--tv-Calendar-list-item-selected-text-color: var(--tv-color-text);
18+
// 日历日期常态颜色
19+
--tv-Calendar-text-color-primary: var(--tv-color-icon);
20+
// 日历日期选中颜色
21+
--tv-Calendar-day-selected-text-color: var(--tv-color-text-active);
22+
// 日历日期悬浮颜色
23+
--tv-Calendar-hover-text-color: var(--tv-color-icon-hover);
24+
// 日历日期选中背景颜色
25+
--tv-Calendar-day-selected-bg: var(--tv-color-bg-active-emphasize-light);
26+
// 日历日期悬浮背景颜色
27+
--tv-Calendar-day-hover-bg: var(--tv-color-bg-hover-3);
28+
// 日历日期成功背景颜色
29+
--tv-Calendar-bg-color-success: var(--tv-color-success-bg);
30+
// 日历日期警告背景颜色
31+
--tv-Calendar-bg-color-warning: var(--tv-color-warn-bg);
32+
// 日历日期危险背景颜色
33+
--tv-Calendar-bg-color-danger: var(--tv-color-error-bg);
34+
// 日历日期信息文字颜色
35+
--tv-Calendar-text-color-info: var(--tv-color-info-text-primary);
36+
// 日历表头文字字号
37+
--tv-Calendar-content-heard-font-size: var(--tv-font-size-md);
38+
// 日历表头输入框选项圆角
39+
--tv-Calendar-selected-border-radius: var(--tv-border-radius-md);
40+
// 日历表头输入框圆角
41+
--tv-Calendar-input-border-radius: var(--tv-border-radius-md);
42+
// 日历表头输入框字号
43+
--tv-Calendar-input-font-size: var(--tv-font-size-md);
44+
// 日历列次悬浮背景色
45+
--tv-Calendar-list-item-hover-bg-color: var(--tv-color-bg-hover);
46+
// 日历列次悬选中景色
47+
--tv-Calendar-list-item-selected-bg-color: var(--tv-color-bg-active);
48+
// 日历日期禁用文字色
49+
--tv-Calendar-disabled-text-color: var(--tv-color-text-disabled);
50+
// 日历日期禁用信息背景色
51+
--tv-Calendar-disabled-info-bg-color: var(--tv-color-bg-secondary);
52+
// 日历日期禁用成功背景色
53+
--tv-Calendar-disabled-success-bg-color: var(--tv-color-bg-secondary);
54+
// 日历日期禁用警告背景色
55+
--tv-Calendar-disabled-warning-bg-color: var(--tv-color-bg-secondary);
56+
// 日历日期禁用危险背景色
57+
--tv-Calendar-disabled-error-bg-color: var(--tv-color-bg-secondary);
3858
}

0 commit comments

Comments
 (0)