Skip to content

Commit cc94d5d

Browse files
zzcrzzcr
committed
refactor(dialog-box): [dialog-box] refactor dialog-box theme vars
1 parent 9a6114e commit cc94d5d

File tree

2 files changed

+60
-164
lines changed

2 files changed

+60
-164
lines changed

‎packages/theme/src/dialog-box/index.less‎

Lines changed: 40 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@
1818

1919
.@{dialog-box-prefix-cls} {
2020
position: absolute;
21-
background: var(--ti-dialog-box-bg-color);
21+
background: var(--tv-DialogBox-bg-color);
2222
border: 1px solid transparent;
23-
border-radius: var(--ti-dialog-box-border-radius);
24-
box-shadow: var(--ti-dialog-box-shadow);
23+
border-radius: var(--tv-DialogBox-border-radius);
24+
box-shadow: var(--tv-DialogBox-shadow);
2525
overflow: hidden;
2626

2727
&__wrapper {
28-
.component-css-vars-dialog-box();
28+
.inject-DialogBox-vars();
2929

3030
position: fixed;
3131
top: 0;
@@ -34,8 +34,8 @@
3434
left: 0;
3535
overflow: auto;
3636
margin: 0;
37-
display: var(--ti-dialog-box-wrapper-display);
38-
align-items: var(--ti-dialog-box-wrapper-align-items);
37+
display: block;
38+
align-items: normal;
3939
}
4040

4141
&.is-fullscreen {
@@ -60,17 +60,15 @@
6060
}
6161

6262
& &__header {
63-
padding: var(--ti-dialog-box-head-padding-top) var(--ti-dialog-box-head-padding-horizontal)
64-
var(--ti-dialog-box-head-padding-bottom);
65-
background: var(--ti-dialog-box-bg-color);
66-
font-weight: var(--ti-dialog-box-head-title-font-weight);
63+
padding: 32px 32px 24px;
64+
background: var(--tv-DialogBox-bg-color);
65+
font-weight: var(--tv-DialogBox-head-title-font-weight);
6766
display: flex;
6867
position: relative;
6968
justify-content: space-between;
7069
align-items: center;
71-
font-size: var(--ti-dialog-box-head-title-font-size);
72-
color: var(--ti-dialog-box-head-title-text-color);
73-
border-bottom: 1px solid var(--ti-dialog-box-head-border-bottom-color);
70+
font-size: var(--tv-DialogBox-head-title-font-size);
71+
color: var(--tv-DialogBox-head-title-text-color);
7472

7573
.@{dialog-box-prefix-cls}__title {
7674
flex: 1;
@@ -85,15 +83,10 @@
8583
background: none;
8684
padding: 0;
8785
line-height: 1;
88-
top: calc(0px - var(--ti-dialog-box-btn-tools-position-top));
89-
right: calc(0px - var(--ti-dialog-box-btn-tools-position-right));
86+
top: -12px;
87+
right: -12px;
9088
cursor: pointer;
9189

92-
&:hover {
93-
background-color: var(--ti-dialog-box-btn-background-color-hover);
94-
border-radius: var(--ti-dialog-box-btn-border-radius);
95-
}
96-
9790
& + .@{dialog-box-prefix-cls}__headerbtn {
9891
margin-left: 8px;
9992
}
@@ -103,30 +96,30 @@
10396
}
10497

10598
.@{dialog-box-prefix-cls}__close {
106-
fill: var(--ti-dialog-box-close-icon-color);
107-
font-size: var(--ti-dialog-box-close-icon-size);
99+
fill: var(--tv-DialogBox-close-icon-color);
100+
font-size: var(--tv-DialogBox-close-icon-size);
108101

109102
&:hover {
110-
fill: var(--ti-dialog-box-close-icon-color-hover);
103+
fill: var(--tv-DialogBox-close-icon-color-hover);
111104
}
112105
}
113106

114107
.@{dialog-box-prefix-cls}__resize {
115-
fill: var(--ti-dialog-box-resize-icon-color);
116-
font-size: var(--ti-dialog-box-resize-icon-size);
108+
fill: var(--tv-DialogBox-resize-icon-color);
109+
font-size: var(--tv-DialogBox-resize-icon-size);
117110

118111
&:hover {
119-
fill: var(--ti-dialog-box-resize-icon-color-hover);
112+
fill: var(--tv-DialogBox-resize-icon-color-hover);
120113
}
121114
}
122115
}
123116
}
124117

125118
& &__body {
126119
text-align: left;
127-
padding: var(--ti-dialog-box-body-padding-vertical) var(--ti-dialog-box-body-padding-horizontal);
128-
color: var(--ti-dialog-box-body-text-color);
129-
font-size: var(--ti-dialog-box-body-font-size);
120+
padding: 0 32px;
121+
color: var(--tv-DialogBox-body-text-color);
122+
font-size: var(--tv-DialogBox-body-font-size);
130123

131124
.@{css-prefix}upload {
132125
overflow: hidden;
@@ -143,13 +136,12 @@
143136
}
144137

145138
& &__footer {
146-
padding: var(--ti-dialog-box-footer-padding-top) var(--ti-dialog-box-footer-padding-horizontal)
147-
var(--ti-dialog-box-footer-margin-bottom);
148-
text-align: var(--ti-dialog-box-footer-align);
139+
padding: 24px 32px 32px;
140+
text-align: right;
149141
box-sizing: border-box;
150142

151143
.@{css-prefix}button {
152-
min-width: var(--ti-dialog-box-footer-btn-min-width);
144+
min-width: var(--tv-DialogBox-footer-btn-min-width);
153145
}
154146

155147
.@{css-prefix}toolbar {
@@ -161,46 +153,40 @@
161153

162154
// 抽屉
163155
&.is-right-slide {
164-
border-radius: var(--ti-dialog-box-drawer-radius);
165-
min-width: var(--ti-dialog-box-drawer-min-width);
166-
max-width: var(--ti-dialog-box-drawer-max-width);
156+
border-radius: 0;
157+
min-width: var(--tv-DialogBox-drawer-min-width);
158+
max-width: var(--tv-DialogBox-drawer-max-width);
167159

168160
display: flex;
169161
flex-direction: column;
170162

171163
.@{dialog-box-prefix-cls}__header,
172164
.@{dialog-box-prefix-cls}__footer {
173-
width: calc(100% - var(--ti-dialog-box-drawer-padding-left) - var(--ti-dialog-box-drawer-padding-right));
174-
margin-left: var(--ti-dialog-box-drawer-padding-left);
175-
margin-right: var(--ti-dialog-box-drawer-padding-right);
165+
width: calc(100% - 64px);
166+
margin-left: 32px;
167+
margin-right: 32px;
176168
}
177169

178170
.@{dialog-box-prefix-cls}__header {
179-
padding: var(--ti-dialog-box-drawer-header-padding-top) var(--ti-dialog-box-drawer-header-padding-right)
180-
var(--ti-dialog-box-drawer-header-padding-bottom) var(--ti-dialog-box-drawer-header-padding-left);
181-
border-bottom: 1px solid var(--ti-dialog-box-head-divider-border-color);
171+
padding: 32px 0 20px;
172+
border-bottom: 1px solid var(--tv-DialogBox-head-divider-border-color);
182173

183174
&btn {
184-
right: calc(
185-
var(--ti-dialog-box-btn-position-right) - var(--ti-dialog-box-drawer-padding-right) -
186-
(var(--ti-dialog-box-btn-width) - var(--ti-dialog-box-close-icon-size)) / 2
187-
);
175+
right: -16px;
188176
}
189177
}
190178

191179
.@{dialog-box-prefix-cls}__body {
192180
flex: 1;
193181
overflow: auto;
194-
color: var(--ti-dialog-box-drawer-body-color);
195-
border-bottom: 1px solid var(--ti-dialog-box-drawer-divider-border-color);
196-
padding: var(--ti-dialog-box-drawer-body-padding-top) var(--ti-dialog-box-drawer-body-padding-right)
197-
var(--ti-dialog-box-drawer-body-padding-bottom) var(--ti-dialog-box-drawer-body-padding-left);
198-
}
182+
color: var(--tv-DialogBox-drawer-body-color);
183+
border-bottom: 1px solid var(--tv-DialogBox-drawer-divider-border-color);
184+
padding: 0 32px;
185+
}
199186

200187
.@{dialog-box-prefix-cls}__footer {
201-
padding: var(--ti-dialog-box-drawer-footer-padding-top) var(--ti-dialog-box-drawer-footer-padding-right)
202-
var(--ti-dialog-box-drawer-footer-padding-bottom) var(--ti-dialog-box-drawer-footer-padding-left);
203-
text-align: var(--ti-dialog-box-drawer-footer-text-align);
188+
padding: 24px 0 32px;
189+
text-align: right;
204190
}
205191
}
206192
}

‎packages/theme/src/dialog-box/vars.less‎

Lines changed: 20 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -10,136 +10,46 @@
1010
*
1111
*/
1212

13-
.component-css-vars-dialog-box() {
13+
.inject-DialogBox-vars() {
1414
// 对话框背景色
15-
--ti-dialog-box-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
15+
--tv-DialogBox-bg-color: var(--tv-color-bg-secondary);
1616
// 对话框圆角
17-
--ti-dialog-box-border-radius: var(--ti-common-border-radius-4, 8px);
17+
--tv-DialogBox-border-radius: var(--tv-border-radius-lg);
1818
// 对话框阴影
19-
--ti-dialog-box-shadow: var(--ti-common-shadow-4-down, 0 8px 24px 0 rgba(0, 0, 0, 0.16));
20-
21-
// 头部边框色(hide)
22-
--ti-dialog-box-head-border-color: var(--ti-common-color-line-normal, #c2c2c2);
23-
// 头部文本色(hide)
24-
--ti-dialog-box-head-text-color: var(--ti-common-color-text-primary, #191919);
25-
// 头部上内边距
26-
--ti-dialog-box-head-padding-top: var(--ti-common-space-8x, 32px);
27-
// 头部水平内边距
28-
--ti-dialog-box-head-padding-horizontal: var(--ti-common-space-8x, 32px);
29-
// 头部下内边距
30-
--ti-dialog-box-head-padding-bottom: var(--ti-common-space-6x, 24px);
19+
--tv-DialogBox-shadow: var(--tv-shadow-4-down);
3120
// 头部字号
32-
--ti-dialog-box-head-title-font-size: var(--ti-common-font-size-4, 20px);
21+
--tv-DialogBox-head-title-font-size: var(--tv-font-size-heading-md);
3322
// 头部字重
34-
--ti-dialog-box-head-title-font-weight: var(--ti-common-font-weight-7, bold);
23+
--tv-DialogBox-head-title-font-weight: var(--tv-font-weight-bold);
3524
// 头部文本色
36-
--ti-dialog-box-head-title-text-color: var(--ti-common-color-text-primary, #191919);
37-
// 头部底边框颜色
38-
--ti-dialog-box-head-border-bottom-color: var(--ti-common-color-transparent, transparent);
39-
// 头部字体图标色(hide)
40-
--ti-dialog-box-head-font-icon-color: var(--ti-common-color-icon-normal, #808080);
41-
// 头部字体图标悬浮颜色(hide)
42-
--ti-dialog-box-head-font-icon-color-hover: var(--ti-common-color-icon-hover, #191919);
43-
// 头部主体色(hide)
44-
--ti-dialog-box-head-body-text-color: var(--ti-common-color-text-primary, #191919);
45-
// 头部主体字号(hide)
46-
--ti-dialog-box-head-body-font-size: var(--ti-common-font-size-1, 14px);
25+
--tv-DialogBox-head-title-text-color: var(--tv-color-text);
4726

48-
// 关闭按钮宽度
49-
--ti-dialog-box-btn-width: var(--ti-common-size-8x, 32px);
5027
// 关闭按钮高度
51-
--ti-dialog-box-btn-height: var(--ti-dialog-box-btn-width);
52-
// 关闭按钮圆角
53-
--ti-dialog-box-btn-border-radius: var(--ti-common-border-radius-1, 2px);
28+
--tv-DialogBox-btn-height: 32px;
5429
// 关闭按钮图标尺寸
55-
--ti-dialog-box-close-icon-size: var(--ti-common-font-size-5, 24px);
30+
--tv-DialogBox-close-icon-size: 24px;
5631
// 关闭按钮图标色
57-
--ti-dialog-box-close-icon-color: var(--ti-common-color-icon-normal, #808080);
32+
--tv-DialogBox-close-icon-color: var(--tv-color-icon);
5833
// 关闭按钮悬浮图标色
59-
--ti-dialog-box-close-icon-color-hover: var(--ti-common-color-icon-hover, #191919);
60-
// 关闭按钮悬浮背景色
61-
--ti-dialog-box-btn-background-color-hover: none;
62-
// 关闭按钮与上边框的距离(hide)
63-
--ti-dialog-box-btn-position-top: var(--ti-common-space-5x, 20px);
64-
// 关闭按钮与右边框的距离(hide)
65-
--ti-dialog-box-btn-position-right: var(--ti-common-space-5x, 20px);
34+
--tv-DialogBox-close-icon-color-hover: var(--tv-color-icon-hover);
6635

6736
// 内容字号
68-
--ti-dialog-box-body-font-size: var(--ti-common-font-size-base, 14px);
37+
--tv-DialogBox-body-font-size: var(--tv-font-size-md);
6938
// 内容字体色
70-
--ti-dialog-box-body-text-color: var(--ti-common-color-text-secondary, #595959);
39+
--tv-DialogBox-body-text-color: var(--tv-color-text-secondary);
7140
// 右侧弹窗内容字体色
72-
--ti-dialog-box-drawer-body-color: var(--ti-common-color-text-primary, #191919);
73-
// 内容垂直内边距
74-
--ti-dialog-box-body-padding-vertical: var(--ti-common-space-0, 0px);
75-
// 内容水平内边距
76-
--ti-dialog-box-body-padding-horizontal: var(--ti-common-space-8x, 32px);
77-
78-
// 底部上内边距
79-
--ti-dialog-box-footer-padding-top: var(--ti-common-space-6x, 24px);
80-
// 底部水平内边距
81-
--ti-dialog-box-footer-padding-horizontal: var(--ti-common-space-8x, 32px);
82-
// 底部下内边距
83-
--ti-dialog-box-footer-margin-bottom: var(--ti-common-space-8x, 32px);
41+
--tv-DialogBox-drawer-body-color: var(--tv-color-text);
8442

8543
// 抽屉最小宽度
86-
--ti-dialog-box-drawer-min-width: calc(var(--ti-common-space-10, 10px) * 50);
44+
--tv-DialogBox-drawer-min-width: 500px;
8745
// 抽屉最大宽度
88-
--ti-dialog-box-drawer-max-width: calc(var(--ti-common-space-10, 10px) * 100);
89-
// 抽屉左内边距
90-
--ti-dialog-box-drawer-padding-left: var(--ti-common-space-8x, 32px);
91-
// 抽屉右内边距
92-
--ti-dialog-box-drawer-padding-right: var(--ti-common-space-8x, 32px);
93-
// 抽屉头部上内边距
94-
--ti-dialog-box-drawer-header-padding-top: var(--ti-common-space-8x, 32px);
95-
// 抽屉头部下内边距
96-
--ti-dialog-box-drawer-header-padding-bottom: var(--ti-common-space-5x, 20px);
97-
// 抽屉头部左内边距
98-
--ti-dialog-box-drawer-header-padding-left: var(--ti-common-space-0, 0px);
99-
// 抽屉头部右内边距
100-
--ti-dialog-box-drawer-body-padding-right: var(--ti-common-space-8x, 32px);
101-
// 抽屉内容上内边距
102-
--ti-dialog-box-drawer-body-padding-top: var(--ti-common-space-0, 0px);
103-
// 抽屉内容下内边距
104-
--ti-dialog-box-drawer-body-padding-bottom: var(--ti-common-space-0, 0px);
105-
// 抽屉内容左内边距
106-
--ti-dialog-box-drawer-body-padding-left: var(--ti-common-space-8x, 32px);
107-
// 抽屉内容右内边距
108-
--ti-dialog-box-drawer-header-padding-right: var(--ti-common-space-0, 0px);
109-
// 抽屉底部文本对齐方式
110-
--ti-dialog-box-drawer-footer-text-align: right;
111-
// 抽屉底部上内边距
112-
--ti-dialog-box-drawer-footer-padding-top: var(--ti-common-space-6x, 24px);
113-
// 抽屉底部下内边距
114-
--ti-dialog-box-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px);
115-
// 抽屉底部左内边距
116-
--ti-dialog-box-drawer-footer-padding-left: var(--ti-common-space-0, 0px);
117-
// 抽屉底部右内边距
118-
--ti-dialog-box-drawer-footer-padding-right: var(--ti-common-space-0, 0px);
119-
// 抽屉底部左外边距
120-
--ti-dialog-box-drawer-footer-margin-left: var(--ti-common-space-8x, 32px);
121-
// 抽屉底部右外边距
122-
--ti-dialog-box-drawer-footer-margin-right: var(--ti-common-space-10x, 40px);
46+
--tv-DialogBox-drawer-max-width: 1000px;
12347
// 抽屉内容与底部边框颜色
124-
--ti-dialog-box-drawer-divider-border-color: var(--ti-common-color-line-dividing, #f0f0f0);
125-
// 抽屉头部与底部边框颜色
126-
--ti-dialog-box-header-divider-border-color: var(--ti-common-color-transparent, transparent);
127-
// 抽屉边框圆角
128-
--ti-dialog-box-drawer-radius: var(--ti-common-space-0, 0px);
129-
// 弹窗布局模式(hide)
130-
--ti-dialog-box-wrapper-display: block;
131-
// 弹窗垂直布局(hide)
132-
--ti-dialog-box-wrapper-align-items: normal;
133-
// 底部布局显示
134-
--ti-dialog-box-footer-align: right;
48+
--tv-DialogBox-drawer-divider-border-color: var(--tv-color-border-divider);
13549
// 缩放按钮
136-
--ti-dialog-box-resize-icon-color: var(--ti-common-color-icon-normal, #808080);
50+
--tv-DialogBox-resize-icon-color: var(--tv-color-icon);
13751
// 缩放按钮悬浮状态
138-
--ti-dialog-box-resize-icon-color-hover: var(--ti-common-color-icon-normal, #808080);
52+
--tv-DialogBox-resize-icon-color-hover: var(--tv-color-icon-hover);
13953
// 缩放按钮大小
140-
--ti-dialog-box-resize-icon-size: var(--ti-common-font-size-2, 16px);
141-
// 按钮距离顶部距离
142-
--ti-dialog-box-btn-tools-position-top: var(--ti-common-size-3x, 12px);
143-
// 按钮距离右侧距离
144-
--ti-dialog-box-btn-tools-position-right: var(--ti-common-size-3x, 12px);
54+
--tv-DialogBox-resize-icon-size: var(--tv-icon-size);
14555
}

0 commit comments

Comments
 (0)