Skip to content

Commit 381036a

Browse files
chenxi-20chenxi-20
authored
feat: 主题变量增加默认值 (#3162)
1 parent 9d5e3d3 commit 381036a

File tree

98 files changed

+1849
-1856
lines changed

Some content is hidden

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

98 files changed

+1849
-1856
lines changed

‎packages/theme/build/buildVarToObj.js

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
import fs from 'node:fs'
22

33
export default () => {
4-
let varsString = fs.readFileSync('../src/base/vars.less', {encoding: 'utf-8'})
4+
let varsString = fs.readFileSync('../src/base/vars.less', { encoding: 'utf-8' })
55

6-
varsString = varsString.replace(':root', 'export const mapVar =')
7-
.replaceAll(' --tv', ' "--tv')
8-
.replaceAll(': ', ':')
9-
.replaceAll(':', '": "')
10-
.replaceAll(';', '",')
6+
const startIndex = varsString.indexOf('{')
7+
8+
varsString =
9+
'export const mapVar = ' +
10+
varsString
11+
.slice(startIndex)
12+
.replaceAll(' --tv', ' "--tv')
13+
.replaceAll(': ', ':')
14+
.replaceAll(':', '": "')
15+
.replaceAll(';', '",')
1116

1217
fs.writeFileSync('./mapVar.js', varsString)
1318
}

‎packages/theme/build/mapVar.js

Lines changed: 399 additions & 411 deletions
Large diffs are not rendered by default.

‎packages/theme/src/action-menu/vars.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
// 图标色（默认）
2626
--tv-ActionMenu-icon-color: var(--tv-color-icon-link, #1476ff);
2727
// 图标色（ card 类型）
28-
--tv-ActionMenu-icon-color-card: var(--tv-color-icon-control);
28+
--tv-ActionMenu-icon-color-card: var(--tv-color-icon-control, #191919);
2929
// 图标禁用色
3030
--tv-ActionMenu-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
3131
}

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

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@
2222
//-------------------------------------------------------全局场景：------------------------------------------
2323

2424
// 警告的圆角
25-
--tv-Alert-border-radius: var(--tv-border-radius-lg);
25+
--tv-Alert-border-radius: var(--tv-border-radius-lg, 8px);
2626
// 警告的水平内边距
27-
--tv-Alert-padding-x: var(--tv-space-xl);
27+
--tv-Alert-padding-x: var(--tv-space-xl, 16px);
2828
// 警告的垂直内边距
29-
--tv-Alert-padding-y: var(--tv-space-xl);
29+
--tv-Alert-padding-y: var(--tv-space-xl, 16px);
3030
// 警告的水平外边距
3131
--tv-Alert-margin-x: 0; // 规范上外边距不应该设置，但由于历史原因，normal时有固定的上下外边距，保留这个特性。
3232
// 警告的垂直外边距
@@ -37,75 +37,75 @@
3737
// 警告的图标大小
3838
--tv-Alert-icon-size: 20px;
3939
// 警告的图标右外边距
40-
--tv-Alert-icon-margin-right: var(--tv-space-md);
40+
--tv-Alert-icon-margin-right: var(--tv-space-md, 8px);
4141

4242
//-------------------------------------------------------content 场景：title/description/opration------------
4343

4444
// 警告的标题字号
45-
--tv-Alert-title-font-size: var(--tv-font-size-lg);
45+
--tv-Alert-title-font-size: var(--tv-font-size-lg, 16px);
4646
// 警告的标题字重
47-
--tv-Alert-title-font-weight: var(--tv-font-weight-bold);
47+
--tv-Alert-title-font-weight: var(--tv-font-weight-bold, 600);
4848
// 警告的标题颜色
49-
--tv-Alert-title-text-color: var(--tv-color-text);
49+
--tv-Alert-title-text-color: var(--tv-color-text, #191919);
5050
// 警告的标题下边距
51-
--tv-Alert-title-margin-bottom: var(--tv-space-sm);
51+
--tv-Alert-title-margin-bottom: var(--tv-space-sm, 4px);
5252

5353
// 警告的描述字号
54-
--tv-Alert-desc-font-size: var(--tv-font-size-default);
54+
--tv-Alert-desc-font-size: var(--tv-font-size-default, 14px);
5555
// 警告的描述字重
56-
--tv-Alert-desc-font-weight: var(--tv-font-weight-regular);
56+
--tv-Alert-desc-font-weight: var(--tv-font-weight-regular, 400);
5757
// 警告的描述颜色
58-
--tv-Alert-desc-text-color: var(--tv-color-text-secondary);
58+
--tv-Alert-desc-text-color: var(--tv-color-text-secondary, #595959);
5959

6060
//-------------------------------------------------------close-icon 场景：----------------------------------
6161

6262
// 警告的关闭按钮的大小
63-
--tv-Alert-close-icon-font-size: var(--tv-icon-size);
63+
--tv-Alert-close-icon-font-size: var(--tv-icon-size, 16px);
6464
// 警告的关闭按钮的颜色
65-
--tv-Alert-close-icon-color: var(--tv-color-icon);
65+
--tv-Alert-close-icon-color: var(--tv-color-icon, #808080);
6666
// 警告的关闭按钮的悬浮颜色
67-
--tv-Alert-close-icon-color-hover: var(--tv-color-icon-hover);
67+
--tv-Alert-close-icon-color-hover: var(--tv-color-icon-hover, #191919);
6868
// 警告的关闭按钮距上边的距离
69-
--tv-Alert-close-icon-top: var(--tv-space-lg);
69+
--tv-Alert-close-icon-top: var(--tv-space-lg, 12px);
7070
// 警告的关闭按钮距右边的距离
71-
--tv-Alert-close-icon-right: var(--tv-space-lg);
71+
--tv-Alert-close-icon-right: var(--tv-space-lg, 12px);
7272

7373
// 警告的关闭文本的大小
74-
--tv-Alert-close-text-font-size: var(--tv-font-size-default);
74+
--tv-Alert-close-text-font-size: var(--tv-font-size-default, 14px);
7575

7676
//-------------------------------------------------------Normal 场景：---------------------------------------
7777

7878
// 警告的Normal时，图标大小
79-
--tv-Alert-icon-size-normal: var(--tv-icon-size);
79+
--tv-Alert-icon-size-normal: var(--tv-icon-size, 16px);
8080
// 警告的Normal时，水平内边距
81-
--tv-Alert-padding-x-normal: var(--tv-space-xl);
81+
--tv-Alert-padding-x-normal: var(--tv-space-xl, 16px);
8282
// 警告的Normal时，垂直内边距
8383
--tv-Alert-padding-y-normal: 9px;
8484
// 警告的Normal时,水平外边距
8585
--tv-Alert-margin-x-normal: 0;
8686
// 警告的Normal时,垂直外边距
87-
--tv-Alert-margin-y-normal: var(--tv-space-xl);
87+
--tv-Alert-margin-y-normal: var(--tv-space-xl, 16px);
8888

8989
//-------------------------------------------------------type 场景：------------------------------------------
9090

9191
// success 主题时警告背景色
92-
--tv-Alert-bg-color-success: var(--tv-color-success-bg-light);
92+
--tv-Alert-bg-color-success: var(--tv-color-success-bg-light, #e6f2d5);
9393
// success 主题时警告图标色
94-
--tv-Alert-icon-color-success: var(--tv-color-success-icon);
94+
--tv-Alert-icon-color-success: var(--tv-color-success-icon, #5cb300);
9595
// error 主题时警告背景色
96-
--tv-Alert-bg-color-error: var(--tv-color-error-bg-light);
96+
--tv-Alert-bg-color-error: var(--tv-color-error-bg-light, #fce3e1);
9797
// error 主题时警告图标色
98-
--tv-Alert-icon-color-error: var(--tv-color-error-icon);
98+
--tv-Alert-icon-color-error: var(--tv-color-error-icon, #f23030);
9999
// warning 主题时警告背景色
100-
--tv-Alert-bg-color-warning: var(--tv-color-warn-bg-light);
100+
--tv-Alert-bg-color-warning: var(--tv-color-warn-bg-light, #ffebd1);
101101
// warning 主题时警告图标色
102-
--tv-Alert-icon-color-warning: var(--tv-color-warn-icon);
102+
--tv-Alert-icon-color-warning: var(--tv-color-warn-icon, #ff8800);
103103
// info 主题时警告背景色
104-
--tv-Alert-bg-color-info: var(--tv-color-info-bg-light);
104+
--tv-Alert-bg-color-info: var(--tv-color-info-bg-light, #deecff);
105105
// info 主题时警告图标色
106-
--tv-Alert-icon-color-info: var(--tv-color-info-icon);
106+
--tv-Alert-icon-color-info: var(--tv-color-info-icon, #1476ff);
107107
// simple 主题时警告背景色
108-
--tv-Alert-bg-color-simple: var(--tv-color-bg);
108+
--tv-Alert-bg-color-simple: var(--tv-color-bg, #f5f5f5);
109109
// simple 主题时警告图标色
110-
--tv-Alert-icon-color-simple: var(--tv-color-icon);
110+
--tv-Alert-icon-color-simple: var(--tv-color-icon, #808080);
111111
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@
1111
*/
1212

1313
.inject-Amount-vars() {
14-
--tv-Amount-icon-color: var(--tv-color-icon);
15-
--tv-Amount-icon-size: var(--tv-icon-size);
14+
--tv-Amount-icon-color: var(--tv-color-icon, #808080);
15+
--tv-Amount-icon-size: var(--tv-icon-size, 16px);
1616
}

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,33 +12,33 @@
1212

1313
.inject-Badge-vars() {
1414
// 标记的圆角
15-
--tv-Badge-border-radius: var(--tv-border-radius-round);
15+
--tv-Badge-border-radius: var(--tv-border-radius-round, 999px);
1616
// 标记的内边距
17-
--tv-Badge-horizontal-padding: var(--tv-space-base);
17+
--tv-Badge-horizontal-padding: var(--tv-space-base, 4px);
1818
// 标记的尺寸
19-
--tv-Badge-font-size: var(--tv-font-size-sm);
19+
--tv-Badge-font-size: var(--tv-font-size-sm, 12px);
2020
// 标记的字重
21-
--tv-Badge-font-weight: var(--tv-font-weight-regular);
21+
--tv-Badge-font-weight: var(--tv-font-weight-regular, 400);
2222
// 标记的文本色
23-
--tv-Badge-text-color: var(--tv-color-text-inverse);
23+
--tv-Badge-text-color: var(--tv-color-text-inverse, #ffffff);
2424
// 标记的背景色
25-
--tv-Badge-bg-color: var(--tv-color-act-danger-bg);
25+
--tv-Badge-bg-color: var(--tv-color-act-danger-bg, #f23030);
2626
// 标记的边框色
27-
--tv-Badge-border-color: var(--tv-color-border-inverse-tint);
27+
--tv-Badge-border-color: var(--tv-color-border-inverse-tint, #ffffff);
2828
// 标记a标签的文本及悬浮文本色
29-
--tv-Badge-a-text-color: var(--tv-color-text-inverse);
29+
--tv-Badge-a-text-color: var(--tv-color-text-inverse, #ffffff);
3030
// 标记左边距
31-
--tv-Badge-margin-left: var(--tv-space-sm);
31+
--tv-Badge-margin-left: var(--tv-space-sm, 4px);
3232
// 标记的小圆点背景色
33-
--tv-Badge-dot-bg-color: var(--tv-color-act-danger-bg);
33+
--tv-Badge-dot-bg-color: var(--tv-color-act-danger-bg, #f23030);
3434
// 标记的主要背景色
35-
--tv-Badge-primary-bg-color: var(--tv-color-bg-primary);
35+
--tv-Badge-primary-bg-color: var(--tv-color-bg-primary, #191919);
3636
// 标记的成功背景色
37-
--tv-Badge-success-bg-color: var(--tv-color-act-success-bg);
37+
--tv-Badge-success-bg-color: var(--tv-color-act-success-bg, #5cb300);
3838
// 标记的警告背景色
39-
--tv-Badge-warning-bg-color: var(--tv-color-act-warning-bg);
39+
--tv-Badge-warning-bg-color: var(--tv-color-act-warning-bg, #ff8800);
4040
// 标记的危险背景色
41-
--tv-Badge-danger-bg-color: var(--tv-color-act-danger-bg);
41+
--tv-Badge-danger-bg-color: var(--tv-color-act-danger-bg, #f23030);
4242
// 标记的信息背景色
43-
--tv-Badge-info-bg-color: var(--tv-color-act-info-bg);
43+
--tv-Badge-info-bg-color: var(--tv-color-act-info-bg, #1476ff);
4444
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@
6262
--tv-BaseSelect-collapse-icon-margin-left: var(--tv-space-xs, 2px);
6363

6464
// medium 尺寸的 tag 高度
65-
--tv-BaseSelect-tag-height-medium: calc(var(--tv-size-height-lg) - 8px);
65+
--tv-BaseSelect-tag-height-medium: calc(var(--tv-size-height-lg, 40px) - 8px);
6666
// 默认尺寸的 tag 高度
67-
--tv-BaseSelect-tag-height-default: calc(var(--tv-size-height-md) - 8px);
67+
--tv-BaseSelect-tag-height-default: calc(var(--tv-size-height-md, 32px) - 8px);
6868
// small 尺寸的tag高度
69-
--tv-BaseSelect-tag-height-small: calc(var(--tv-size-height-sm) - 8px);
69+
--tv-BaseSelect-tag-height-small: calc(var(--tv-size-height-sm, 28px) - 8px);
7070
// mini 尺寸的 tag 高度
71-
--tv-BaseSelect-tag-height-mini: calc(var(--tv-size-height-xs) - 8px);
71+
--tv-BaseSelect-tag-height-mini: calc(var(--tv-size-height-xs, 24px) - 8px);
7272
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,21 @@
1212

1313
.inject-Breadcrumb-vars() {
1414
// 字号
15-
--tv-Breadcrumb-font-size: var(--tv-font-size-default);
15+
--tv-Breadcrumb-font-size: var(--tv-font-size-default, 14px);
1616
// 文本行高
17-
--tv-Breadcrumb-text-line-height: var(--tv-line-height-number);
17+
--tv-Breadcrumb-text-line-height: var(--tv-line-height-number, 1.5);
1818
// 文本色
19-
--tv-Breadcrumb-text-color: var(--tv-color-text-control);
19+
--tv-Breadcrumb-text-color: var(--tv-color-text-control, #191919);
2020
// 选中文本色
21-
--tv-Breadcrumb-last-text-color: var(--tv-color-text-active-3);
21+
--tv-Breadcrumb-last-text-color: var(--tv-color-text-active-3, #191919);
2222
// 分隔符填充色
23-
--tv-Breadcrumb-separator-icon-color: var(--tv-color-text-placeholder);
23+
--tv-Breadcrumb-separator-icon-color: var(--tv-color-text-placeholder, #808080);
2424
// 分割箭头宽度
2525
--tv-Breadcrumb-separator-width: 16px;
2626
// 分隔图标的水平外边距
2727
--tv-Breadcrumb-separator-margin-x: 4px;
2828
// 分隔图标的垂直外边距
2929
--tv-Breadcrumb-separator-margin-y: 0;
3030
// 当前节点字重
31-
--tv-Breadcrumb-text-font-weight: var(--tv-font-weight-bold);
31+
--tv-Breadcrumb-text-font-weight: var(--tv-font-weight-bold, 600);
3232
}

‎packages/theme/src/bulletin-board/vars.less

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,47 +12,47 @@
1212

1313
.inject-BulletinBoard-vars() {
1414
// 公告栏字号
15-
--tv-BulletinBoard-font-size: var(--tv-font-size-default);
15+
--tv-BulletinBoard-font-size: var(--tv-font-size-default, 14px);
1616
// 标题字号
17-
--tv-BulletinBoard-title-font-size: var(--tv-font-size-heading-sm);
17+
--tv-BulletinBoard-title-font-size: var(--tv-font-size-heading-sm, 18px);
1818
// 标题字重
19-
--tv-BulletinBoard-title-font-weight: var(--tv-font-weight-bold);
19+
--tv-BulletinBoard-title-font-weight: var(--tv-font-weight-bold, 600);
2020
// 标题文字颜色
21-
--tv-BulletinBoard-title-text-color: var(--tv-color-text);
21+
--tv-BulletinBoard-title-text-color: var(--tv-color-text, #191919);
2222
// 子项文字颜色
23-
--tv-BulletinBoard-item-title-text-color: var(--tv-color-text);
23+
--tv-BulletinBoard-item-title-text-color: var(--tv-color-text, #191919);
2424
// tabs标题想文字hover字重
25-
--tv-BulletinBoard-tabs-item-hover-text-font-weight: var(--tv-font-weight-bold);
25+
--tv-BulletinBoard-tabs-item-hover-text-font-weight: var(--tv-font-weight-bold, 600);
2626
// 子项标题文字字重
27-
--tv-BulletinBoard-item-title-font-weight: var(--tv-font-weight-bold);
27+
--tv-BulletinBoard-item-title-font-weight: var(--tv-font-weight-bold, 600);
2828
// 子项日期文字颜色
29-
--tv-BulletinBoard-item-date-text-color: var(--tv-color-text-weaken);
29+
--tv-BulletinBoard-item-date-text-color: var(--tv-color-text-weaken, #808080);
3030
// 子项日期文字尺寸
31-
--tv-BulletinBoard-item-date-font-size: var(--tv-font-size-default);
31+
--tv-BulletinBoard-item-date-font-size: var(--tv-font-size-default, 14px);
3232
// new标签背景颜色
33-
--tv-BulletinBoard-new-bg-color: var(--tv-color-error-bg-light);
33+
--tv-BulletinBoard-new-bg-color: var(--tv-color-error-bg-light, #fce3e1);
3434
// new标签文字颜色
35-
--tv-BulletinBoard-new-text-color: var(--tv-color-error-text);
35+
--tv-BulletinBoard-new-text-color: var(--tv-color-error-text, #f23030);
3636
// new标签边框圆角
37-
--tv-BulletinBoard-new-border-radius: var(--tv-border-radius-xs);
37+
--tv-BulletinBoard-new-border-radius: var(--tv-border-radius-xs, 2px);
3838
// new标签文字大小
39-
--tv-BulletinBoard-new-font-size: var(--tv-font-size-sm);
39+
--tv-BulletinBoard-new-font-size: var(--tv-font-size-sm, 12px);
4040
// 更多按钮文字颜色
41-
--tv-BulletinBoard-more-text-color: var(--tv-color-text);
41+
--tv-BulletinBoard-more-text-color: var(--tv-color-text, #191919);
4242
// 更多按钮图标颜色
43-
--tv-BulletinBoard-more-icon-color: var(--tv-color-icon);
43+
--tv-BulletinBoard-more-icon-color: var(--tv-color-icon, #808080);
4444
// 更多按钮图标悬浮颜色
45-
--tv-BulletinBoard-more-icon-color-hover: var(--tv-color-icon-hover);
45+
--tv-BulletinBoard-more-icon-color-hover: var(--tv-color-icon-hover, #191919);
4646
// 更多按钮文字尺寸
47-
--tv-BulletinBoard-more-font-size: var(--tv-font-size-default);
47+
--tv-BulletinBoard-more-font-size: var(--tv-font-size-default, 14px);
4848
// 更多按钮图标尺寸
49-
--tv-BulletinBoard-more-icon-font-size: var(--tv-font-size-default);
49+
--tv-BulletinBoard-more-icon-font-size: var(--tv-font-size-default, 14px);
5050
// tabs标签文字颜色
51-
--tv-BulletinBoard-tabs-item-text-color: var(--tv-color-text);
51+
--tv-BulletinBoard-tabs-item-text-color: var(--tv-color-text, #191919);
5252
// tabs标签背景颜色
53-
--tv-BulletinBoard-tabs-item-bg-color: var(--tv-color-bg-primary);
53+
--tv-BulletinBoard-tabs-item-bg-color: var(--tv-color-bg-primary, #191919);
5454
// tabs标签文字禁用颜色
55-
--tv-BulletinBoard-tabs-item-disabled-text-color: var(--tv-color-text-disabled);
55+
--tv-BulletinBoard-tabs-item-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
5656
// tabs标签头部边框颜色
57-
--tv-BulletinBoard-tabs-header-border-color: var(--tv-color-border);
57+
--tv-BulletinBoard-tabs-header-border-color: var(--tv-color-border, #c2c2c2);
5858
}

0 commit comments

Comments
 (0)