@douyinfe/semi-foundation 2.58.0-beta.0 → 2.58.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/button/button.scss +68 -5
  2. package/button/variables.scss +15 -6
  3. package/lib/cjs/button/button.css +56 -7
  4. package/lib/cjs/button/button.scss +68 -5
  5. package/lib/cjs/button/variables.scss +15 -6
  6. package/lib/cjs/tabs/tabs.css +27 -0
  7. package/lib/cjs/tabs/tabs.scss +34 -0
  8. package/lib/cjs/tabs/variables.scss +5 -0
  9. package/lib/es/button/button.css +56 -7
  10. package/lib/es/button/button.scss +68 -5
  11. package/lib/es/button/variables.scss +15 -6
  12. package/lib/es/tabs/tabs.css +27 -0
  13. package/lib/es/tabs/tabs.scss +34 -0
  14. package/lib/es/tabs/variables.scss +5 -0
  15. package/package.json +3 -3
  16. package/tabs/tabs.scss +34 -0
  17. package/tabs/variables.scss +5 -0
package/button/button.scss CHANGED
@@ -45,7 +45,10 @@ $module: #{$prefix}-button;
45
45
 
46
46
  &-disabled {
47
47
  background-color: $color-button_disabled_danger-bg-default;
48
-
48
+ &.#{$module}-outline {
49
+ background-color: transparent;
50
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
51
+ }
49
52
  &.#{$module}-light {
50
53
  background-color: $color-button_disabled_light_danger-bg-default;
51
54
  }
@@ -59,7 +62,14 @@ $module: #{$prefix}-button;
59
62
  background-color: $color-button_danger-bg-active;
60
63
  }
61
64
 
65
+ &.#{$module}-outline{
66
+ background-color: transparent;
67
+ border: $width-button_outline-border solid $color-button_danger_outline-border-default;
68
+ }
69
+
70
+
62
71
  &.#{$module}-light,
72
+ &.#{$module}-outline,
63
73
  &.#{$module}-borderless {
64
74
  color: $color-button_danger_borderless-text-default;
65
75
  }
@@ -78,7 +88,10 @@ $module: #{$prefix}-button;
78
88
 
79
89
  &-disabled {
80
90
  background-color: $color-button_disabled_warning-bg-default;
81
-
91
+ &.#{$module}-outline {
92
+ background-color: transparent;
93
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
94
+ }
82
95
  &.#{$module}-light {
83
96
  background-color: $color-button_disabled_light_warning-bg-default;
84
97
  }
@@ -92,7 +105,13 @@ $module: #{$prefix}-button;
92
105
  background-color: $color-button_warning-bg-active;
93
106
  }
94
107
 
108
+ &.#{$module}-outline{
109
+ background-color: transparent;
110
+ border: $width-button_outline-border solid $color-button_warning_outline-border-default;
111
+ }
112
+
95
113
  &.#{$module}-light,
114
+ &.#{$module}-outline,
96
115
  &.#{$module}-borderless {
97
116
  color: $color-button_warning_borderless-text-default;
98
117
  }
@@ -111,7 +130,10 @@ $module: #{$prefix}-button;
111
130
 
112
131
  &-disabled {
113
132
  background-color: $color-button_disabled_tertiary-bg-default;
114
-
133
+ &.#{$module}-outline {
134
+ background-color: transparent;
135
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
136
+ }
115
137
  &.#{$module}-light {
116
138
  background-color: $color-button_disabled_light_tertiary-bg-default;
117
139
  }
@@ -125,7 +147,13 @@ $module: #{$prefix}-button;
125
147
  background-color: $color-button_tertiary-bg-active;
126
148
  }
127
149
 
150
+ &.#{$module}-outline{
151
+ background-color: transparent;
152
+ border: $width-button_outline-border solid $color-button_tertiary_outline-border-default;
153
+ }
154
+
128
155
  &.#{$module}-light,
156
+ &.#{$module}-outline,
129
157
  &.#{$module}-borderless {
130
158
  color: $color-button_tertiary_solid-text-default;
131
159
  }
@@ -144,17 +172,29 @@ $module: #{$prefix}-button;
144
172
  &.#{$module}-light {
145
173
  background: $color-button_disabled_light_primary-bg-default;
146
174
  }
175
+
176
+ &.#{$module}-outline {
177
+ background-color: transparent;
178
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
179
+ }
147
180
  }
148
181
 
149
- &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
182
+ &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):hover {
150
183
  background-color: $color-button_primary-bg-hover;
151
184
  }
152
185
 
153
- &:not(.#{$module}-borderless):not(.#{$module}-light):active {
186
+ &.#{$module}-outline{
187
+ background-color: transparent;
188
+ border: $width-button_outline-border solid $color-button_primary_outline-border-default;
189
+ }
190
+
191
+
192
+ &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):active {
154
193
  background-color: $color-button_primary-bg-active;
155
194
  }
156
195
 
157
196
  &.#{$module}-light,
197
+ &.#{$module}-outline,
158
198
  &.#{$module}-borderless {
159
199
  color: $color-button_primary_borderless-text-default;
160
200
  }
@@ -171,11 +211,21 @@ $module: #{$prefix}-button;
171
211
  &-disabled {
172
212
  background-color: $color-button_disabled_secondary-bg-default;
173
213
 
214
+ &.#{$module}-outline {
215
+ background-color: transparent;
216
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
217
+ }
218
+
174
219
  &.#{$module}-light {
175
220
  background-color: $color-button_disabled_light_secondary-bg-default;
176
221
  }
177
222
  }
178
223
 
224
+ &.#{$module}-outline{
225
+ background-color: transparent;
226
+ border: $width-button_outline-border solid $color-button_secondary_outline-border-default;
227
+ }
228
+
179
229
  &:hover {
180
230
  background-color: $color-button_secondary-bg-hover;
181
231
  }
@@ -185,6 +235,7 @@ $module: #{$prefix}-button;
185
235
  }
186
236
 
187
237
  &.#{$module}-light,
238
+ &.#{$module}-outline,
188
239
  &.#{$module}-borderless {
189
240
  color: $color-button_secondary_borderless-text-default;
190
241
  }
@@ -222,6 +273,18 @@ $module: #{$prefix}-button;
222
273
  }
223
274
  }
224
275
 
276
+ &-outline {
277
+ background-color: transparent;
278
+
279
+ &:not(.#{$module}-disabled):hover {
280
+ background-color: $color-button_outline-bg-hover;
281
+ }
282
+
283
+ &:not(.#{$module}-disabled):active {
284
+ background-color: $color-button_outline-bg-active;
285
+ }
286
+ }
287
+
225
288
  &-light {
226
289
  background-color: $color-button_light-bg-default;
227
290
  border: $width-button_light-border $color-button_light-border-default solid;
package/button/variables.scss CHANGED
@@ -11,6 +11,7 @@ $color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按
11
11
  $color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
12
12
  $color-button_primary-text-active: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 按下
13
13
  $color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
14
+ $color-button_primary_outline-border-default: var(--semi-color-border); // 边框模式下 primary 边框颜色
14
15
 
15
16
  $color-button_primary_borderless-text-default: var(--semi-color-primary); // 主要按钮无边框文字颜色
16
17
 
@@ -26,6 +27,7 @@ $color-button_secondary-text-hover: rgba(var(--semi-white), 1); // 次要按钮
26
27
  $color-button_secondary-bg-active: var(--semi-color-secondary-active); // 次要按钮背景颜色 - 按下
27
28
  $color-button_secondary-border-active: var(--semi-color-secondary-active); // 次要按钮描边颜色 - 按下
28
29
  $color-button_secondary-text-active: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 按下
30
+ $color-button_secondary_outline-border-default: var(--semi-color-border); // 边框模式下 secondary 边框颜色
29
31
 
30
32
  $color-button_secondary_borderless-text-default: var(--semi-color-secondary); // 次要按钮无边框文字颜色
31
33
 
@@ -42,6 +44,7 @@ $color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮
42
44
  $color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
43
45
  $color-button_danger-text-active: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 按下
44
46
  $color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
47
+ $color-button_danger_outline-border-default: var(--semi-color-danger); // 边框模式下 danger 边框颜色
45
48
 
46
49
  $color-button_danger_borderless-text-default: var(--semi-color-danger); // 危险按钮无边框文字颜色
47
50
 
@@ -58,7 +61,7 @@ $color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按
58
61
  $color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
59
62
  $color-button_warning-text-active: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 按下
60
63
  $color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
61
-
64
+ $color-button_warning_outline-border-default: var(--semi-color-warning); // 边框模式下 warning 边框颜色
62
65
  $color-button_warning_borderless-text-default: var(--semi-color-warning); // 警告按钮无边框文字颜色
63
66
 
64
67
  // tertiary
@@ -73,7 +76,7 @@ $color-button_tertiary-text-hover: rgba(var(--semi-white), 1); // 第三按钮
73
76
  $color-button_tertiary-bg-active: var(--semi-color-tertiary-active); // 第三按钮背景颜色 - 按下
74
77
  $color-button_tertiary-border-active: var(--semi-color-tertiary-active); // 第三按钮描边颜色 - 按下
75
78
  $color-button_tertiary-text-active: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 按下
76
-
79
+ $color-button_tertiary_outline-border-default: var(--semi-color-border); // 边框模式下 danger 边框颜色
77
80
  $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
78
81
 
79
82
  // disabled
@@ -87,7 +90,7 @@ $color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default;
87
90
  $color-button_disabled_danger-bg-default: $color-button_disabled-bg-default; // 禁用 danger 按钮背景颜色
88
91
  $color-button_disabled_warning-bg-default: $color-button_disabled-bg-default; // 禁用 warning 按钮背景颜色
89
92
  $color-button_disabled_tertiary-bg-default: $color-button_disabled-bg-default; // 禁用 tertiary 按钮背景颜色
90
-
93
+ $color-button_disabled_outline-border-default: var(--semi-color-border); // 边框模式下 disable 边框颜色
91
94
 
92
95
 
93
96
  // light
@@ -114,6 +117,12 @@ $color-button_borderless-border-hover: $color-button_borderless-border-default;
114
117
  $color-button_borderless-border-active: $color-button_borderless-border-hover; // 无背景按钮描边颜色 - 按下
115
118
  $width-button_borderless-border: 0; // 无背景按钮描边宽度
116
119
 
120
+
121
+ // outline
122
+ $width-button_outline-border: 1px; // 边框模式按钮边框宽度
123
+ $color-button_outline-bg-hover: var(--semi-color-fill-0); // 边框模式按钮背景颜色 - 悬浮
124
+ $color-button_outline-bg-active: var(--semi-color-fill-1); // 边框模式按钮背景颜色 - 按下
125
+
117
126
  // buttongroup
118
127
 
119
128
  $color-button_group-border-default: var(--semi-color-border); // 按钮组分割线颜色
@@ -163,6 +172,6 @@ $width-button-outline: 2px; // 按钮轮廓宽度
163
172
 
164
173
 
165
174
  $radius-button_splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // split button 左上圆角
166
- $radius-button_splitButtonGroup_first_bottomLeft:var(--semi-border-radius-small); // split button 左下圆角
167
- $radius-button_splitButtonGroup_last_topRight:var(--semi-border-radius-small); // split button 右上圆角
168
- $radius-button_splitButtonGroup_last_bottomRight:var(--semi-border-radius-small); // split button 右下圆角
175
+ $radius-button_splitButtonGroup_first_bottomLeft: var(--semi-border-radius-small); // split button 左下圆角
176
+ $radius-button_splitButtonGroup_last_topRight: var(--semi-border-radius-small); // split button 右上圆角
177
+ $radius-button_splitButtonGroup_last_bottomRight: var(--semi-border-radius-small); // split button 右下圆角
package/lib/cjs/button/button.css CHANGED
@@ -55,6 +55,10 @@
55
55
  .semi-button-danger-disabled {
56
56
  background-color: var(--semi-color-disabled-bg);
57
57
  }
58
+ .semi-button-danger-disabled.semi-button-outline {
59
+ background-color: transparent;
60
+ border: 1px solid var(--semi-color-border);
61
+ }
58
62
  .semi-button-danger-disabled.semi-button-light {
59
63
  background-color: var(--semi-color-fill-0);
60
64
  }
@@ -64,7 +68,11 @@
64
68
  .semi-button-danger:active {
65
69
  background-color: var(--semi-color-danger-active);
66
70
  }
67
- .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless {
71
+ .semi-button-danger.semi-button-outline {
72
+ background-color: transparent;
73
+ border: 1px solid var(--semi-color-danger);
74
+ }
75
+ .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-outline, .semi-button-danger.semi-button-borderless {
68
76
  color: var(--semi-color-danger);
69
77
  }
70
78
  .semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
@@ -79,6 +87,10 @@
79
87
  .semi-button-warning-disabled {
80
88
  background-color: var(--semi-color-disabled-bg);
81
89
  }
90
+ .semi-button-warning-disabled.semi-button-outline {
91
+ background-color: transparent;
92
+ border: 1px solid var(--semi-color-border);
93
+ }
82
94
  .semi-button-warning-disabled.semi-button-light {
83
95
  background-color: var(--semi-color-fill-0);
84
96
  }
@@ -88,7 +100,11 @@
88
100
  .semi-button-warning:active {
89
101
  background-color: var(--semi-color-warning-active);
90
102
  }
91
- .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless {
103
+ .semi-button-warning.semi-button-outline {
104
+ background-color: transparent;
105
+ border: 1px solid var(--semi-color-warning);
106
+ }
107
+ .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-outline, .semi-button-warning.semi-button-borderless {
92
108
  color: var(--semi-color-warning);
93
109
  }
94
110
  .semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
@@ -103,6 +119,10 @@
103
119
  .semi-button-tertiary-disabled {
104
120
  background-color: var(--semi-color-disabled-bg);
105
121
  }
122
+ .semi-button-tertiary-disabled.semi-button-outline {
123
+ background-color: transparent;
124
+ border: 1px solid var(--semi-color-border);
125
+ }
106
126
  .semi-button-tertiary-disabled.semi-button-light {
107
127
  background-color: var(--semi-color-fill-0);
108
128
  }
@@ -112,7 +132,11 @@
112
132
  .semi-button-tertiary:active {
113
133
  background-color: var(--semi-color-tertiary-active);
114
134
  }
115
- .semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-borderless {
135
+ .semi-button-tertiary.semi-button-outline {
136
+ background-color: transparent;
137
+ border: 1px solid var(--semi-color-border);
138
+ }
139
+ .semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-outline, .semi-button-tertiary.semi-button-borderless {
116
140
  color: var(--semi-color-text-1);
117
141
  }
118
142
  .semi-button-primary {
@@ -127,13 +151,21 @@
127
151
  .semi-button-primary-disabled.semi-button-light {
128
152
  background: var(--semi-color-fill-0);
129
153
  }
130
- .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
154
+ .semi-button-primary-disabled.semi-button-outline {
155
+ background-color: transparent;
156
+ border: 1px solid var(--semi-color-border);
157
+ }
158
+ .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover {
131
159
  background-color: var(--semi-color-primary-hover);
132
160
  }
133
- .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):active {
161
+ .semi-button-primary.semi-button-outline {
162
+ background-color: transparent;
163
+ border: 1px solid var(--semi-color-border);
164
+ }
165
+ .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):active {
134
166
  background-color: var(--semi-color-primary-active);
135
167
  }
136
- .semi-button-primary.semi-button-light, .semi-button-primary.semi-button-borderless {
168
+ .semi-button-primary.semi-button-light, .semi-button-primary.semi-button-outline, .semi-button-primary.semi-button-borderless {
137
169
  color: var(--semi-color-primary);
138
170
  }
139
171
  .semi-button-secondary {
@@ -146,16 +178,24 @@
146
178
  .semi-button-secondary-disabled {
147
179
  background-color: var(--semi-color-disabled-bg);
148
180
  }
181
+ .semi-button-secondary-disabled.semi-button-outline {
182
+ background-color: transparent;
183
+ border: 1px solid var(--semi-color-border);
184
+ }
149
185
  .semi-button-secondary-disabled.semi-button-light {
150
186
  background-color: var(--semi-color-fill-0);
151
187
  }
188
+ .semi-button-secondary.semi-button-outline {
189
+ background-color: transparent;
190
+ border: 1px solid var(--semi-color-border);
191
+ }
152
192
  .semi-button-secondary:hover {
153
193
  background-color: var(--semi-color-secondary-hover);
154
194
  }
155
195
  .semi-button-secondary:active {
156
196
  background-color: var(--semi-color-secondary-active);
157
197
  }
158
- .semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-borderless {
198
+ .semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-outline, .semi-button-secondary.semi-button-borderless {
159
199
  color: var(--semi-color-secondary);
160
200
  }
161
201
  .semi-button-disabled {
@@ -182,6 +222,15 @@
182
222
  background-color: var(--semi-color-fill-1);
183
223
  border: 0 transparent solid;
184
224
  }
225
+ .semi-button-outline {
226
+ background-color: transparent;
227
+ }
228
+ .semi-button-outline:not(.semi-button-disabled):hover {
229
+ background-color: var(--semi-color-fill-0);
230
+ }
231
+ .semi-button-outline:not(.semi-button-disabled):active {
232
+ background-color: var(--semi-color-fill-1);
233
+ }
185
234
  .semi-button-light {
186
235
  background-color: var(--semi-color-fill-0);
187
236
  border: 0 transparent solid;
package/lib/cjs/button/button.scss CHANGED
@@ -45,7 +45,10 @@ $module: #{$prefix}-button;
45
45
 
46
46
  &-disabled {
47
47
  background-color: $color-button_disabled_danger-bg-default;
48
-
48
+ &.#{$module}-outline {
49
+ background-color: transparent;
50
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
51
+ }
49
52
  &.#{$module}-light {
50
53
  background-color: $color-button_disabled_light_danger-bg-default;
51
54
  }
@@ -59,7 +62,14 @@ $module: #{$prefix}-button;
59
62
  background-color: $color-button_danger-bg-active;
60
63
  }
61
64
 
65
+ &.#{$module}-outline{
66
+ background-color: transparent;
67
+ border: $width-button_outline-border solid $color-button_danger_outline-border-default;
68
+ }
69
+
70
+
62
71
  &.#{$module}-light,
72
+ &.#{$module}-outline,
63
73
  &.#{$module}-borderless {
64
74
  color: $color-button_danger_borderless-text-default;
65
75
  }
@@ -78,7 +88,10 @@ $module: #{$prefix}-button;
78
88
 
79
89
  &-disabled {
80
90
  background-color: $color-button_disabled_warning-bg-default;
81
-
91
+ &.#{$module}-outline {
92
+ background-color: transparent;
93
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
94
+ }
82
95
  &.#{$module}-light {
83
96
  background-color: $color-button_disabled_light_warning-bg-default;
84
97
  }
@@ -92,7 +105,13 @@ $module: #{$prefix}-button;
92
105
  background-color: $color-button_warning-bg-active;
93
106
  }
94
107
 
108
+ &.#{$module}-outline{
109
+ background-color: transparent;
110
+ border: $width-button_outline-border solid $color-button_warning_outline-border-default;
111
+ }
112
+
95
113
  &.#{$module}-light,
114
+ &.#{$module}-outline,
96
115
  &.#{$module}-borderless {
97
116
  color: $color-button_warning_borderless-text-default;
98
117
  }
@@ -111,7 +130,10 @@ $module: #{$prefix}-button;
111
130
 
112
131
  &-disabled {
113
132
  background-color: $color-button_disabled_tertiary-bg-default;
114
-
133
+ &.#{$module}-outline {
134
+ background-color: transparent;
135
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
136
+ }
115
137
  &.#{$module}-light {
116
138
  background-color: $color-button_disabled_light_tertiary-bg-default;
117
139
  }
@@ -125,7 +147,13 @@ $module: #{$prefix}-button;
125
147
  background-color: $color-button_tertiary-bg-active;
126
148
  }
127
149
 
150
+ &.#{$module}-outline{
151
+ background-color: transparent;
152
+ border: $width-button_outline-border solid $color-button_tertiary_outline-border-default;
153
+ }
154
+
128
155
  &.#{$module}-light,
156
+ &.#{$module}-outline,
129
157
  &.#{$module}-borderless {
130
158
  color: $color-button_tertiary_solid-text-default;
131
159
  }
@@ -144,17 +172,29 @@ $module: #{$prefix}-button;
144
172
  &.#{$module}-light {
145
173
  background: $color-button_disabled_light_primary-bg-default;
146
174
  }
175
+
176
+ &.#{$module}-outline {
177
+ background-color: transparent;
178
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
179
+ }
147
180
  }
148
181
 
149
- &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
182
+ &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):hover {
150
183
  background-color: $color-button_primary-bg-hover;
151
184
  }
152
185
 
153
- &:not(.#{$module}-borderless):not(.#{$module}-light):active {
186
+ &.#{$module}-outline{
187
+ background-color: transparent;
188
+ border: $width-button_outline-border solid $color-button_primary_outline-border-default;
189
+ }
190
+
191
+
192
+ &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):active {
154
193
  background-color: $color-button_primary-bg-active;
155
194
  }
156
195
 
157
196
  &.#{$module}-light,
197
+ &.#{$module}-outline,
158
198
  &.#{$module}-borderless {
159
199
  color: $color-button_primary_borderless-text-default;
160
200
  }
@@ -171,11 +211,21 @@ $module: #{$prefix}-button;
171
211
  &-disabled {
172
212
  background-color: $color-button_disabled_secondary-bg-default;
173
213
 
214
+ &.#{$module}-outline {
215
+ background-color: transparent;
216
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
217
+ }
218
+
174
219
  &.#{$module}-light {
175
220
  background-color: $color-button_disabled_light_secondary-bg-default;
176
221
  }
177
222
  }
178
223
 
224
+ &.#{$module}-outline{
225
+ background-color: transparent;
226
+ border: $width-button_outline-border solid $color-button_secondary_outline-border-default;
227
+ }
228
+
179
229
  &:hover {
180
230
  background-color: $color-button_secondary-bg-hover;
181
231
  }
@@ -185,6 +235,7 @@ $module: #{$prefix}-button;
185
235
  }
186
236
 
187
237
  &.#{$module}-light,
238
+ &.#{$module}-outline,
188
239
  &.#{$module}-borderless {
189
240
  color: $color-button_secondary_borderless-text-default;
190
241
  }
@@ -222,6 +273,18 @@ $module: #{$prefix}-button;
222
273
  }
223
274
  }
224
275
 
276
+ &-outline {
277
+ background-color: transparent;
278
+
279
+ &:not(.#{$module}-disabled):hover {
280
+ background-color: $color-button_outline-bg-hover;
281
+ }
282
+
283
+ &:not(.#{$module}-disabled):active {
284
+ background-color: $color-button_outline-bg-active;
285
+ }
286
+ }
287
+
225
288
  &-light {
226
289
  background-color: $color-button_light-bg-default;
227
290
  border: $width-button_light-border $color-button_light-border-default solid;
package/lib/cjs/button/variables.scss CHANGED
@@ -11,6 +11,7 @@ $color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按
11
11
  $color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
12
12
  $color-button_primary-text-active: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 按下
13
13
  $color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
14
+ $color-button_primary_outline-border-default: var(--semi-color-border); // 边框模式下 primary 边框颜色
14
15
 
15
16
  $color-button_primary_borderless-text-default: var(--semi-color-primary); // 主要按钮无边框文字颜色
16
17
 
@@ -26,6 +27,7 @@ $color-button_secondary-text-hover: rgba(var(--semi-white), 1); // 次要按钮
26
27
  $color-button_secondary-bg-active: var(--semi-color-secondary-active); // 次要按钮背景颜色 - 按下
27
28
  $color-button_secondary-border-active: var(--semi-color-secondary-active); // 次要按钮描边颜色 - 按下
28
29
  $color-button_secondary-text-active: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 按下
30
+ $color-button_secondary_outline-border-default: var(--semi-color-border); // 边框模式下 secondary 边框颜色
29
31
 
30
32
  $color-button_secondary_borderless-text-default: var(--semi-color-secondary); // 次要按钮无边框文字颜色
31
33
 
@@ -42,6 +44,7 @@ $color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮
42
44
  $color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
43
45
  $color-button_danger-text-active: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 按下
44
46
  $color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
47
+ $color-button_danger_outline-border-default: var(--semi-color-danger); // 边框模式下 danger 边框颜色
45
48
 
46
49
  $color-button_danger_borderless-text-default: var(--semi-color-danger); // 危险按钮无边框文字颜色
47
50
 
@@ -58,7 +61,7 @@ $color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按
58
61
  $color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
59
62
  $color-button_warning-text-active: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 按下
60
63
  $color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
61
-
64
+ $color-button_warning_outline-border-default: var(--semi-color-warning); // 边框模式下 warning 边框颜色
62
65
  $color-button_warning_borderless-text-default: var(--semi-color-warning); // 警告按钮无边框文字颜色
63
66
 
64
67
  // tertiary
@@ -73,7 +76,7 @@ $color-button_tertiary-text-hover: rgba(var(--semi-white), 1); // 第三按钮
73
76
  $color-button_tertiary-bg-active: var(--semi-color-tertiary-active); // 第三按钮背景颜色 - 按下
74
77
  $color-button_tertiary-border-active: var(--semi-color-tertiary-active); // 第三按钮描边颜色 - 按下
75
78
  $color-button_tertiary-text-active: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 按下
76
-
79
+ $color-button_tertiary_outline-border-default: var(--semi-color-border); // 边框模式下 danger 边框颜色
77
80
  $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
78
81
 
79
82
  // disabled
@@ -87,7 +90,7 @@ $color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default;
87
90
  $color-button_disabled_danger-bg-default: $color-button_disabled-bg-default; // 禁用 danger 按钮背景颜色
88
91
  $color-button_disabled_warning-bg-default: $color-button_disabled-bg-default; // 禁用 warning 按钮背景颜色
89
92
  $color-button_disabled_tertiary-bg-default: $color-button_disabled-bg-default; // 禁用 tertiary 按钮背景颜色
90
-
93
+ $color-button_disabled_outline-border-default: var(--semi-color-border); // 边框模式下 disable 边框颜色
91
94
 
92
95
 
93
96
  // light
@@ -114,6 +117,12 @@ $color-button_borderless-border-hover: $color-button_borderless-border-default;
114
117
  $color-button_borderless-border-active: $color-button_borderless-border-hover; // 无背景按钮描边颜色 - 按下
115
118
  $width-button_borderless-border: 0; // 无背景按钮描边宽度
116
119
 
120
+
121
+ // outline
122
+ $width-button_outline-border: 1px; // 边框模式按钮边框宽度
123
+ $color-button_outline-bg-hover: var(--semi-color-fill-0); // 边框模式按钮背景颜色 - 悬浮
124
+ $color-button_outline-bg-active: var(--semi-color-fill-1); // 边框模式按钮背景颜色 - 按下
125
+
117
126
  // buttongroup
118
127
 
119
128
  $color-button_group-border-default: var(--semi-color-border); // 按钮组分割线颜色
@@ -163,6 +172,6 @@ $width-button-outline: 2px; // 按钮轮廓宽度
163
172
 
164
173
 
165
174
  $radius-button_splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // split button 左上圆角
166
- $radius-button_splitButtonGroup_first_bottomLeft:var(--semi-border-radius-small); // split button 左下圆角
167
- $radius-button_splitButtonGroup_last_topRight:var(--semi-border-radius-small); // split button 右上圆角
168
- $radius-button_splitButtonGroup_last_bottomRight:var(--semi-border-radius-small); // split button 右下圆角
175
+ $radius-button_splitButtonGroup_first_bottomLeft: var(--semi-border-radius-small); // split button 左下圆角
176
+ $radius-button_splitButtonGroup_last_topRight: var(--semi-border-radius-small); // split button 右上圆角
177
+ $radius-button_splitButtonGroup_last_bottomRight: var(--semi-border-radius-small); // split button 右下圆角
package/lib/cjs/tabs/tabs.css CHANGED
@@ -21,6 +21,33 @@
21
21
  .semi-tabs-bar-extra {
22
22
  padding: 0px 5px;
23
23
  }
24
+ .semi-tabs-bar-more-trigger {
25
+ display: inline-block;
26
+ cursor: pointer;
27
+ color: var(--semi-color-text-2);
28
+ }
29
+ .semi-tabs-bar-more-trigger-content {
30
+ display: flex;
31
+ align-content: center;
32
+ }
33
+ .semi-tabs-bar-more-trigger-content-icon:not(:not(.semi-tabs-bar-more-trigger-content-icon)) {
34
+ margin-top: 0px;
35
+ margin-bottom: 0px;
36
+ margin-left: 8px;
37
+ margin-right: 8px;
38
+ flex-shrink: 0;
39
+ display: flex;
40
+ align-items: center;
41
+ }
42
+ .semi-tabs-bar-more-trigger-line {
43
+ padding: 16px 4px 14px 4px;
44
+ }
45
+ .semi-tabs-bar-more-trigger-card {
46
+ padding: 8px 12px;
47
+ }
48
+ .semi-tabs-bar-more-trigger-button {
49
+ padding: 8px 12px;
50
+ }
24
51
  .semi-tabs-bar .semi-tabs-tab {
25
52
  font-size: 14px;
26
53
  line-height: 20px;
package/lib/cjs/tabs/tabs.scss CHANGED
@@ -11,6 +11,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
11
11
  box-sizing: border-box;
12
12
  position: relative;
13
13
 
14
+
14
15
  &-left {
15
16
  display: flex;
16
17
  flex-direction: row;
@@ -30,6 +31,39 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
30
31
  padding: $spacing-tabs_bar_extra-paddingY $spacing-tabs_bar_extra-paddingX;
31
32
  }
32
33
 
34
+ &-more-trigger{
35
+ display: inline-block;
36
+ cursor: pointer;
37
+ color: var(--semi-color-text-2);
38
+
39
+ &-content{
40
+ display: flex;
41
+ align-content: center;
42
+
43
+ &-icon:not(:not(&-icon)){ // increase priority
44
+ margin-top: $spacing-tabs_tab-more_trigger_icon-marginTop;
45
+ margin-bottom: $spacing-tabs_tab-more_trigger_icon-marginBottom;
46
+ margin-left: $spacing-tabs_tab-more_trigger_icon-marginLeft;
47
+ margin-right: $spacing-tabs_tab-more_trigger_icon-marginRight;
48
+ flex-shrink: 0;
49
+ display: flex;
50
+ align-items: center;
51
+ }
52
+ }
53
+
54
+ &-line{
55
+ padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
56
+ }
57
+
58
+ &-card{
59
+ padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
60
+ }
61
+
62
+ &-button{
63
+ padding: $spacing-tabs_bar_button_tab-paddingY $spacing-tabs_bar_button_tab-paddingX;
64
+ }
65
+ }
66
+
33
67
  .#{$module}-tab {
34
68
  @include font-size-regular;
35
69
  cursor: pointer;
package/lib/cjs/tabs/variables.scss CHANGED
@@ -85,6 +85,11 @@ $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺
85
85
  $height-tabs_bar_extra_small: 36px; // 小尺寸页签高度
86
86
  $font-tabs_bar_extra_small-lineHeight: $height-tabs_bar_extra_small; // 小尺寸页签文字行高
87
87
 
88
+ $spacing-tabs_tab-more_trigger_icon-marginLeft: 8px;
89
+ $spacing-tabs_tab-more_trigger_icon-marginRight: 8px;
90
+ $spacing-tabs_tab-more_trigger_icon-marginTop: 0px;
91
+ $spacing-tabs_tab-more_trigger_icon-marginBottom: 0px;
92
+
88
93
  $spacing-tabs_tab-pane_arrow: 8px; //滚动折叠箭头内边距
89
94
  $spacing-tabs_bar_extra-paddingY: 0px; // 附加操作垂直内边距
90
95
  $spacing-tabs_bar_extra-paddingX: 5px; // 附加操作水平内边距
package/lib/es/button/button.css CHANGED
@@ -55,6 +55,10 @@
55
55
  .semi-button-danger-disabled {
56
56
  background-color: var(--semi-color-disabled-bg);
57
57
  }
58
+ .semi-button-danger-disabled.semi-button-outline {
59
+ background-color: transparent;
60
+ border: 1px solid var(--semi-color-border);
61
+ }
58
62
  .semi-button-danger-disabled.semi-button-light {
59
63
  background-color: var(--semi-color-fill-0);
60
64
  }
@@ -64,7 +68,11 @@
64
68
  .semi-button-danger:active {
65
69
  background-color: var(--semi-color-danger-active);
66
70
  }
67
- .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless {
71
+ .semi-button-danger.semi-button-outline {
72
+ background-color: transparent;
73
+ border: 1px solid var(--semi-color-danger);
74
+ }
75
+ .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-outline, .semi-button-danger.semi-button-borderless {
68
76
  color: var(--semi-color-danger);
69
77
  }
70
78
  .semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
@@ -79,6 +87,10 @@
79
87
  .semi-button-warning-disabled {
80
88
  background-color: var(--semi-color-disabled-bg);
81
89
  }
90
+ .semi-button-warning-disabled.semi-button-outline {
91
+ background-color: transparent;
92
+ border: 1px solid var(--semi-color-border);
93
+ }
82
94
  .semi-button-warning-disabled.semi-button-light {
83
95
  background-color: var(--semi-color-fill-0);
84
96
  }
@@ -88,7 +100,11 @@
88
100
  .semi-button-warning:active {
89
101
  background-color: var(--semi-color-warning-active);
90
102
  }
91
- .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless {
103
+ .semi-button-warning.semi-button-outline {
104
+ background-color: transparent;
105
+ border: 1px solid var(--semi-color-warning);
106
+ }
107
+ .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-outline, .semi-button-warning.semi-button-borderless {
92
108
  color: var(--semi-color-warning);
93
109
  }
94
110
  .semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
@@ -103,6 +119,10 @@
103
119
  .semi-button-tertiary-disabled {
104
120
  background-color: var(--semi-color-disabled-bg);
105
121
  }
122
+ .semi-button-tertiary-disabled.semi-button-outline {
123
+ background-color: transparent;
124
+ border: 1px solid var(--semi-color-border);
125
+ }
106
126
  .semi-button-tertiary-disabled.semi-button-light {
107
127
  background-color: var(--semi-color-fill-0);
108
128
  }
@@ -112,7 +132,11 @@
112
132
  .semi-button-tertiary:active {
113
133
  background-color: var(--semi-color-tertiary-active);
114
134
  }
115
- .semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-borderless {
135
+ .semi-button-tertiary.semi-button-outline {
136
+ background-color: transparent;
137
+ border: 1px solid var(--semi-color-border);
138
+ }
139
+ .semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-outline, .semi-button-tertiary.semi-button-borderless {
116
140
  color: var(--semi-color-text-1);
117
141
  }
118
142
  .semi-button-primary {
@@ -127,13 +151,21 @@
127
151
  .semi-button-primary-disabled.semi-button-light {
128
152
  background: var(--semi-color-fill-0);
129
153
  }
130
- .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
154
+ .semi-button-primary-disabled.semi-button-outline {
155
+ background-color: transparent;
156
+ border: 1px solid var(--semi-color-border);
157
+ }
158
+ .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover {
131
159
  background-color: var(--semi-color-primary-hover);
132
160
  }
133
- .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):active {
161
+ .semi-button-primary.semi-button-outline {
162
+ background-color: transparent;
163
+ border: 1px solid var(--semi-color-border);
164
+ }
165
+ .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):active {
134
166
  background-color: var(--semi-color-primary-active);
135
167
  }
136
- .semi-button-primary.semi-button-light, .semi-button-primary.semi-button-borderless {
168
+ .semi-button-primary.semi-button-light, .semi-button-primary.semi-button-outline, .semi-button-primary.semi-button-borderless {
137
169
  color: var(--semi-color-primary);
138
170
  }
139
171
  .semi-button-secondary {
@@ -146,16 +178,24 @@
146
178
  .semi-button-secondary-disabled {
147
179
  background-color: var(--semi-color-disabled-bg);
148
180
  }
181
+ .semi-button-secondary-disabled.semi-button-outline {
182
+ background-color: transparent;
183
+ border: 1px solid var(--semi-color-border);
184
+ }
149
185
  .semi-button-secondary-disabled.semi-button-light {
150
186
  background-color: var(--semi-color-fill-0);
151
187
  }
188
+ .semi-button-secondary.semi-button-outline {
189
+ background-color: transparent;
190
+ border: 1px solid var(--semi-color-border);
191
+ }
152
192
  .semi-button-secondary:hover {
153
193
  background-color: var(--semi-color-secondary-hover);
154
194
  }
155
195
  .semi-button-secondary:active {
156
196
  background-color: var(--semi-color-secondary-active);
157
197
  }
158
- .semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-borderless {
198
+ .semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-outline, .semi-button-secondary.semi-button-borderless {
159
199
  color: var(--semi-color-secondary);
160
200
  }
161
201
  .semi-button-disabled {
@@ -182,6 +222,15 @@
182
222
  background-color: var(--semi-color-fill-1);
183
223
  border: 0 transparent solid;
184
224
  }
225
+ .semi-button-outline {
226
+ background-color: transparent;
227
+ }
228
+ .semi-button-outline:not(.semi-button-disabled):hover {
229
+ background-color: var(--semi-color-fill-0);
230
+ }
231
+ .semi-button-outline:not(.semi-button-disabled):active {
232
+ background-color: var(--semi-color-fill-1);
233
+ }
185
234
  .semi-button-light {
186
235
  background-color: var(--semi-color-fill-0);
187
236
  border: 0 transparent solid;
package/lib/es/button/button.scss CHANGED
@@ -45,7 +45,10 @@ $module: #{$prefix}-button;
45
45
 
46
46
  &-disabled {
47
47
  background-color: $color-button_disabled_danger-bg-default;
48
-
48
+ &.#{$module}-outline {
49
+ background-color: transparent;
50
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
51
+ }
49
52
  &.#{$module}-light {
50
53
  background-color: $color-button_disabled_light_danger-bg-default;
51
54
  }
@@ -59,7 +62,14 @@ $module: #{$prefix}-button;
59
62
  background-color: $color-button_danger-bg-active;
60
63
  }
61
64
 
65
+ &.#{$module}-outline{
66
+ background-color: transparent;
67
+ border: $width-button_outline-border solid $color-button_danger_outline-border-default;
68
+ }
69
+
70
+
62
71
  &.#{$module}-light,
72
+ &.#{$module}-outline,
63
73
  &.#{$module}-borderless {
64
74
  color: $color-button_danger_borderless-text-default;
65
75
  }
@@ -78,7 +88,10 @@ $module: #{$prefix}-button;
78
88
 
79
89
  &-disabled {
80
90
  background-color: $color-button_disabled_warning-bg-default;
81
-
91
+ &.#{$module}-outline {
92
+ background-color: transparent;
93
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
94
+ }
82
95
  &.#{$module}-light {
83
96
  background-color: $color-button_disabled_light_warning-bg-default;
84
97
  }
@@ -92,7 +105,13 @@ $module: #{$prefix}-button;
92
105
  background-color: $color-button_warning-bg-active;
93
106
  }
94
107
 
108
+ &.#{$module}-outline{
109
+ background-color: transparent;
110
+ border: $width-button_outline-border solid $color-button_warning_outline-border-default;
111
+ }
112
+
95
113
  &.#{$module}-light,
114
+ &.#{$module}-outline,
96
115
  &.#{$module}-borderless {
97
116
  color: $color-button_warning_borderless-text-default;
98
117
  }
@@ -111,7 +130,10 @@ $module: #{$prefix}-button;
111
130
 
112
131
  &-disabled {
113
132
  background-color: $color-button_disabled_tertiary-bg-default;
114
-
133
+ &.#{$module}-outline {
134
+ background-color: transparent;
135
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
136
+ }
115
137
  &.#{$module}-light {
116
138
  background-color: $color-button_disabled_light_tertiary-bg-default;
117
139
  }
@@ -125,7 +147,13 @@ $module: #{$prefix}-button;
125
147
  background-color: $color-button_tertiary-bg-active;
126
148
  }
127
149
 
150
+ &.#{$module}-outline{
151
+ background-color: transparent;
152
+ border: $width-button_outline-border solid $color-button_tertiary_outline-border-default;
153
+ }
154
+
128
155
  &.#{$module}-light,
156
+ &.#{$module}-outline,
129
157
  &.#{$module}-borderless {
130
158
  color: $color-button_tertiary_solid-text-default;
131
159
  }
@@ -144,17 +172,29 @@ $module: #{$prefix}-button;
144
172
  &.#{$module}-light {
145
173
  background: $color-button_disabled_light_primary-bg-default;
146
174
  }
175
+
176
+ &.#{$module}-outline {
177
+ background-color: transparent;
178
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
179
+ }
147
180
  }
148
181
 
149
- &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
182
+ &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):hover {
150
183
  background-color: $color-button_primary-bg-hover;
151
184
  }
152
185
 
153
- &:not(.#{$module}-borderless):not(.#{$module}-light):active {
186
+ &.#{$module}-outline{
187
+ background-color: transparent;
188
+ border: $width-button_outline-border solid $color-button_primary_outline-border-default;
189
+ }
190
+
191
+
192
+ &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):active {
154
193
  background-color: $color-button_primary-bg-active;
155
194
  }
156
195
 
157
196
  &.#{$module}-light,
197
+ &.#{$module}-outline,
158
198
  &.#{$module}-borderless {
159
199
  color: $color-button_primary_borderless-text-default;
160
200
  }
@@ -171,11 +211,21 @@ $module: #{$prefix}-button;
171
211
  &-disabled {
172
212
  background-color: $color-button_disabled_secondary-bg-default;
173
213
 
214
+ &.#{$module}-outline {
215
+ background-color: transparent;
216
+ border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
217
+ }
218
+
174
219
  &.#{$module}-light {
175
220
  background-color: $color-button_disabled_light_secondary-bg-default;
176
221
  }
177
222
  }
178
223
 
224
+ &.#{$module}-outline{
225
+ background-color: transparent;
226
+ border: $width-button_outline-border solid $color-button_secondary_outline-border-default;
227
+ }
228
+
179
229
  &:hover {
180
230
  background-color: $color-button_secondary-bg-hover;
181
231
  }
@@ -185,6 +235,7 @@ $module: #{$prefix}-button;
185
235
  }
186
236
 
187
237
  &.#{$module}-light,
238
+ &.#{$module}-outline,
188
239
  &.#{$module}-borderless {
189
240
  color: $color-button_secondary_borderless-text-default;
190
241
  }
@@ -222,6 +273,18 @@ $module: #{$prefix}-button;
222
273
  }
223
274
  }
224
275
 
276
+ &-outline {
277
+ background-color: transparent;
278
+
279
+ &:not(.#{$module}-disabled):hover {
280
+ background-color: $color-button_outline-bg-hover;
281
+ }
282
+
283
+ &:not(.#{$module}-disabled):active {
284
+ background-color: $color-button_outline-bg-active;
285
+ }
286
+ }
287
+
225
288
  &-light {
226
289
  background-color: $color-button_light-bg-default;
227
290
  border: $width-button_light-border $color-button_light-border-default solid;
package/lib/es/button/variables.scss CHANGED
@@ -11,6 +11,7 @@ $color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按
11
11
  $color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
12
12
  $color-button_primary-text-active: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 按下
13
13
  $color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
14
+ $color-button_primary_outline-border-default: var(--semi-color-border); // 边框模式下 primary 边框颜色
14
15
 
15
16
  $color-button_primary_borderless-text-default: var(--semi-color-primary); // 主要按钮无边框文字颜色
16
17
 
@@ -26,6 +27,7 @@ $color-button_secondary-text-hover: rgba(var(--semi-white), 1); // 次要按钮
26
27
  $color-button_secondary-bg-active: var(--semi-color-secondary-active); // 次要按钮背景颜色 - 按下
27
28
  $color-button_secondary-border-active: var(--semi-color-secondary-active); // 次要按钮描边颜色 - 按下
28
29
  $color-button_secondary-text-active: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 按下
30
+ $color-button_secondary_outline-border-default: var(--semi-color-border); // 边框模式下 secondary 边框颜色
29
31
 
30
32
  $color-button_secondary_borderless-text-default: var(--semi-color-secondary); // 次要按钮无边框文字颜色
31
33
 
@@ -42,6 +44,7 @@ $color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮
42
44
  $color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
43
45
  $color-button_danger-text-active: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 按下
44
46
  $color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
47
+ $color-button_danger_outline-border-default: var(--semi-color-danger); // 边框模式下 danger 边框颜色
45
48
 
46
49
  $color-button_danger_borderless-text-default: var(--semi-color-danger); // 危险按钮无边框文字颜色
47
50
 
@@ -58,7 +61,7 @@ $color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按
58
61
  $color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
59
62
  $color-button_warning-text-active: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 按下
60
63
  $color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
61
-
64
+ $color-button_warning_outline-border-default: var(--semi-color-warning); // 边框模式下 warning 边框颜色
62
65
  $color-button_warning_borderless-text-default: var(--semi-color-warning); // 警告按钮无边框文字颜色
63
66
 
64
67
  // tertiary
@@ -73,7 +76,7 @@ $color-button_tertiary-text-hover: rgba(var(--semi-white), 1); // 第三按钮
73
76
  $color-button_tertiary-bg-active: var(--semi-color-tertiary-active); // 第三按钮背景颜色 - 按下
74
77
  $color-button_tertiary-border-active: var(--semi-color-tertiary-active); // 第三按钮描边颜色 - 按下
75
78
  $color-button_tertiary-text-active: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 按下
76
-
79
+ $color-button_tertiary_outline-border-default: var(--semi-color-border); // 边框模式下 danger 边框颜色
77
80
  $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
78
81
 
79
82
  // disabled
@@ -87,7 +90,7 @@ $color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default;
87
90
  $color-button_disabled_danger-bg-default: $color-button_disabled-bg-default; // 禁用 danger 按钮背景颜色
88
91
  $color-button_disabled_warning-bg-default: $color-button_disabled-bg-default; // 禁用 warning 按钮背景颜色
89
92
  $color-button_disabled_tertiary-bg-default: $color-button_disabled-bg-default; // 禁用 tertiary 按钮背景颜色
90
-
93
+ $color-button_disabled_outline-border-default: var(--semi-color-border); // 边框模式下 disable 边框颜色
91
94
 
92
95
 
93
96
  // light
@@ -114,6 +117,12 @@ $color-button_borderless-border-hover: $color-button_borderless-border-default;
114
117
  $color-button_borderless-border-active: $color-button_borderless-border-hover; // 无背景按钮描边颜色 - 按下
115
118
  $width-button_borderless-border: 0; // 无背景按钮描边宽度
116
119
 
120
+
121
+ // outline
122
+ $width-button_outline-border: 1px; // 边框模式按钮边框宽度
123
+ $color-button_outline-bg-hover: var(--semi-color-fill-0); // 边框模式按钮背景颜色 - 悬浮
124
+ $color-button_outline-bg-active: var(--semi-color-fill-1); // 边框模式按钮背景颜色 - 按下
125
+
117
126
  // buttongroup
118
127
 
119
128
  $color-button_group-border-default: var(--semi-color-border); // 按钮组分割线颜色
@@ -163,6 +172,6 @@ $width-button-outline: 2px; // 按钮轮廓宽度
163
172
 
164
173
 
165
174
  $radius-button_splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // split button 左上圆角
166
- $radius-button_splitButtonGroup_first_bottomLeft:var(--semi-border-radius-small); // split button 左下圆角
167
- $radius-button_splitButtonGroup_last_topRight:var(--semi-border-radius-small); // split button 右上圆角
168
- $radius-button_splitButtonGroup_last_bottomRight:var(--semi-border-radius-small); // split button 右下圆角
175
+ $radius-button_splitButtonGroup_first_bottomLeft: var(--semi-border-radius-small); // split button 左下圆角
176
+ $radius-button_splitButtonGroup_last_topRight: var(--semi-border-radius-small); // split button 右上圆角
177
+ $radius-button_splitButtonGroup_last_bottomRight: var(--semi-border-radius-small); // split button 右下圆角
package/lib/es/tabs/tabs.css CHANGED
@@ -21,6 +21,33 @@
21
21
  .semi-tabs-bar-extra {
22
22
  padding: 0px 5px;
23
23
  }
24
+ .semi-tabs-bar-more-trigger {
25
+ display: inline-block;
26
+ cursor: pointer;
27
+ color: var(--semi-color-text-2);
28
+ }
29
+ .semi-tabs-bar-more-trigger-content {
30
+ display: flex;
31
+ align-content: center;
32
+ }
33
+ .semi-tabs-bar-more-trigger-content-icon:not(:not(.semi-tabs-bar-more-trigger-content-icon)) {
34
+ margin-top: 0px;
35
+ margin-bottom: 0px;
36
+ margin-left: 8px;
37
+ margin-right: 8px;
38
+ flex-shrink: 0;
39
+ display: flex;
40
+ align-items: center;
41
+ }
42
+ .semi-tabs-bar-more-trigger-line {
43
+ padding: 16px 4px 14px 4px;
44
+ }
45
+ .semi-tabs-bar-more-trigger-card {
46
+ padding: 8px 12px;
47
+ }
48
+ .semi-tabs-bar-more-trigger-button {
49
+ padding: 8px 12px;
50
+ }
24
51
  .semi-tabs-bar .semi-tabs-tab {
25
52
  font-size: 14px;
26
53
  line-height: 20px;
package/lib/es/tabs/tabs.scss CHANGED
@@ -11,6 +11,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
11
11
  box-sizing: border-box;
12
12
  position: relative;
13
13
 
14
+
14
15
  &-left {
15
16
  display: flex;
16
17
  flex-direction: row;
@@ -30,6 +31,39 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
30
31
  padding: $spacing-tabs_bar_extra-paddingY $spacing-tabs_bar_extra-paddingX;
31
32
  }
32
33
 
34
+ &-more-trigger{
35
+ display: inline-block;
36
+ cursor: pointer;
37
+ color: var(--semi-color-text-2);
38
+
39
+ &-content{
40
+ display: flex;
41
+ align-content: center;
42
+
43
+ &-icon:not(:not(&-icon)){ // increase priority
44
+ margin-top: $spacing-tabs_tab-more_trigger_icon-marginTop;
45
+ margin-bottom: $spacing-tabs_tab-more_trigger_icon-marginBottom;
46
+ margin-left: $spacing-tabs_tab-more_trigger_icon-marginLeft;
47
+ margin-right: $spacing-tabs_tab-more_trigger_icon-marginRight;
48
+ flex-shrink: 0;
49
+ display: flex;
50
+ align-items: center;
51
+ }
52
+ }
53
+
54
+ &-line{
55
+ padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
56
+ }
57
+
58
+ &-card{
59
+ padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
60
+ }
61
+
62
+ &-button{
63
+ padding: $spacing-tabs_bar_button_tab-paddingY $spacing-tabs_bar_button_tab-paddingX;
64
+ }
65
+ }
66
+
33
67
  .#{$module}-tab {
34
68
  @include font-size-regular;
35
69
  cursor: pointer;
package/lib/es/tabs/variables.scss CHANGED
@@ -85,6 +85,11 @@ $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺
85
85
  $height-tabs_bar_extra_small: 36px; // 小尺寸页签高度
86
86
  $font-tabs_bar_extra_small-lineHeight: $height-tabs_bar_extra_small; // 小尺寸页签文字行高
87
87
 
88
+ $spacing-tabs_tab-more_trigger_icon-marginLeft: 8px;
89
+ $spacing-tabs_tab-more_trigger_icon-marginRight: 8px;
90
+ $spacing-tabs_tab-more_trigger_icon-marginTop: 0px;
91
+ $spacing-tabs_tab-more_trigger_icon-marginBottom: 0px;
92
+
88
93
  $spacing-tabs_tab-pane_arrow: 8px; //滚动折叠箭头内边距
89
94
  $spacing-tabs_bar_extra-paddingY: 0px; // 附加操作垂直内边距
90
95
  $spacing-tabs_bar_extra-paddingX: 5px; // 附加操作水平内边距
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.58.0-beta.0",
3
+ "version": "2.58.0",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "build:lib": "node ./scripts/compileLib.js",
7
7
  "prepublishOnly": "npm run build:lib"
8
8
  },
9
9
  "dependencies": {
10
- "@douyinfe/semi-animation": "2.58.0-beta.0",
10
+ "@douyinfe/semi-animation": "2.58.0",
11
11
  "async-validator": "^3.5.0",
12
12
  "classnames": "^2.2.6",
13
13
  "date-fns": "^2.29.3",
@@ -24,7 +24,7 @@
24
24
  "*.scss",
25
25
  "*.css"
26
26
  ],
27
- "gitHead": "bd0c5bf8924d1e971746ba88f83c2c8857d307f7",
27
+ "gitHead": "71f716ee06be81190ed3d28de4e61542ad0b62d3",
28
28
  "devDependencies": {
29
29
  "@babel/plugin-transform-runtime": "^7.15.8",
30
30
  "@babel/preset-env": "^7.15.8",
package/tabs/tabs.scss CHANGED
@@ -11,6 +11,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
11
11
  box-sizing: border-box;
12
12
  position: relative;
13
13
 
14
+
14
15
  &-left {
15
16
  display: flex;
16
17
  flex-direction: row;
@@ -30,6 +31,39 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
30
31
  padding: $spacing-tabs_bar_extra-paddingY $spacing-tabs_bar_extra-paddingX;
31
32
  }
32
33
 
34
+ &-more-trigger{
35
+ display: inline-block;
36
+ cursor: pointer;
37
+ color: var(--semi-color-text-2);
38
+
39
+ &-content{
40
+ display: flex;
41
+ align-content: center;
42
+
43
+ &-icon:not(:not(&-icon)){ // increase priority
44
+ margin-top: $spacing-tabs_tab-more_trigger_icon-marginTop;
45
+ margin-bottom: $spacing-tabs_tab-more_trigger_icon-marginBottom;
46
+ margin-left: $spacing-tabs_tab-more_trigger_icon-marginLeft;
47
+ margin-right: $spacing-tabs_tab-more_trigger_icon-marginRight;
48
+ flex-shrink: 0;
49
+ display: flex;
50
+ align-items: center;
51
+ }
52
+ }
53
+
54
+ &-line{
55
+ padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
56
+ }
57
+
58
+ &-card{
59
+ padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
60
+ }
61
+
62
+ &-button{
63
+ padding: $spacing-tabs_bar_button_tab-paddingY $spacing-tabs_bar_button_tab-paddingX;
64
+ }
65
+ }
66
+
33
67
  .#{$module}-tab {
34
68
  @include font-size-regular;
35
69
  cursor: pointer;
package/tabs/variables.scss CHANGED
@@ -85,6 +85,11 @@ $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺
85
85
  $height-tabs_bar_extra_small: 36px; // 小尺寸页签高度
86
86
  $font-tabs_bar_extra_small-lineHeight: $height-tabs_bar_extra_small; // 小尺寸页签文字行高
87
87
 
88
+ $spacing-tabs_tab-more_trigger_icon-marginLeft: 8px;
89
+ $spacing-tabs_tab-more_trigger_icon-marginRight: 8px;
90
+ $spacing-tabs_tab-more_trigger_icon-marginTop: 0px;
91
+ $spacing-tabs_tab-more_trigger_icon-marginBottom: 0px;
92
+
88
93
  $spacing-tabs_tab-pane_arrow: 8px; //滚动折叠箭头内边距
89
94
  $spacing-tabs_bar_extra-paddingY: 0px; // 附加操作垂直内边距
90
95
  $spacing-tabs_bar_extra-paddingX: 5px; // 附加操作水平内边距