Skip to content

Commit 72da2f9

Browse files
shenjunjianzzcr
authored andcommitted
fix(tag): update tag's padding,border-radius (#2458)
1 parent 9290117 commit 72da2f9

File tree

1 file changed

+18
-15
lines changed

1 file changed

+18
-15
lines changed

packages/theme/src/tag/vars.less

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,16 @@
1515
// 标签字体的行高
1616
--tv-Tag-line-height: var(--tv-line-height-number);
1717

18-
//------------------------------------------------------- 尺寸 场景:fontsize, border-radius ,padding-x,y -------
18+
//------------------------------------------------------- 尺寸 场景:font-size, border-radius ,padding-x,y -------
19+
20+
/** 由于 tag 有border的,所有的padding值比设计图减少1 */
21+
1922
// 超小标签字号
20-
--tv-Tag-font-size-mini: 10px;
23+
--tv-Tag-font-size-mini: var(--tv-font-size-sm);
2124
// 超小标签水平间距
22-
--tv-Tag-padding-x-mini: var(--tv-space-sm);
25+
--tv-Tag-padding-x-mini: 3px;
2326
// 超小标签垂直间距
24-
--tv-Tag-padding-y-mini: 0.5px;
27+
--tv-Tag-padding-y-mini: 0;
2528
// 超小标签圆角
2629
--tv-Tag-border-radius-mini: var(--tv-border-radius-xs);
2730
// 标签在仅图标模式时,图标的大小
@@ -32,41 +35,41 @@
3235
// 小型标签字号
3336
--tv-Tag-font-size-small: var(--tv-font-size-sm);
3437
// 小型标签水平间距
35-
--tv-Tag-padding-x-small: var(--tv-space-sm);
38+
--tv-Tag-padding-x-small: 7px;
3639
// 小型标签垂直间距
37-
--tv-Tag-padding-y-small: 0;
40+
--tv-Tag-padding-y-small: 2px;
3841
// 小型标签圆角
39-
--tv-Tag-border-radius-small: var(--tv-border-radius-xs);
42+
--tv-Tag-border-radius-small: var(--tv-border-radius-sm);
4043
// 标签在仅图标模式时,图标的大小
4144
--tv-Tag-only-icon-font-size-small: 14px;
4245
// 标签在仅图标模式时,标签的内边距
43-
--tv-Tag-only-icon-padding-small: 2px;
46+
--tv-Tag-only-icon-padding-small: 0.5px;
4447

4548
// 默认标签字号
4649
--tv-Tag-font-size: var(--tv-font-size-md);
4750
// 默认标签水平间距
48-
--tv-Tag-padding-x: var(--tv-space-md);
51+
--tv-Tag-padding-x: 11px;
4952
// 默认标签垂直间距
50-
--tv-Tag-padding-y: 0.5px;
53+
--tv-Tag-padding-y: 2.5px;
5154
// 默认标签圆角
52-
--tv-Tag-border-radius: var(--tv-border-radius-sm);
55+
--tv-Tag-border-radius: var(--tv-border-radius-md);
5356
// 标签在仅图标模式时,图标的大小
5457
--tv-Tag-only-icon-font-size: 16px;
5558
// 标签在仅图标模式时,标签的内边距
5659
--tv-Tag-only-icon-padding: 3px;
5760

5861
// 中等标签字号
59-
--tv-Tag-font-size-medium: var(--tv-font-size-md);
62+
--tv-Tag-font-size-medium: var(--tv-font-size-md); //14
6063
// 中等标签水平间距
61-
--tv-Tag-padding-x-medium: var(--tv-space-lg);
64+
--tv-Tag-padding-x-medium: 11px;
6265
// 中等标签垂直间距
6366
--tv-Tag-padding-y-medium: 4.5px;
6467
// 中等标签圆角
6568
--tv-Tag-border-radius-medium: var(--tv-border-radius-md);
6669
// 标签在仅图标模式时,图标的大小
67-
--tv-Tag-only-icon-font-size-medium: 20px;
70+
--tv-Tag-only-icon-font-size-medium: 16px;
6871
// 标签在仅图标模式时,标签的内边距
69-
--tv-Tag-only-icon-padding-medium: 5px;
72+
--tv-Tag-only-icon-padding-medium: 7px;
7073

7174
//------------------------------------------------------- 颜色 场景:(1、考虑border,虽然cloud design没有,但适配其它肯定有border的) ----
7275

0 commit comments

Comments
 (0)