Skip to content

Commit 3446b79

Browse files
zzcrzzcr
authored
refactor(collapse): [collapse] refactor collapse theme vars (#2201)
1 parent 356de96 commit 3446b79

File tree

5 files changed

+58
-159
lines changed

5 files changed

+58
-159
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -304,10 +304,10 @@
304304
/* 2.6.1 常态 */
305305
--tv-color-bg: var(--tv-base-color-common-3); // #f5f5f5 通用背景色 /选块的默认背景颜色、滑块手柄的背景颜色/表格表头/穿梭框头部背景颜色/下拉搜索的背景、折叠面板背景色
306306
--tv-color-bg-primary: var(--tv-base-color-brand); // #191919 主要背景色（品牌色）：slider/step/流程图
307-
--tv-color-bg-secondary: var(--tv-base-color-common-1); // #fff 次要背景色（白色）：// 输入框背景/默认按钮背景
307+
--tv-color-bg-secondary: var(--tv-base-color-common-1); // #fff 次要背景色（白色）：// 输入框背景/默认按钮背景/折叠面板头部背景色
308308
--tv-color-bg-control: var(--tv-base-color-common-7); // #c2c2c2 单选/复选/开关/滑块默认背景色
309309
--tv-color-bg-control-unactive: var(--tv-base-color-common-7); // #c2c2c2 开关组件-关闭状态-背景色
310-
--tv-color-bg-gray-1: var(--tv-base-color-common-2); // #fafafa 灰色背景-1：灰色卡片背景色/折叠面板/表格下展背景色
310+
--tv-color-bg-gray-1: var(--tv-base-color-common-2); // #fafafa 灰色背景-1：灰色卡片背景色/表格下展背景色
311311
--tv-color-bg-gray-2: var(--tv-base-color-common-5); // #e6e6e6 灰色背景-2灰色标签背景色
312312
--tv-color-bg-header: var(--tv-base-color-common-4); // #f0f0f0 表头背景色(如果只有表格使用，就转成组件级变量）
313313

‎packages/theme/src/collapse-item/index.less‎

Lines changed: 36 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -16,59 +16,21 @@
1616
@collapse-item-prefix-cls: ~'@{css-prefix}collapse-item';
1717

1818
.@{collapse-item-prefix-cls} {
19-
.component-css-vars-collapse-item();
20-
margin-top: var(--ti-collapse-item-margin-top);
21-
background-color: var(--ti-collapse-item-bg-color);
22-
border: var(--ti-collapse-item-border-length) solid var(--ti-collapse-item-border-color);
23-
border-left-color: var(--ti-collapse-item-border-color-left);
24-
border-right-color: var(--ti-collapse-item-border-color-right);
25-
border-top-color: var(--ti-collapse-item-border-color-top);
26-
border-radius: var(--ti-collapse-item-border-radius);
27-
28-
&:last-child {
29-
margin-bottom: -1px;
30-
}
31-
32-
&.is-disabled {
33-
border-left-color: var(--ti-collapse-item-disabled-border-color-left);
34-
border-right-color: var(--ti-collapse-item-disabled-border-color-right);
35-
border-top-color: var(--ti-collapse-item-disabled-border-color-top);
36-
}
37-
38-
&.is-disabled &__header {
39-
color: var(--ti-collapse-item-disabled-text-color);
40-
background-color: var(--ti-collapse-item-disabled-header-bg-color);
41-
cursor: not-allowed;
42-
}
43-
44-
&.is-disabled &__arrow svg {
45-
fill: var(--ti-collapse-item-disabled-text-color);
46-
}
47-
48-
&.is-disabled &__word-overflow {
49-
cursor: not-allowed;
50-
}
19+
.inject-CollapseItem-vars();
20+
background-color: var(--tv-CollapseItem-bg-color);
21+
color: var(--tv-CollapseItem-text-color);
22+
border-top: 1px solid var(--tv-CollapseItem-header-border-color);
5123

5224
&__header {
5325
display: flex;
54-
border: 1px solid var(--ti-collapse-item-header-border-color);
55-
border-left-color: var(--ti-collapse-item-header-border-color-left);
56-
border-right-color: var(--ti-collapse-item-header-border-color-right);
57-
font-weight: var(--ti-collapse-item-header-font-weight);
5826
align-items: center;
59-
min-height: var(--ti-collapse-item-header-min-height);
60-
background-color: var(--ti-collapse-item-header-bg-color);
61-
color: var(--ti-collapse-item-text-color);
62-
font-size: var(--ti-collapse-item-header-font-size);
27+
min-height: 40px;
28+
background-color: var(--tv-CollapseItem-header-bg-color);
29+
font-size: var(--tv-CollapseItem-header-font-size);
6330
outline: 0;
6431
cursor: pointer;
6532
transition: border-bottom-color 0.3s;
66-
border-radius: var(--ti-collapse-item-border-radius);
67-
padding: var(--ti-collapse-item-header-padding-vertical) var(--ti-collapse-item-header-padding-horizontal);
68-
69-
&.focusing:focus:not(:hover) {
70-
color: var(--ti-collapse-item-header-focus-text-color);
71-
}
33+
padding: 12px 20px;
7234

7335
.@{collapse-item-prefix-cls}__word-overflow {
7436
white-space: nowrap;
@@ -80,63 +42,62 @@
8042
}
8143

8244
.@{collapse-item-prefix-cls}__arrow {
83-
margin-right: var(--ti-collapse-item-arrow-margin-right);
84-
font-size: var(--ti-collapse-item-arrow-font-size);
45+
margin-right: 12px;
8546
order: -1;
8647
transition: transform 0.3s;
87-
transform: var(--ti-collapse-item-arrow-transform);
48+
transform: rotate(90deg);
8849

8950
svg {
90-
font-size: var(--ti-collapse-item-icon-font-size);
91-
fill: var(--ti-collapse-item-icon-color);
51+
width: var(--tv-CollapseItem-icon-size);
52+
height: var(--tv-CollapseItem-icon-size);
53+
fill: var(--tv-CollapseItem-icon-color);
9254
}
9355
}
9456

9557
.@{collapse-item-prefix-cls}__title__right {
9658
margin-left: auto;
97-
color: var(--ti-collapse-item-title-right-color);
98-
fill: var(--ti-collapse-item-title-right-fill);
59+
color: var(--tv-CollapseItem-title-right-color);
60+
fill: var(--tv-CollapseItem-title-right-icon-color);
9961
}
10062

10163
&.is-active {
102-
border-bottom-color: transparent;
103-
10464
.@{collapse-item-prefix-cls}__arrow {
105-
transform: var(--ti-collapse-item-is-active-arrow-transform);
106-
107-
svg {
108-
fill: var(--ti-collapse-item-is-active-arrow-text-color);
109-
}
65+
transform: rotate(-90deg);
11066
}
11167
}
11268
}
11369

114-
&:hover:not(.is-disabled) {
115-
.@{collapse-item-prefix-cls}__arrow {
70+
&.is-disabled &__header {
71+
color: var(--tv-CollapseItem-disabled-text-color);
72+
background-color: var(--tv-CollapseItem-disabled-header-bg-color);
73+
cursor: not-allowed;
74+
}
75+
76+
&.is-disabled &__arrow svg {
77+
fill: var(--tv-CollapseItem-disabled-text-color);
78+
}
79+
80+
&.is-disabled &__word-overflow {
81+
cursor: not-allowed;
82+
}
83+
84+
&:not(.is-disabled) {
85+
.@{collapse-item-prefix-cls}__arrow:hover {
11686
svg {
117-
fill: var(--ti-collapse-item-arrow-hover-text-color);
87+
fill: var(--tv-CollapseItem-arrow-hover-text-color);
11888
}
11989
}
12090
}
12191

12292
&__wrap {
12393
will-change: height;
124-
background-color: var(--ti-collapse-item-wrap-bg-color);
12594
overflow: hidden;
12695
box-sizing: border-box;
12796
}
12897

12998
&__content {
130-
padding-top: var(--ti-collapse-item-content-padding-top);
131-
padding-left: var(--ti-collapse-item-content-padding-left);
132-
padding-right: var(--ti-collapse-item-content-padding-right);
133-
padding-bottom: var(--ti-collapse-item-content-padding-bottom);
134-
font-size: var(--ti-collapse-item-content-font-size);
135-
color: var(--ti-collapse-item-text-color);
136-
border: 1px solid var(--ti-collapse-item-content-border-color);
137-
border-right-color: var(--ti-collapse-item-content-border-color-right);
138-
border-left-color: var(--ti-collapse-item-content-border-color-left);
139-
border-top-color: var(--ti-collapse-item-content-border-color-top);
140-
line-height: var(--ti-collapse-item-content-line-height);
99+
padding: 24px 20px;
100+
font-size: var(--tv-CollapseItem-content-font-size);
101+
line-height: 1.5;
141102
}
142103
}

‎packages/theme/src/collapse-item/vars.less‎

Lines changed: 16 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -10,93 +10,31 @@
1010
*
1111
*/
1212

13-
.component-css-vars-collapse-item() {
13+
.inject-CollapseItem-vars() {
1414
// 面板默认文本色
15-
--ti-collapse-item-text-color: var(--ti-common-color-text-primary, #191919);
15+
--tv-CollapseItem-text-color: var(--tv-color-text);
1616
// 面板背景色
17-
--ti-collapse-item-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
18-
// 面板边框色
19-
--ti-collapse-item-border-color: transparent;
20-
// 面板边大小
21-
--ti-collapse-item-border-length: var(--ti-common-border-radius-0, 0);
22-
// 面板左边框色
23-
--ti-collapse-item-border-color-left: var(--ti-collapse-item-border-color);
24-
// 面板右边框色
25-
--ti-collapse-item-border-color-right: var(--ti-collapse-item-border-color);
26-
// 面板上边框色
27-
--ti-collapse-item-border-color-top: var(--ti-collapse-item-border-color);
28-
// 面板禁用时左边框色
29-
--ti-collapse-item-disabled-border-color-left: var(--ti-collapse-item-border-color);
30-
// 面板禁用时右边框色
31-
--ti-collapse-item-disabled-border-color-right: var(--ti-collapse-item-border-color);
32-
// 面板禁用时上边框色
33-
--ti-collapse-item-disabled-border-color-top: var(--ti-collapse-item-border-color);
34-
// 面板圆角
35-
--ti-collapse-item-border-radius: 0;
36-
// 面板顶部外边距
37-
--ti-collapse-item-margin-top: calc(var(--ti-common-space-0, 0px) - 2px );
38-
// 面板头部最小高度
39-
--ti-collapse-item-header-min-height: var(--ti-common-size-height-medium, 40px);
17+
--tv-CollapseItem-bg-color: var(--tv-color-bg);
4018
// 面板头部向下箭头图标色
41-
--ti-collapse-item-icon-color: #808080;
42-
// 面板内容背景色
43-
--ti-collapse-item-wrap-bg-color: var(--ti-common-bg-minor, #fafafa);
19+
--tv-CollapseItem-icon-color: var(--tv-color-icon);
4420
// 面板禁用文本色
45-
--ti-collapse-item-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
46-
// 面板禁用背景色
47-
--ti-collapse-item-disabled-header-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0);
21+
--tv-CollapseItem-disabled-text-color: var(--tv-color-icon-disabled);
22+
// 面板头部背景色
23+
--tv-CollapseItem-header-bg-color: var(--tv-color-bg-secondary);
24+
// 面板头部禁用背景色
25+
--tv-CollapseItem-disabled-header-bg-color: var(--tv-color-bg-disabled);
4826
// 面板头部字号
49-
--ti-collapse-item-header-font-size: var(--ti-common-font-size-base, 14px);
50-
// 面板头部字重
51-
--ti-collapse-item-header-font-weight: var(--ti-common-font-weight-4, normal);
52-
// 面板头部的聚焦文本色(hide)
53-
--ti-collapse-item-header-focus-text-color: var(--ti-common-color-text-primary, #191919);
54-
// 面板头部箭头尺寸(hide)
55-
--ti-collapse-item-arrow-font-size: var(--ti-common-font-size-base, 14px);
56-
// 面板头部箭头右外边距
57-
--ti-collapse-item-arrow-margin-right: var(--ti-common-space-3x, 12px);
27+
--tv-CollapseItem-header-font-size: var(--tv-font-size-md);
5828
// 面板头部向上箭头图标色|箭头悬浮色
59-
--ti-collapse-item-arrow-hover-text-color: var(--ti-base-color-brand, #191919);
29+
--tv-CollapseItem-arrow-hover-text-color: var(--tv-color-icon-hover);
6030
// 面板头部箭头尺寸
61-
--ti-collapse-item-icon-font-size: var(--ti-common-font-size-2, 16px);
62-
// 面板头部箭头旋转角度
63-
--ti-collapse-item-arrow-transform: rotate(90deg);
64-
// 面板展开头部箭头旋转角度
65-
--ti-collapse-item-is-active-arrow-transform: rotate(-90deg);
66-
// 面板展开头部箭头图标色
67-
--ti-collapse-item-is-active-arrow-text-color: var(--ti-collapse-item-icon-color);
68-
// 面板头部垂直内边距
69-
--ti-collapse-item-header-padding-vertical: var(--ti-common-size-3x, 12px);
70-
// 面板头部水平内边距
71-
--ti-collapse-item-header-padding-horizontal: var(--ti-common-space-5x, 20px);
72-
// 面板头部背景色
73-
--ti-collapse-item-header-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
31+
--tv-CollapseItem-icon-size: var(--tv-icon-size);
7432
// 面板头部边框色
75-
--ti-collapse-item-header-border-color: var(--ti-base-color-common-5, #f0f0f0);
76-
// 面板头部左边框色
77-
--ti-collapse-item-header-border-color-left: var(--ti-common-color-light, #ffffff);
78-
// 面板头部右边框色
79-
--ti-collapse-item-header-border-color-right: var(--ti-common-color-light, #ffffff);
80-
// 面板内容边框色
81-
--ti-collapse-item-content-border-color: var(--ti-common-color-light, #ffffff);
82-
// 面板内容左边框色
83-
--ti-collapse-item-content-border-color-left: var(--ti-collapse-item-content-border-color);
84-
// 面板内容右边框色
85-
--ti-collapse-item-content-border-color-right: var(--ti-collapse-item-content-border-color);
86-
// 面板内容顶部边框色
87-
--ti-collapse-item-content-border-color-top: var(--ti-common-color-light, #ffffff);
88-
// 面板内容顶部内边距
89-
--ti-collapse-item-content-padding-top: var(--ti-common-space-6x, 24px);
90-
// 面板内容左内边距
91-
--ti-collapse-item-content-padding-left: var(--ti-common-space-5x, 20px);
92-
// 面板内容右内边距
93-
--ti-collapse-item-content-padding-right: var(--ti-common-space-5x, 20px);
94-
// 面板内容底部内边距
95-
--ti-collapse-item-content-padding-bottom: var(--ti-common-space-6x, 24px);
33+
--tv-CollapseItem-header-border-color: var(--tv-color-border-divider);
9634
// 面板内容字号
97-
--ti-collapse-item-content-font-size: var(--ti-common-font-size-base, 14px);
35+
--tv-CollapseItem-content-font-size: var(--tv-font-size-md);
9836
// 面板右侧标题颜色
99-
--ti-collapse-item-title-right-color: #1476ff;
37+
--tv-CollapseItem-title-right-color: var(--tv-color-text-link);
10038
// 面板右侧图标颜色
101-
--ti-collapse-item-title-right-fill: #1476ff;
39+
--tv-CollapseItem-title-right-icon-color: var(--tv-color-icon-link);
10240
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
@collapse-prefix-cls: ~'@{css-prefix}collapse';
1616

1717
.@{collapse-prefix-cls} {
18-
border-top: 1px solid #d9d9d9;
19-
border-bottom: 1px solid #d9d9d9;
20-
.component-css-vars-collapse();
18+
.inject-Collapse-vars();
19+
border-bottom: 1px solid var(--tv-Collapse-divider-line-color);
2120
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@
1010
*
1111
*/
1212

13-
.component-css-vars-collapse() {
13+
.inject-Collapse-vars() {
14+
--tv-Collapse-divider-line-color: var(--tv-color-border-divider);
1415
}

0 commit comments

Comments
 (0)