Skip to content

Commit a5ae968

Browse files
zzcrzzcr
authored
feat(theme-mobile): optimize theme-mobile engineering organization and command specifications (#2782)
1 parent 158b7c4 commit a5ae968

File tree

104 files changed

+1634
-2212
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

104 files changed

+1634
-2212
lines changed

‎packages/theme-mobile/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
"selector-pseudo-element-colon-notation": "single",
6666
"import-notation": null,
6767
"string-quotes": "single",
68+
"custom-property-pattern": null,
6869
"selector-class-pattern": null,
6970
"declaration-empty-line-before": null,
7071
"at-rule-empty-line-before": null,

‎packages/theme-mobile/src/action-sheet/index.less‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
@action-sheet-prefix-cls: ~'@{css-prefix}mobile-action-sheet';
1818

1919
.@{action-sheet-prefix-cls} {
20-
.component-css-vars-action-sheet();
20+
.inject-ActionSheet-vars();
2121

2222
position: relative;
2323
height: 100%;
@@ -35,24 +35,26 @@
3535
bottom: 0;
3636
left: 0;
3737
width: 100%;
38-
background-color: var(--ti-mobile-action-sheet-content-bg-color, #fff);
38+
background-color: var(--tvm-ActionSheet-content-bg-color, #fff);
3939
transform: translate(0, 100%);
4040
backface-visibility: hidden;
4141
transition: transform 0.3s;
4242
z-index: 500;
4343
overflow-y: scroll;
4444
backface-visibility: hidden;
4545
border-radius: 16px 16px 0px 0px;
46+
4647
&.is-toggle {
4748
transform: translate(0, 0);
4849
}
50+
4951
&.is-not-content {
5052
z-index: 2000;
5153
}
5254
}
5355

5456
&__menu {
55-
background-color: var(--ti-mobile-action-sheet-menu-bg-color, #fff);
57+
background-color: var(--tvm-ActionSheet-menu-bg-color, #fff);
5658
}
5759

5860
&__menu.is-ellipsis &__item {
@@ -69,18 +71,18 @@
6971
height: 40px;
7072
line-height: 40px;
7173
padding: 0px 16px;
72-
color: var(--ti-mobile-action-sheet-item-text-color, #333);
73-
font-size: var(--ti-mobile-action-sheet-item-font-size, 16px);
74+
color: var(--tvm-ActionSheet-item-text-color, #333);
75+
font-size: var(--tvm-ActionSheet-item-font-size, 16px);
7476
text-align: center;
7577
}
7678

7779
&__item {
7880
&:active {
79-
background-color: var(--ti-mobile-action-sheet-item-active-bg-color, #ececec);
81+
background-color: var(--tvm-ActionSheet-item-active-bg-color, #ececec);
8082
}
8183

8284
&.is-active {
83-
color: var(--ti-mobile-action-sheet-item-active-text-color, #039be5);
85+
color: var(--tvm-ActionSheet-item-active-text-color, #039be5);
8486
}
8587
}
8688

@@ -94,17 +96,17 @@
9496
}
9597

9698
&__item:not(:first-child) {
97-
.hairline('top', var(--ti-mobile-action-sheet-item-border-color, #ddd));
99+
.hairline('top', var(--tvm-ActionSheet-item-border-color, #ddd));
98100

99101
&.is-warn {
100-
color: var(--ti-mobile-action-sheet-item-warn-text-color, #f36f64);
102+
color: var(--tvm-ActionSheet-item-warn-text-color, #f36f64);
101103
}
102104
}
103105

104106
&__action {
105107
width: 100%;
106108
position: absolute;
107-
background-color: var(--ti-mobile-action-sheet-action-bg-color, #fff);
109+
background-color: var(--tvm-ActionSheet-action-bg-color, #fff);
108110
}
109111
}
110112

‎packages/theme-mobile/src/action-sheet/vars.less‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
.component-css-vars-action-sheet() {
2-
--ti-mobile-action-sheet-content-bg-color: #fff;
3-
--ti-mobile-action-sheet-menu-bg-color: var(--ti-mobile-base-color-light, #fff);
4-
--ti-mobile-action-sheet-item-text-color: var(--ti-mobile-base-color-info-normal, #333);
5-
--ti-mobile-action-sheet-item-warn-text-color: #f36f64;
6-
--ti-mobile-action-sheet-item-font-size: 12px;
7-
--ti-mobile-action-sheet-item-border-color: #ddd;
8-
--ti-mobile-action-sheet-item-active-bg-color: #ececec;
9-
--ti-mobile-action-sheet-item-active-text-color: #039be5;
10-
--ti-mobile-action-sheet-action-bg-color: var(--ti-mobile-base-color-light, #fff);
1+
.inject-ActionSheet-vars() {
2+
--tvm-ActionSheet-content-bg-color: #fff;
3+
--tvm-ActionSheet-menu-bg-color: var(--tvm-base-color-light, #fff);
4+
--tvm-ActionSheet-item-text-color: var(--tvm-base-color-info-normal, #333);
5+
--tvm-ActionSheet-item-warn-text-color: #f36f64;
6+
--tvm-ActionSheet-item-font-size: 12px;
7+
--tvm-ActionSheet-item-border-color: #ddd;
8+
--tvm-ActionSheet-item-active-bg-color: #ececec;
9+
--tvm-ActionSheet-item-active-text-color: #039be5;
10+
--tvm-ActionSheet-action-bg-color: var(--tvm-base-color-light, #fff);
1111
}

‎packages/theme-mobile/src/alert/index.less‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
@alert-prefix-cls: ~'@{css-prefix}mobile-alert';
1919

2020
.@{alert-prefix-cls} {
21-
.component-css-vars-alert();
21+
.inject-Alert-vars();
2222

2323
display: flex;
2424
align-items: flex-start;
@@ -29,20 +29,21 @@
2929

3030
.@{alert-prefix-cls}__content {
3131
flex: 1;
32-
color: var(--ti-mobile-alert-content-text-color);
33-
font-weight: var(--ti-mobile-alert-font-weight);
34-
padding: 0 var(--ti-mobile-alert-content-padding-horizontal);
32+
color: var(--tvm-Alert-content-text-color);
33+
font-weight: var(--tvm-Alert-font-weight);
34+
padding: 0 var(--tvm-Alert-content-padding-horizontal);
3535
white-space: pre-wrap;
3636
word-break: break-all;
3737
}
3838

3939
&--normal {
40-
height: var(--ti-mobile-alert-height, 36px);
40+
height: var(--tvm-Alert-height, 36px);
4141
line-height: 1.5;
42-
padding: var(--ti-mobile-alert-padding-top) var(--ti-mobile-alert-padding-right) var(--ti-mobile-alert-padding-bottom) var(--ti-mobile-alert-padding-left);
42+
padding: var(--tvm-Alert-padding-top) var(--tvm-Alert-padding-right) var(--tvm-Alert-padding-bottom)
43+
var(--tvm-Alert-padding-left);
4344

4445
.@{alert-prefix-cls}__content {
45-
font-size: var(--ti-mobile-alert-content-font-size, 12px);
46+
font-size: var(--tvm-Alert-content-font-size, 12px);
4647

4748
&.is-hideicon {
4849
padding: 0;
@@ -51,18 +52,19 @@
5152
}
5253

5354
&&--large {
54-
padding: var(--ti-mobile-alert-large-padding-vertical) var(--ti-mobile-alert-padding-right) var(--ti-mobile-alert-large-padding-vertical) var(--ti-mobile-alert-padding-left);
55+
padding: var(--tvm-Alert-large-padding-vertical) var(--tvm-Alert-padding-right)
56+
var(--tvm-Alert-large-padding-vertical) var(--tvm-Alert-padding-left);
5557

5658
.@{alert-prefix-cls}__content {
57-
font-size: var(--ti-mobile-alert-large-font-size);
59+
font-size: var(--tvm-Alert-large-font-size);
5860

5961
&.is-hideicoalert-variantn {
6062
padding: 0;
6163
}
6264
}
6365

6466
.is-custom {
65-
font-size: var(--ti-mobile-alert-large-font-size);
67+
font-size: var(--tvm-Alert-large-font-size);
6668
}
6769

6870
.@{alert-prefix-cls}__icon {
@@ -72,46 +74,46 @@
7274

7375
&--success {
7476
.alert-variant(
75-
var(--ti-mobile-alert-success-icon-color) ;
76-
var(--ti-mobile-alert-success-link-color) ;
77-
var(--ti-mobile-alert-success-bg-color)
77+
var(--tvm-Alert-success-icon-color) ;
78+
var(--tvm-Alert-success-link-color) ;
79+
var(--tvm-Alert-success-bg-color)
7880
);
7981
}
8082

8183
&--info {
8284
.alert-variant(
83-
var(--ti-mobile-alert-info-icon-color) ;
84-
var(--ti-mobile-alert-info-link-color) ;
85-
var(--ti-mobile-alert-info-bg-color)
85+
var(--tvm-Alert-info-icon-color) ;
86+
var(--tvm-Alert-info-link-color) ;
87+
var(--tvm-Alert-info-bg-color)
8688
);
8789
}
8890

8991
&--warning {
9092
.alert-variant(
91-
var(--ti-mobile-alert-warning-icon-color) ;
92-
var(--ti-mobile-alert-warning-link-color) ;
93-
var(--ti-mobile-alert-warning-bg-color)
93+
var(--tvm-Alert-warning-icon-color) ;
94+
var(--tvm-Alert-warning-link-color) ;
95+
var(--tvm-Alert-warning-bg-color)
9496
);
9597
}
9698

9799
&--error {
98100
.alert-variant(
99-
var(--ti-mobile-alert-error-icon-color) ;
100-
var(--ti-mobile-alert-error-link-color) ;
101-
var(--ti-mobile-alert-error-bg-color)
101+
var(--tvm-Alert-error-icon-color) ;
102+
var(--tvm-Alert-error-link-color) ;
103+
var(--tvm-Alert-error-bg-color)
102104
);
103105
}
104106

105107
&__icon {
106108
margin-top: 2px;
107-
font-size: var(--ti-mobile-alert-icon-size);
109+
font-size: var(--tvm-Alert-icon-size);
108110

109111
&.@{alert-prefix-cls}__close {
110112
position: absolute;
111-
top: var(--ti-mobile-alert-padding-top);
112-
right: var(--ti-mobile-alert-padding-right);
113+
top: var(--tvm-Alert-padding-top);
114+
right: var(--tvm-Alert-padding-right);
113115
margin-top: 0;
114-
fill: var(--ti-mobile-alert-close-icon-color);
116+
fill: var(--tvm-Alert-close-icon-color);
115117
}
116118
}
117119

@@ -125,12 +127,12 @@
125127

126128
.is-custom {
127129
cursor: pointer;
128-
font-size: var(--ti-mobile-alert-content-font-size);
129-
color: var(--ti-mobile-alert-custom-text-color);
130+
font-size: var(--tvm-Alert-content-font-size);
131+
color: var(--tvm-Alert-custom-text-color);
130132
}
131133

132134
& &__close {
133-
font-size: var(--ti-mobile-alert-close-icon-font-size);
135+
font-size: var(--tvm-Alert-close-icon-font-size);
134136
cursor: pointer;
135137
}
136138
}

‎packages/theme-mobile/src/alert/vars.less‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,60 @@
1-
.component-css-vars-alert() {
1+
.inject-Alert-vars() {
22
// 警告类型提示图标色
3-
--ti-mobile-alert-warning-icon-color: var(--ti-mobile-color-warning, #ff8800);
3+
--tvm-Alert-warning-icon-color: var(--tvm-color-warning, #ff8800);
44
// 警告类型提示链接字体色
5-
--ti-mobile-alert-warning-link-color: var(--ti-mobile-color-text-link, #1476ff);
5+
--tvm-Alert-warning-link-color: var(--tvm-color-text-link, #1476ff);
66
// 警告类型提示背景色
7-
--ti-mobile-alert-warning-bg-color: var(--ti-mobile-color-warning-subtle, #ffebd1);
7+
--tvm-Alert-warning-bg-color: var(--tvm-color-warning-subtle, #ffebd1);
88

99
// 异常类型提示图标色
10-
--ti-mobile-alert-error-icon-color: var(--ti-mobile-color-error, #f23030);
10+
--tvm-Alert-error-icon-color: var(--tvm-color-error, #f23030);
1111
// 异常类型提示链接字体色
12-
--ti-mobile-alert-error-link-color: var(--ti-mobile-color-text-link, #1476ff);
12+
--tvm-Alert-error-link-color: var(--tvm-color-text-link, #1476ff);
1313
// 异常类型提示背景色
14-
--ti-mobile-alert-error-bg-color: var(--ti-mobile-color-error-subtle, #fce3e1);
14+
--tvm-Alert-error-bg-color: var(--tvm-color-error-subtle, #fce3e1);
1515

1616
// 成功类型提示图标色
17-
--ti-mobile-alert-success-icon-color: var(--ti-mobile-color-success, #5cb300);
17+
--tvm-Alert-success-icon-color: var(--tvm-color-success, #5cb300);
1818
// 成功类型提示链接字体色
19-
--ti-mobile-alert-success-link-color: var(--ti-mobile-color-text-link, #1476ff);
19+
--tvm-Alert-success-link-color: var(--tvm-color-text-link, #1476ff);
2020
// 成功类型提示背景色
21-
--ti-mobile-alert-success-bg-color: var(--ti-mobile-color-success-subtle, #e6f2d5);
21+
--tvm-Alert-success-bg-color: var(--tvm-color-success-subtle, #e6f2d5);
2222

2323
// 基础类型提示图标色
24-
--ti-mobile-alert-info-icon-color: var(--ti-mobile-color-brand-2, #1476ff);
24+
--tvm-Alert-info-icon-color: var(--tvm-color-brand-2, #1476ff);
2525
// 基础类型提示链接字体色
26-
--ti-mobile-alert-info-link-color: var(--ti-mobile-color-text-link, #1476ff);
26+
--tvm-Alert-info-link-color: var(--tvm-color-text-link, #1476ff);
2727
// 基础类型提示背景色
28-
--ti-mobile-alert-info-bg-color: var(--ti-mobile-color-info-subtle, #deecff);
28+
--tvm-Alert-info-bg-color: var(--tvm-color-info-subtle, #deecff);
2929

3030
// 默认高度
31-
--ti-mobile-alert-height: var(--ti-mobile-color-info-subtle, 36px);
31+
--tvm-Alert-height: var(--tvm-color-info-subtle, 36px);
3232
// 默认左内边距
33-
--ti-mobile-alert-padding-left: var(--ti-mobile-space-6x, 24px);
33+
--tvm-Alert-padding-left: var(--tvm-space-6x, 24px);
3434
// 默认右内边距
35-
--ti-mobile-alert-padding-right: var(--ti-mobile-space-6x, 24px);
35+
--tvm-Alert-padding-right: var(--tvm-space-6x, 24px);
3636
// 默认上内边距
37-
--ti-mobile-alert-padding-top: 9px;
37+
--tvm-Alert-padding-top: 9px;
3838
// 默认下内边距
39-
--ti-mobile-alert-padding-bottom: 9px;
39+
--tvm-Alert-padding-bottom: 9px;
4040
// 图标大小
41-
--ti-mobile-alert-icon-size: var(--ti-mobile-font-size-l, 16px);
41+
--tvm-Alert-icon-size: var(--tvm-font-size-l, 16px);
4242
// 字号
43-
--ti-mobile-alert-content-font-size: var(--ti-mobile-font-size-s, 12px);
43+
--tvm-Alert-content-font-size: var(--tvm-font-size-s, 12px);
4444
// 字体色
45-
--ti-mobile-alert-content-text-color: var(--ti-mobile-color-text-primary, #191919);
45+
--tvm-Alert-content-text-color: var(--tvm-color-text-primary, #191919);
4646
// 字重
47-
--ti-mobile-alert-font-weight: var(--ti-mobile-font-weight-regular, 400);
47+
--tvm-Alert-font-weight: var(--tvm-font-weight-regular, 400);
4848
// 内容水平内边距
49-
--ti-mobile-alert-content-padding-horizontal: var(--ti-mobile-space-2x, 8px);
49+
--tvm-Alert-content-padding-horizontal: var(--tvm-space-2x, 8px);
5050
// large提示字号
51-
--ti-mobile-alert-large-font-size: var(--ti-mobile-font-size-l, 16px);
51+
--tvm-Alert-large-font-size: var(--tvm-font-size-l, 16px);
5252
// large提示垂直内边距
53-
--ti-mobile-alert-large-padding-vertical: 10px;
53+
--tvm-Alert-large-padding-vertical: 10px;
5454
// 关闭图标大小
55-
--ti-mobile-alert-close-icon-font-size: var(--ti-mobile-font-size-l, 16px);
55+
--tvm-Alert-close-icon-font-size: var(--tvm-font-size-l, 16px);
5656
// 关闭图标颜色
57-
--ti-mobile-alert-close-icon-color: var(--ti-mobile-color-default, #808080);
57+
--tvm-Alert-close-icon-color: var(--tvm-color-default, #808080);
5858
// 自定义关闭文本色
59-
--ti-mobile-alert-custom-text-color: var(--ti-mobile-color-text-placeholder, #808080);
59+
--tvm-Alert-custom-text-color: var(--tvm-color-text-placeholder, #808080);
6060
}

‎packages/theme-mobile/src/avatar/index.js‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

0 commit comments

Comments
 (0)