Skip to content

Commit ca051e7

Browse files
chenxi-20chenxi-20
authored
fix(theme): 增加正确的默认值，提升整体主题适配开发效率 (#2190)
1 parent f6dc726 commit ca051e7

File tree

106 files changed

+1769
-1769
lines changed

Some content is hidden

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

106 files changed

+1769
-1769
lines changed

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

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

1313
.component-css-vars-action-menu() {
1414
// 按钮文本字重
15-
--ti-action-menu-font-weight: var(--ti-common-font-weight-normal);
15+
--ti-action-menu-font-weight: var(--ti-common-font-weight-normal, 400);
1616
// 按钮文本装饰
1717
--ti-action-menu-hover-text-decoration: underline;
1818
// 更多...图标的宽度
19-
--ti-action-menu-more-icon-width: var(--ti-common-size-4x);
19+
--ti-action-menu-more-icon-width: var(--ti-common-size-4x, 16px);
2020
// 更多...图标的高度
21-
--ti-action-menu-more-icon-height: var(--ti-common-size-4x);
21+
--ti-action-menu-more-icon-height: var(--ti-common-size-4x, 16px);
2222
// 更多...图标的右边外边距
2323
--ti-action-menu-more-icon-margin-right: var(--ti-common-space-0, 0px);
2424
// 下拉触发源文本颜色
@@ -30,11 +30,11 @@
3030
// 分割线颜色
3131
--ti-action-menu-item-line-bg-color: transparent;
3232
// 分割线宽度
33-
--ti-action-menu-item-line-width: var(--ti-common-space-0);
33+
--ti-action-menu-item-line-width: var(--ti-common-space-0, 0px);
3434
// 下拉菜单项悬浮背景色
3535
--ti-action-menu-item-hover-bg-color: transparent;
3636
// 下拉菜单项文本悬浮色
37-
--ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link);
37+
--ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link, #1476ff);
3838
// 下拉菜单项图标悬浮色
3939
--ti-action-menu-item-hover-icon-color: var(--ti-common-color-text-link-hover, #1476ff); // 没有这个颜色的图标色
4040
// 下拉菜单项图标顶部内边距
@@ -46,7 +46,7 @@
4646
// 下拉菜单项图标左侧内边距
4747
--ti-action-menu-item-svg-margin-left: var(--ti-common-space-0, 0px);
4848
// 下拉菜单卡片模式字体颜色
49-
--ti-action-menu-item-card-text-color: var(--ti-common-color-text-primary);
49+
--ti-action-menu-item-card-text-color: var(--ti-common-color-text-primary, #191919);
5050
// 下拉菜单卡片模式字体颜色
51-
--ti-action-menu-item-card-hover-text-color: var(--ti-common-color-text-primary);
51+
--ti-action-menu-item-card-hover-text-color: var(--ti-common-color-text-primary, #191919);
5252
}

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

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -23,31 +23,31 @@
2323
'Microsoft JhengHei'
2424
);
2525
// 边框厚度(new)
26-
--ti-alert-border-weight: var(--ti-common-size-0);
26+
--ti-alert-border-weight: var(--ti-common-size-0, 0px);
2727
// 描述字号
28-
--ti-alert-description-font-size: var(--ti-common-font-size-base, 12px);
28+
--ti-alert-description-font-size: var(--ti-common-font-size-base, 14px);
2929
// 默认关闭图标固定定位顶部距离(hide)
30-
--ti-alert-close-position-top: var(--ti-common-space-3x);
30+
--ti-alert-close-position-top: var(--ti-common-space-3x, 12px);
3131
// 默认关闭图标字号
32-
--ti-alert-close-font-size: var(--ti-common-font-size-2);
32+
--ti-alert-close-font-size: var(--ti-common-font-size-2, 16px);
3333
// 自定义关闭文字字号
34-
--ti-alert-close-text-font-size: var(--ti-common-font-size-base, 12px);
34+
--ti-alert-close-text-font-size: var(--ti-common-font-size-base, 14px);
3535
// 组件圆角
36-
--ti-alert-border-radius: var(--ti-common-border-radius-4);
36+
--ti-alert-border-radius: var(--ti-common-border-radius-4, 8px);
3737
// 标题文本色
38-
--ti-alert-title-text-color: var(--ti-common-color-text-primary, #252b3a);
38+
--ti-alert-title-text-color: var(--ti-common-color-text-primary, #191919);
3939
// success类型标题文本色
40-
--ti-alert-success-title-text-color: var(--ti-common-color-text-primary, #252b3a);
40+
--ti-alert-success-title-text-color: var(--ti-common-color-text-primary, #191919);
4141
// info类型标题文本色
42-
--ti-alert-info-title-text-color: var(--ti-common-color-text-primary, #252b3a);
42+
--ti-alert-info-title-text-color: var(--ti-common-color-text-primary, #191919);
4343
// warning类型标题文本色
44-
--ti-alert-warning-title-text-color: var(--ti-common-color-text-primary, #252b3a);
44+
--ti-alert-warning-title-text-color: var(--ti-common-color-text-primary, #191919);
4545
// error类型标题文本色
46-
--ti-alert-error-title-text-color: var(--ti-common-color-text-primary, #252b3a);
46+
--ti-alert-error-title-text-color: var(--ti-common-color-text-primary, #191919);
4747
// simple类型标题文本色
48-
--ti-alert-simple-title-text-color: var(--ti-common-color-text-primary, #252b3a);
48+
--ti-alert-simple-title-text-color: var(--ti-common-color-text-primary, #191919);
4949
// 标题字号
50-
--ti-alert-title-font-size: var(--ti-common-font-size-2);
50+
--ti-alert-title-font-size: var(--ti-common-font-size-2, 16px);
5151
// 标题图标字号
5252
--ti-alert-icon-font-size: var(--ti-common-font-size-2, 16px);
5353
// 描述内容行高
@@ -57,100 +57,100 @@
5757
// 描述内容水平内边距
5858
--ti-alert-normal-content-padding-horizontal: var(--ti-common-space-2x, 8px);
5959
// 描述内容提示内容顶部外边距
60-
--ti-alert-description-margin-top: var(--ti-common-space-base);
60+
--ti-alert-description-margin-top: var(--ti-common-space-base, 4px);
6161
// 描述内容提示内容底部外边距
62-
--ti-alert-description-margin-bottom: var(--ti-common-space-0);
62+
--ti-alert-description-margin-bottom: var(--ti-common-space-0, 0px);
6363
// 描述默认文本色
64-
--ti-alert-description-text-color: var(--ti-common-color-text-secondary, #575d6c);
64+
--ti-alert-description-text-color: var(--ti-common-color-text-secondary, #595959);
6565
// 默认顶部内边距
66-
--ti-alert-normal-padding-top: calc(var(--ti-common-space-2x) + 1.5px);
66+
--ti-alert-normal-padding-top: calc(var(--ti-common-space-2x, 8px) + 1.5px);
6767
// 默认右内边距
68-
--ti-alert-normal-padding-right: var(--ti-common-space-4x);
68+
--ti-alert-normal-padding-right: var(--ti-common-space-4x, 16px);
6969
// 默认底部内边距
70-
--ti-alert-normal-padding-bottom: calc(var(--ti-common-space-2x) + 1.5px);
70+
--ti-alert-normal-padding-bottom: calc(var(--ti-common-space-2x, 8px) + 1.5px);
7171
// 默认左内边距
7272
--ti-alert-normal-padding-left: var(--ti-common-space-4x, 16px);
7373
// 默认垂直外边距
74-
--ti-alert-normal-margin-vertical: var(--ti-common-space-4x);
74+
--ti-alert-normal-margin-vertical: var(--ti-common-space-4x, 16px);
7575
// 默认水平外边距
7676
--ti-alert-normal-margin-horizontal: var(--ti-common-space-0, 0px);
7777
// large尺寸顶部内边距
78-
--ti-alert-large-padding-top: var(--ti-common-space-4x);
78+
--ti-alert-large-padding-top: var(--ti-common-space-4x, 16px);
7979
// large尺寸底部内边距
80-
--ti-alert-large-padding-bottom: var(--ti-common-space-4x);
80+
--ti-alert-large-padding-bottom: var(--ti-common-space-4x, 16px);
8181
// large尺寸左内边距
8282
--ti-alert-large-padding-left: var(--ti-common-space-4x, 16px);
8383
// large尺寸右内边距
84-
--ti-alert-large-padding-right: var(--ti-common-space-4x);
84+
--ti-alert-large-padding-right: var(--ti-common-space-4x, 16px);
8585
// large尺寸操作文本色
86-
--ti-alert-opration-text-color: var(--ti-common-color-text-highlight, #526ecc);
86+
--ti-alert-opration-text-color: var(--ti-common-color-text-highlight, #1476ff);
8787
// large尺寸操作字号
88-
--ti-alert-opration-font-size: var(--ti-common-font-size-base, 12px);
88+
--ti-alert-opration-font-size: var(--ti-common-font-size-base, 14px);
8989
// large尺寸图标字号
90-
--ti-alert-large-icon-font-size: var(--ti-common-font-size-4, 24px);
90+
--ti-alert-large-icon-font-size: var(--ti-common-font-size-4, 20px);
9191
// large尺寸描述内容左内边距
92-
--ti-alert-large-content-padding-left: var(--ti-common-space-2x);
92+
--ti-alert-large-content-padding-left: var(--ti-common-space-2x, 8px);
9393
// 大尺寸关闭图标字号
9494
--ti-alert-large-close-font-size: var(--ti-alert-close-font-size);
9595

9696
// warning类型边框色
97-
--ti-alert-warning-border-color: var(--ti-common-color-warn-border, #ffd0a6);
97+
--ti-alert-warning-border-color: var(--ti-common-color-warn-border, #ffebd1);
9898
// warning类型图标色
99-
--ti-alert-warning-icon-color: var(--ti-common-color-warn, #fa9841);
99+
--ti-alert-warning-icon-color: var(--ti-common-color-warn, #ff8800);
100100
// warning类型链接色(hide)
101-
--ti-alert-warning-link-text-color: var(--ti-common-color-warn-text, #e37d29);
101+
--ti-alert-warning-link-text-color: var(--ti-common-color-warn-text, #ff8800);
102102
// warning类型背景色
103-
--ti-alert-warning-bg-color: var(--ti-common-color-warn-bg, #fff3e8);
103+
--ti-alert-warning-bg-color: var(--ti-common-color-warn-bg, #ffebd1);
104104
// warning类型关闭图标色
105-
--ti-alert-warning-close-icon-color: var(--ti-common-color-text-weaken);
105+
--ti-alert-warning-close-icon-color: var(--ti-common-color-text-weaken, #808080);
106106
// warning类型悬浮关闭图标色
107-
--ti-alert-warning-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
107+
--ti-alert-warning-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover, #7693f5);
108108
// error类型边框色
109-
--ti-alert-error-border-color: var(--ti-common-color-error-border-secondary, #ffbcba);
109+
--ti-alert-error-border-color: var(--ti-common-color-error-border-secondary, #fce3e1);
110110
// error类型图标色
111-
--ti-alert-error-icon-color: var(--ti-common-color-error, #f66f6a);
111+
--ti-alert-error-icon-color: var(--ti-common-color-error, #f23030);
112112
// error类型链接色(hide)
113-
--ti-alert-error-link-text-color: var(--ti-common-color-error-text, #de504e);
113+
--ti-alert-error-link-text-color: var(--ti-common-color-error-text, #f23030);
114114
// error类型背景色
115-
--ti-alert-error-bg-color: var(--ti-common-color-error-bg, #ffeeed);
115+
--ti-alert-error-bg-color: var(--ti-common-color-error-bg, #fce3e1);
116116
// error类型关闭图标色
117-
--ti-alert-error-close-icon-color: var(--ti-common-color-text-weaken);
117+
--ti-alert-error-close-icon-color: var(--ti-common-color-text-weaken, #808080);
118118
// error类型悬浮关闭图标色
119-
--ti-alert-error-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
119+
--ti-alert-error-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover, #7693f5);
120120
// success类型边框色
121-
--ti-alert-success-border-color: var(--ti-common-color-success-border, #acf2dc);
121+
--ti-alert-success-border-color: var(--ti-common-color-success-border, #e6f2d5);
122122
// success类型图标色
123-
--ti-alert-success-icon-color: var(--ti-common-color-success, #50d4ab);
123+
--ti-alert-success-icon-color: var(--ti-common-color-success, #5cb300);
124124
// success类型链接色(hide)
125-
--ti-alert-success-link-text-color: var(--ti-common-color-text-success, #3ac295);
125+
--ti-alert-success-link-text-color: var(--ti-common-color-text-success, #5cb300);
126126
// success类型背景色
127-
--ti-alert-success-bg-color: var(--ti-common-color-success-bg, #edfff9);
127+
--ti-alert-success-bg-color: var(--ti-common-color-success-bg, #e6f2d5);
128128
// success类型关闭图标色
129-
--ti-alert-success-close-icon-color: var(--ti-common-color-text-weaken);
129+
--ti-alert-success-close-icon-color: var(--ti-common-color-text-weaken, #808080);
130130
// success类型悬浮关闭图标色
131-
--ti-alert-success-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
131+
--ti-alert-success-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover, #7693f5);
132132

133133
// info类型边框色
134-
--ti-alert-info-border-color: var(--ti-common-color-prompt-border, #beccfa);
134+
--ti-alert-info-border-color: var(--ti-common-color-prompt-border, #deecff);
135135
// info类型图标色
136-
--ti-alert-info-icon-color: var(--ti-common-color-prompt, #5e7ce0);
136+
--ti-alert-info-icon-color: var(--ti-common-color-prompt, #1476ff);
137137
// info类型链接色(hide)
138-
--ti-alert-info-link-text-color: var(--ti-common-color-prompt-text, #526ecc);
138+
--ti-alert-info-link-text-color: var(--ti-common-color-prompt-text, #1476ff);
139139
// info类型背景色
140-
--ti-alert-info-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff);
140+
--ti-alert-info-bg-color: var(--ti-common-color-prompt-bg, #deecff);
141141
// info类型关闭图标色
142-
--ti-alert-info-close-icon-color: var(--ti-common-color-text-weaken);
142+
--ti-alert-info-close-icon-color: var(--ti-common-color-text-weaken, #808080);
143143
// info类型悬浮关闭图标色
144-
--ti-alert-info-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
144+
--ti-alert-info-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover, #7693f5);
145145

146146
// simple类型边框色
147147
--ti-alert-simple-border-color: var(--ti-common-color-info-border, #d3d4d6);
148148
// simple类型图标色
149149
--ti-alert-simple-icon-color: #808080;
150150
// simple类型链接色(hide)
151-
--ti-alert-simple-link-text-color: var(--ti-common-color-primary-active, #7693f5);
151+
--ti-alert-simple-link-text-color: var(--ti-common-color-primary-active, #595959);
152152
// simple类型背景色
153-
--ti-alert-simple-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
153+
--ti-alert-simple-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0);
154154
// simple类型关闭图标色
155155
--ti-alert-simple-close-icon-color: var(--ti-alert-simple-icon-color);
156156
// simple类型悬浮关闭图标色

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@
1111
*/
1212

1313
.component-css-vars-amount() {
14-
--ti-amount-icon-color: var(--ti-base-color-brand-6, #5e7ce0);
14+
--ti-amount-icon-color: var(--ti-base-color-brand-6, #191919);
1515
--ti-amount-icon-font-size: var(--ti-common-font-size-1, 14px);
1616
}

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

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

1313
.component-css-vars-autocomplete() {
1414
// 下拉框边框圆角
15-
--ti-autocomplete-suggestion-border-radius: var(--ti-common-border-radius-normal, 2px);
15+
--ti-autocomplete-suggestion-border-radius: var(--ti-common-border-radius-normal, 6px);
1616
// 下拉框边框色
1717
--ti-autocomplete-suggestion-border-color: var(--ti-common-color-transparent, transparent);
1818
// 下拉框背景色
19-
--ti-autocomplete-suggestion-bg-color: var(--ti-common-color-bg-white-normal, #fff);
19+
--ti-autocomplete-suggestion-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
2020
// 下拉框列表项横向填充长度
21-
--ti-autocomplete-li-padding-horizontal: var(--ti-common-size-4x);
21+
--ti-autocomplete-li-padding-horizontal: var(--ti-common-size-4x, 16px);
2222
// 下拉框列表项竖向填充长度
2323
--ti-autocomplete-li-padding-vertical: 5px;
2424
// 下拉框列表项的文本色
25-
--ti-autocomplete-li-text-color: var(--ti-common-color-text-primary, #252b3a);
25+
--ti-autocomplete-li-text-color: var(--ti-common-color-text-primary, #191919);
2626
// 下拉框列表项字号
27-
--ti-autocomplete-li-font-size: var(--ti-common-font-size-base, 12px);
27+
--ti-autocomplete-li-font-size: var(--ti-common-font-size-base, 14px);
2828
// 下拉框列表项的悬浮背景色
29-
--ti-autocomplete-li-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
29+
--ti-autocomplete-li-hover-bg-color: var(--ti-common-color-hover-background, #f5f5f5);
3030
// 下拉框列表选中项的背景色
31-
--ti-autocomplete-li-select-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
31+
--ti-autocomplete-li-select-bg-color: var(--ti-common-color-selected-background, #f5f5f5);
3232
// 下拉框列表选中项的文本色
33-
--ti-autocomplete-li-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
33+
--ti-autocomplete-li-selected-text-color: var(--ti-common-color-selected-text-color, #191919);
3434
// 每项的分配者的边框色（没有效果）
3535
--ti-autocomplete-li-divider-border-color: var(--ti-common-color-dark, #000);
3636
// 下拉框列表项行高
3737
--ti-autocomplete-li-height: 22px;
3838
// 加载图标色（没有效果
39-
--ti-autocomplete-loading-text-color: var(--ti-common-color-placeholder, #adb0b8);
39+
--ti-autocomplete-loading-text-color: var(--ti-common-color-placeholder, #808080);
4040
// 下拉框面板与输入框的间隙
41-
--ti-autocomplete-dropdown-gap: var(--ti-common-dropdown-gap);
41+
--ti-autocomplete-dropdown-gap: var(--ti-common-dropdown-gap, 4px);
4242
}

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

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

1313
.component-css-vars-badge() {
14-
--ti-badge-size: var(--ti-common-font-size-2);
15-
--ti-badge-font-size: var(--ti-common-font-size-0);
16-
--ti-badge-line-height: calc(var(--ti-common-line-height-base) - 4px);
17-
--ti-badge-font-weight: var(--ti-common-font-weight-normal);
18-
--ti-badge-border-radius: var(--ti-common-border-radius-4);
19-
--ti-badge-text-color: var(--ti-base-color-bg-7);
20-
--ti-badge-bg-color: var(--ti-base-color-error);
21-
--ti-badge-link-hover-text-color: var(--ti-common-color-light, #fff);
22-
--ti-badge-active-text-color: var(--ti-base-color-brand-6, #5e7ce0);
23-
--ti-badge-active-bg-color: var(--ti-common-color-light, #fff);
24-
--ti-badge-primary-bg-color: var(--ti-base-color-brand-6, #5e7ce0);
25-
--ti-badge-success-bg-color: var(--ti-common-color-success-normal, #50d4ab);
26-
--ti-badge-warning-bg-color: var(--ti-common-color-warning-normal, #fa9841);
14+
--ti-badge-size: var(--ti-common-font-size-2, 16px);
15+
--ti-badge-font-size: var(--ti-common-font-size-0, 12px);
16+
--ti-badge-line-height: calc(var(--ti-common-line-height-base, 18px) - 4px);
17+
--ti-badge-font-weight: var(--ti-common-font-weight-normal, 400);
18+
--ti-badge-border-radius: var(--ti-common-border-radius-4, 8px);
19+
--ti-badge-text-color: var(--ti-base-color-bg-7, #ffffff);
20+
--ti-badge-bg-color: var(--ti-base-color-error, #f23030);
21+
--ti-badge-link-hover-text-color: var(--ti-common-color-light, #ffffff);
22+
--ti-badge-active-text-color: var(--ti-base-color-brand-6, #191919);
23+
--ti-badge-active-bg-color: var(--ti-common-color-light, #ffffff);
24+
--ti-badge-primary-bg-color: var(--ti-base-color-brand-6, #191919);
25+
--ti-badge-success-bg-color: var(--ti-common-color-success-normal, #5cb300);
26+
--ti-badge-warning-bg-color: var(--ti-common-color-warning-normal, #ff8800);
2727
--ti-badge-danger-bg-color: var(--ti-base-color-error-3, #f66f6a);
28-
--ti-badge-info-bg-color: var(--ti-common-color-info-normal, #252b3a);
29-
--ti-badge-border: var(--ti-common-border-weight-normal);
28+
--ti-badge-info-bg-color: var(--ti-common-color-info-normal, #191919);
29+
--ti-badge-border: var(--ti-common-border-weight-normal, 1px);
3030
--ti-badge-margin-left: 0;
3131
}

0 commit comments

Comments
 (0)