@befe/brick-comp-tag 0.2.98 → 0.2.99

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 (11) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/es/index.css +183 -53
  3. package/es/style.css +183 -53
  4. package/es/tag-group.js +15 -6
  5. package/es/tag.js +15 -4
  6. package/package.json +6 -6
  7. package/src/style.scss +75 -45
  8. package/src/tag-group.tsx +18 -2
  9. package/src/tag.tsx +22 -5
  10. package/types/tag-group.d.ts +5 -0
  11. package/types/tag.d.ts +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.2.99](https://icode.baidu.com/repos/baidu/be-fe/brick/merge/%40befe%2Fbrick-comp-tag%400.2.98...%40befe%2Fbrick-comp-tag%400.2.99) (2026-05-22)
7
+
8
+
9
+ ### Features
10
+
11
+ * **components/tag:** color 扩展 `red` / `orange` / `yellow` / `green` / `cyan` / `blue` / `purple` / `pink` ([819b0a0](https://icode.baidu.com/repos/baidu/be-fe/brick/commits/819b0a0ae372efc5c70845c2eb12fde669c19683))
12
+ * **components/tag:** select mode 新增 `color='light'` 轻量风格，配套主题变量 ([41dd296](https://icode.baidu.com/repos/baidu/be-fe/brick/commits/41dd29615bcf671633067c43a09a4bb8bfb43ddc))
13
+
14
+
15
+
16
+
17
+
6
18
  ## [0.2.98](https://icode.baidu.com/repos/baidu/be-fe/brick/merge/%40befe%2Fbrick-comp-tag%400.2.97...%40befe%2Fbrick-comp-tag%400.2.98) (2026-05-19)
7
19
 
8
20
  **Note:** Version bump only for package @befe/brick-comp-tag
package/es/index.css CHANGED
@@ -47,6 +47,104 @@
47
47
  padding-left: 0;
48
48
  padding-right: 0;
49
49
  }
50
+ .brick-tag-color-normal {
51
+ color: rgb(51, 51, 51);
52
+ background-color: rgb(244.8, 244.8, 244.8);
53
+ }
54
+ .brick-tag-color-normal:not(.brick-tag-non-bordered) {
55
+ border: 1px solid rgb(224.4, 224.4, 224.4);
56
+ }
57
+ .brick-tag-color-light {
58
+ color: rgb(51, 51, 51);
59
+ background-color: rgb(255, 255, 255);
60
+ }
61
+ .brick-tag-color-light:not(.brick-tag-non-bordered) {
62
+ border: 1px solid rgb(224.4, 224.4, 224.4);
63
+ }
64
+ .brick-tag-color-brand {
65
+ color: #4c84ff;
66
+ background-color: rgb(242.25, 245.225, 255);
67
+ }
68
+ .brick-tag-color-brand:not(.brick-tag-non-bordered) {
69
+ border: 1px solid rgb(147.9, 178.245, 255);
70
+ }
71
+ .brick-tag-color-success {
72
+ color: #39bf45;
73
+ background-color: rgb(242.25, 255, 244.375);
74
+ }
75
+ .brick-tag-color-success:not(.brick-tag-non-bordered) {
76
+ border: 1px solid rgb(125.715, 216.75, 136.33575);
77
+ }
78
+ .brick-tag-color-danger {
79
+ color: #e64552;
80
+ background-color: rgb(255, 242.25, 242.25);
81
+ }
82
+ .brick-tag-color-danger:not(.brick-tag-non-bordered) {
83
+ border: 1px solid rgb(255, 147.9, 153.255);
84
+ }
85
+ .brick-tag-color-warning {
86
+ color: #f27c49;
87
+ background-color: rgb(255, 247.1375, 242.25);
88
+ }
89
+ .brick-tag-color-warning:not(.brick-tag-non-bordered) {
90
+ border: 1px solid rgb(255, 183.6, 147.9);
91
+ }
92
+ .brick-tag-color-red {
93
+ color: #e64552;
94
+ background-color: rgb(255, 242.25, 242.25);
95
+ }
96
+ .brick-tag-color-red:not(.brick-tag-non-bordered) {
97
+ border: 1px solid rgb(255, 147.9, 153.255);
98
+ }
99
+ .brick-tag-color-orange {
100
+ color: #f27c49;
101
+ background-color: rgb(255, 247.1375, 242.25);
102
+ }
103
+ .brick-tag-color-orange:not(.brick-tag-non-bordered) {
104
+ border: 1px solid rgb(255, 183.6, 147.9);
105
+ }
106
+ .brick-tag-color-yellow {
107
+ color: #faaf19;
108
+ background-color: rgb(255, 251.8125, 242.25);
109
+ }
110
+ .brick-tag-color-yellow:not(.brick-tag-non-bordered) {
111
+ border: 1px solid rgb(255, 213.69, 117.3);
112
+ }
113
+ .brick-tag-color-green {
114
+ color: #39bf45;
115
+ background-color: rgb(242.25, 255, 244.375);
116
+ }
117
+ .brick-tag-color-green:not(.brick-tag-non-bordered) {
118
+ border: 1px solid rgb(125.715, 216.75, 136.33575);
119
+ }
120
+ .brick-tag-color-cyan {
121
+ color: #41d9cc;
122
+ background-color: rgb(242.25, 255, 255);
123
+ }
124
+ .brick-tag-color-cyan:not(.brick-tag-non-bordered) {
125
+ border: 1px solid rgb(140.505, 242.25, 237.16275);
126
+ }
127
+ .brick-tag-color-blue {
128
+ color: #4c84ff;
129
+ background-color: rgb(242.25, 245.225, 255);
130
+ }
131
+ .brick-tag-color-blue:not(.brick-tag-non-bordered) {
132
+ border: 1px solid rgb(147.9, 178.245, 255);
133
+ }
134
+ .brick-tag-color-purple {
135
+ color: #834bf2;
136
+ background-color: rgb(247.5625, 242.25, 255);
137
+ }
138
+ .brick-tag-color-purple:not(.brick-tag-non-bordered) {
139
+ border: 1px solid rgb(188.785, 150.45, 255);
140
+ }
141
+ .brick-tag-color-pink {
142
+ color: #e62e78;
143
+ background-color: rgb(255, 242.25, 246.2875);
144
+ }
145
+ .brick-tag-color-pink:not(.brick-tag-non-bordered) {
146
+ border: 1px solid rgb(255, 132.6, 177.48);
147
+ }
50
148
  .brick-tag-mode-edit {
51
149
  padding-right: 24px;
52
150
  }
@@ -59,43 +157,115 @@
59
157
  .brick-tag-mode-select:focus-visible {
60
158
  outline: none;
61
159
  }
62
- .brick-tag-mode-select:hover:not(.brick-tag-selected) {
160
+ .brick-tag-mode-select.brick-tag-color-normal:not(.brick-tag-selected):hover {
161
+ color: rgb(51, 51, 51);
63
162
  background: rgb(237.15, 237.15, 237.15);
163
+ border-color: rgb(224.4, 224.4, 224.4);
64
164
  }
65
- .brick-tag-mode-select:focus-visible:not(.brick-tag-selected) {
165
+ .brick-tag-mode-select.brick-tag-color-normal:not(.brick-tag-selected):focus-visible:not([tabindex^="-"]):not(:active) {
166
+ color: rgb(51, 51, 51);
66
167
  background: rgb(237.15, 237.15, 237.15);
67
168
  }
68
- .brick-tag-mode-select:focus-visible:not(.brick-tag-selected) {
169
+ .brick-tag-mode-select.brick-tag-color-normal:not(.brick-tag-selected):focus-visible:not([tabindex^="-"]):not(:active) {
69
170
  border-color: #4c84ff;
70
171
  box-shadow: 0 0 0 2px rgb(219.3, 228.225, 255);
71
172
  outline: none;
72
173
  }
73
- .brick-tag-mode-select:active:not(.brick-tag-selected) {
174
+ .brick-tag-mode-select.brick-tag-color-normal:not(.brick-tag-selected):active:not(.brick-tag-disabled) {
175
+ color: rgb(51, 51, 51);
74
176
  background: rgb(224.4, 224.4, 224.4);
177
+ border-color: transparent;
178
+ }
179
+ .brick-tag-mode-select.brick-tag-color-normal:not(.brick-tag-selected):disabled, .brick-tag-mode-select.brick-tag-color-normal:not(.brick-tag-selected).brick-tag-disabled {
180
+ color: rgb(204, 204, 204);
181
+ background: rgb(249.9, 249.9, 249.9);
182
+ border-color: rgb(237.15, 237.15, 237.15);
75
183
  }
76
- .brick-tag-selected {
184
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected {
77
185
  color: rgb(255, 255, 255);
78
186
  background: #4c84ff;
79
- border-color: #4c84ff;
80
187
  }
81
- .brick-tag-selected:hover {
188
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected:not(.brick-tag-non-bordered) {
189
+ border-color: transparent;
190
+ }
191
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected:hover {
192
+ color: rgb(255, 255, 255);
82
193
  background: rgb(112.2, 155.04, 255);
83
- border-color: rgb(112.2, 155.04, 255);
194
+ border-color: transparent;
84
195
  }
85
- .brick-tag-selected:focus-visible {
196
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected:focus-visible:not([tabindex^="-"]):not(:active) {
197
+ color: rgb(255, 255, 255);
86
198
  background: rgb(112.2, 155.04, 255);
87
199
  }
88
- .brick-tag-selected:focus-visible {
200
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected:focus-visible:not([tabindex^="-"]):not(:active) {
89
201
  border-color: #4c84ff;
90
202
  box-shadow: 0 0 0 2px rgb(219.3, 228.225, 255);
91
203
  outline: none;
92
204
  }
93
- .brick-tag-selected:active {
205
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected:active {
206
+ color: rgb(255, 255, 255);
94
207
  background: rgb(54.1875, 108.375, 216.75);
95
- border-color: rgb(54.1875, 108.375, 216.75);
208
+ border-color: transparent;
209
+ }
210
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected:disabled, .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected.brick-tag-disabled {
211
+ color: rgb(255, 255, 255);
212
+ background: rgb(219.3, 228.225, 255);
213
+ border-color: transparent;
214
+ cursor: not-allowed;
215
+ }
216
+ .brick-tag-mode-select.brick-tag-color-light:not(.brick-tag-selected):hover {
217
+ color: #4c84ff;
218
+ background: rgb(242.25, 245.225, 255);
219
+ border-color: #4c84ff;
220
+ }
221
+ .brick-tag-mode-select.brick-tag-color-light:not(.brick-tag-selected):focus-visible:not([tabindex^="-"]):not(:active) {
222
+ color: #4c84ff;
223
+ background: rgb(242.25, 245.225, 255);
224
+ }
225
+ .brick-tag-mode-select.brick-tag-color-light:not(.brick-tag-selected):focus-visible:not([tabindex^="-"]):not(:active) {
226
+ border-color: #4c84ff;
227
+ box-shadow: 0 0 0 2px rgb(219.3, 228.225, 255);
228
+ outline: none;
96
229
  }
97
- .brick-tag-selected.brick-tag-disabled {
230
+ .brick-tag-mode-select.brick-tag-color-light:not(.brick-tag-selected):active:not(.brick-tag-disabled) {
231
+ color: #4c84ff;
98
232
  background: rgb(219.3, 228.225, 255);
233
+ border-color: #4c84ff;
234
+ }
235
+ .brick-tag-mode-select.brick-tag-color-light:not(.brick-tag-selected):disabled, .brick-tag-mode-select.brick-tag-color-light:not(.brick-tag-selected).brick-tag-disabled {
236
+ color: rgb(204, 204, 204);
237
+ background: rgb(249.9, 249.9, 249.9);
238
+ border-color: rgb(237.15, 237.15, 237.15);
239
+ }
240
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected {
241
+ color: #4c84ff;
242
+ background: rgb(242.25, 245.225, 255);
243
+ }
244
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected:not(.brick-tag-non-bordered) {
245
+ border-color: #4c84ff;
246
+ }
247
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected:hover {
248
+ color: rgb(255, 255, 255);
249
+ background: rgb(112.2, 155.04, 255);
250
+ border-color: transparent;
251
+ }
252
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected:focus-visible:not([tabindex^="-"]):not(:active) {
253
+ color: rgb(255, 255, 255);
254
+ background: rgb(112.2, 155.04, 255);
255
+ }
256
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected:focus-visible:not([tabindex^="-"]):not(:active) {
257
+ border-color: #4c84ff;
258
+ box-shadow: 0 0 0 2px rgb(219.3, 228.225, 255);
259
+ outline: none;
260
+ }
261
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected:active {
262
+ color: rgb(255, 255, 255);
263
+ background: rgb(54.1875, 108.375, 216.75);
264
+ border-color: transparent;
265
+ }
266
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected:disabled, .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected.brick-tag-disabled {
267
+ color: rgb(183.6, 202.64, 255);
268
+ background: rgb(242.25, 245.225, 255);
99
269
  border-color: rgb(219.3, 228.225, 255);
100
270
  cursor: not-allowed;
101
271
  }
@@ -255,44 +425,4 @@
255
425
  }
256
426
  .brick-tag-group-size-lg .brick-tag-group-item-add-button .brick-button-content {
257
427
  font-size: 14px;
258
- }
259
-
260
- .brick-tag-color-normal {
261
- color: rgb(51, 51, 51);
262
- background-color: rgb(244.8, 244.8, 244.8);
263
- }
264
- .brick-tag-color-normal:not(.brick-tag-non-bordered) {
265
- border: 1px solid rgb(224.4, 224.4, 224.4);
266
- }
267
-
268
- .brick-tag-color-primary {
269
- color: #4c84ff;
270
- background-color: rgb(242.25, 245.225, 255);
271
- }
272
- .brick-tag-color-primary:not(.brick-tag-non-bordered) {
273
- border: 1px solid rgb(147.9, 178.245, 255);
274
- }
275
-
276
- .brick-tag-color-success {
277
- color: #39bf45;
278
- background-color: rgb(242.25, 255, 244.375);
279
- }
280
- .brick-tag-color-success:not(.brick-tag-non-bordered) {
281
- border: 1px solid rgb(125.715, 216.75, 136.33575);
282
- }
283
-
284
- .brick-tag-color-danger {
285
- color: #e64552;
286
- background-color: rgb(255, 242.25, 242.25);
287
- }
288
- .brick-tag-color-danger:not(.brick-tag-non-bordered) {
289
- border: 1px solid rgb(255, 147.9, 153.255);
290
- }
291
-
292
- .brick-tag-color-warning {
293
- color: #f27c49;
294
- background-color: rgb(255, 247.1375, 242.25);
295
- }
296
- .brick-tag-color-warning:not(.brick-tag-non-bordered) {
297
- border: 1px solid rgb(255, 183.6, 147.9);
298
428
  }
package/es/style.css CHANGED
@@ -47,6 +47,104 @@
47
47
  padding-left: 0;
48
48
  padding-right: 0;
49
49
  }
50
+ .brick-tag-color-normal {
51
+ color: rgb(51, 51, 51);
52
+ background-color: rgb(244.8, 244.8, 244.8);
53
+ }
54
+ .brick-tag-color-normal:not(.brick-tag-non-bordered) {
55
+ border: 1px solid rgb(224.4, 224.4, 224.4);
56
+ }
57
+ .brick-tag-color-light {
58
+ color: rgb(51, 51, 51);
59
+ background-color: rgb(255, 255, 255);
60
+ }
61
+ .brick-tag-color-light:not(.brick-tag-non-bordered) {
62
+ border: 1px solid rgb(224.4, 224.4, 224.4);
63
+ }
64
+ .brick-tag-color-brand {
65
+ color: #4c84ff;
66
+ background-color: rgb(242.25, 245.225, 255);
67
+ }
68
+ .brick-tag-color-brand:not(.brick-tag-non-bordered) {
69
+ border: 1px solid rgb(147.9, 178.245, 255);
70
+ }
71
+ .brick-tag-color-success {
72
+ color: #39bf45;
73
+ background-color: rgb(242.25, 255, 244.375);
74
+ }
75
+ .brick-tag-color-success:not(.brick-tag-non-bordered) {
76
+ border: 1px solid rgb(125.715, 216.75, 136.33575);
77
+ }
78
+ .brick-tag-color-danger {
79
+ color: #e64552;
80
+ background-color: rgb(255, 242.25, 242.25);
81
+ }
82
+ .brick-tag-color-danger:not(.brick-tag-non-bordered) {
83
+ border: 1px solid rgb(255, 147.9, 153.255);
84
+ }
85
+ .brick-tag-color-warning {
86
+ color: #f27c49;
87
+ background-color: rgb(255, 247.1375, 242.25);
88
+ }
89
+ .brick-tag-color-warning:not(.brick-tag-non-bordered) {
90
+ border: 1px solid rgb(255, 183.6, 147.9);
91
+ }
92
+ .brick-tag-color-red {
93
+ color: #e64552;
94
+ background-color: rgb(255, 242.25, 242.25);
95
+ }
96
+ .brick-tag-color-red:not(.brick-tag-non-bordered) {
97
+ border: 1px solid rgb(255, 147.9, 153.255);
98
+ }
99
+ .brick-tag-color-orange {
100
+ color: #f27c49;
101
+ background-color: rgb(255, 247.1375, 242.25);
102
+ }
103
+ .brick-tag-color-orange:not(.brick-tag-non-bordered) {
104
+ border: 1px solid rgb(255, 183.6, 147.9);
105
+ }
106
+ .brick-tag-color-yellow {
107
+ color: #faaf19;
108
+ background-color: rgb(255, 251.8125, 242.25);
109
+ }
110
+ .brick-tag-color-yellow:not(.brick-tag-non-bordered) {
111
+ border: 1px solid rgb(255, 213.69, 117.3);
112
+ }
113
+ .brick-tag-color-green {
114
+ color: #39bf45;
115
+ background-color: rgb(242.25, 255, 244.375);
116
+ }
117
+ .brick-tag-color-green:not(.brick-tag-non-bordered) {
118
+ border: 1px solid rgb(125.715, 216.75, 136.33575);
119
+ }
120
+ .brick-tag-color-cyan {
121
+ color: #41d9cc;
122
+ background-color: rgb(242.25, 255, 255);
123
+ }
124
+ .brick-tag-color-cyan:not(.brick-tag-non-bordered) {
125
+ border: 1px solid rgb(140.505, 242.25, 237.16275);
126
+ }
127
+ .brick-tag-color-blue {
128
+ color: #4c84ff;
129
+ background-color: rgb(242.25, 245.225, 255);
130
+ }
131
+ .brick-tag-color-blue:not(.brick-tag-non-bordered) {
132
+ border: 1px solid rgb(147.9, 178.245, 255);
133
+ }
134
+ .brick-tag-color-purple {
135
+ color: #834bf2;
136
+ background-color: rgb(247.5625, 242.25, 255);
137
+ }
138
+ .brick-tag-color-purple:not(.brick-tag-non-bordered) {
139
+ border: 1px solid rgb(188.785, 150.45, 255);
140
+ }
141
+ .brick-tag-color-pink {
142
+ color: #e62e78;
143
+ background-color: rgb(255, 242.25, 246.2875);
144
+ }
145
+ .brick-tag-color-pink:not(.brick-tag-non-bordered) {
146
+ border: 1px solid rgb(255, 132.6, 177.48);
147
+ }
50
148
  .brick-tag-mode-edit {
51
149
  padding-right: 24px;
52
150
  }
@@ -59,43 +157,115 @@
59
157
  .brick-tag-mode-select:focus-visible {
60
158
  outline: none;
61
159
  }
62
- .brick-tag-mode-select:hover:not(.brick-tag-selected) {
160
+ .brick-tag-mode-select.brick-tag-color-normal:not(.brick-tag-selected):hover {
161
+ color: rgb(51, 51, 51);
63
162
  background: rgb(237.15, 237.15, 237.15);
163
+ border-color: rgb(224.4, 224.4, 224.4);
64
164
  }
65
- .brick-tag-mode-select:focus-visible:not(.brick-tag-selected) {
165
+ .brick-tag-mode-select.brick-tag-color-normal:not(.brick-tag-selected):focus-visible:not([tabindex^="-"]):not(:active) {
166
+ color: rgb(51, 51, 51);
66
167
  background: rgb(237.15, 237.15, 237.15);
67
168
  }
68
- .brick-tag-mode-select:focus-visible:not(.brick-tag-selected) {
169
+ .brick-tag-mode-select.brick-tag-color-normal:not(.brick-tag-selected):focus-visible:not([tabindex^="-"]):not(:active) {
69
170
  border-color: #4c84ff;
70
171
  box-shadow: 0 0 0 2px rgb(219.3, 228.225, 255);
71
172
  outline: none;
72
173
  }
73
- .brick-tag-mode-select:active:not(.brick-tag-selected) {
174
+ .brick-tag-mode-select.brick-tag-color-normal:not(.brick-tag-selected):active:not(.brick-tag-disabled) {
175
+ color: rgb(51, 51, 51);
74
176
  background: rgb(224.4, 224.4, 224.4);
177
+ border-color: transparent;
178
+ }
179
+ .brick-tag-mode-select.brick-tag-color-normal:not(.brick-tag-selected):disabled, .brick-tag-mode-select.brick-tag-color-normal:not(.brick-tag-selected).brick-tag-disabled {
180
+ color: rgb(204, 204, 204);
181
+ background: rgb(249.9, 249.9, 249.9);
182
+ border-color: rgb(237.15, 237.15, 237.15);
75
183
  }
76
- .brick-tag-selected {
184
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected {
77
185
  color: rgb(255, 255, 255);
78
186
  background: #4c84ff;
79
- border-color: #4c84ff;
80
187
  }
81
- .brick-tag-selected:hover {
188
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected:not(.brick-tag-non-bordered) {
189
+ border-color: transparent;
190
+ }
191
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected:hover {
192
+ color: rgb(255, 255, 255);
82
193
  background: rgb(112.2, 155.04, 255);
83
- border-color: rgb(112.2, 155.04, 255);
194
+ border-color: transparent;
84
195
  }
85
- .brick-tag-selected:focus-visible {
196
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected:focus-visible:not([tabindex^="-"]):not(:active) {
197
+ color: rgb(255, 255, 255);
86
198
  background: rgb(112.2, 155.04, 255);
87
199
  }
88
- .brick-tag-selected:focus-visible {
200
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected:focus-visible:not([tabindex^="-"]):not(:active) {
89
201
  border-color: #4c84ff;
90
202
  box-shadow: 0 0 0 2px rgb(219.3, 228.225, 255);
91
203
  outline: none;
92
204
  }
93
- .brick-tag-selected:active {
205
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected:active {
206
+ color: rgb(255, 255, 255);
94
207
  background: rgb(54.1875, 108.375, 216.75);
95
- border-color: rgb(54.1875, 108.375, 216.75);
208
+ border-color: transparent;
209
+ }
210
+ .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected:disabled, .brick-tag-mode-select.brick-tag-color-normal.brick-tag-selected.brick-tag-disabled {
211
+ color: rgb(255, 255, 255);
212
+ background: rgb(219.3, 228.225, 255);
213
+ border-color: transparent;
214
+ cursor: not-allowed;
215
+ }
216
+ .brick-tag-mode-select.brick-tag-color-light:not(.brick-tag-selected):hover {
217
+ color: #4c84ff;
218
+ background: rgb(242.25, 245.225, 255);
219
+ border-color: #4c84ff;
220
+ }
221
+ .brick-tag-mode-select.brick-tag-color-light:not(.brick-tag-selected):focus-visible:not([tabindex^="-"]):not(:active) {
222
+ color: #4c84ff;
223
+ background: rgb(242.25, 245.225, 255);
224
+ }
225
+ .brick-tag-mode-select.brick-tag-color-light:not(.brick-tag-selected):focus-visible:not([tabindex^="-"]):not(:active) {
226
+ border-color: #4c84ff;
227
+ box-shadow: 0 0 0 2px rgb(219.3, 228.225, 255);
228
+ outline: none;
96
229
  }
97
- .brick-tag-selected.brick-tag-disabled {
230
+ .brick-tag-mode-select.brick-tag-color-light:not(.brick-tag-selected):active:not(.brick-tag-disabled) {
231
+ color: #4c84ff;
98
232
  background: rgb(219.3, 228.225, 255);
233
+ border-color: #4c84ff;
234
+ }
235
+ .brick-tag-mode-select.brick-tag-color-light:not(.brick-tag-selected):disabled, .brick-tag-mode-select.brick-tag-color-light:not(.brick-tag-selected).brick-tag-disabled {
236
+ color: rgb(204, 204, 204);
237
+ background: rgb(249.9, 249.9, 249.9);
238
+ border-color: rgb(237.15, 237.15, 237.15);
239
+ }
240
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected {
241
+ color: #4c84ff;
242
+ background: rgb(242.25, 245.225, 255);
243
+ }
244
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected:not(.brick-tag-non-bordered) {
245
+ border-color: #4c84ff;
246
+ }
247
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected:hover {
248
+ color: rgb(255, 255, 255);
249
+ background: rgb(112.2, 155.04, 255);
250
+ border-color: transparent;
251
+ }
252
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected:focus-visible:not([tabindex^="-"]):not(:active) {
253
+ color: rgb(255, 255, 255);
254
+ background: rgb(112.2, 155.04, 255);
255
+ }
256
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected:focus-visible:not([tabindex^="-"]):not(:active) {
257
+ border-color: #4c84ff;
258
+ box-shadow: 0 0 0 2px rgb(219.3, 228.225, 255);
259
+ outline: none;
260
+ }
261
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected:active {
262
+ color: rgb(255, 255, 255);
263
+ background: rgb(54.1875, 108.375, 216.75);
264
+ border-color: transparent;
265
+ }
266
+ .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected:disabled, .brick-tag-mode-select.brick-tag-color-light.brick-tag-selected.brick-tag-disabled {
267
+ color: rgb(183.6, 202.64, 255);
268
+ background: rgb(242.25, 245.225, 255);
99
269
  border-color: rgb(219.3, 228.225, 255);
100
270
  cursor: not-allowed;
101
271
  }
@@ -255,44 +425,4 @@
255
425
  }
256
426
  .brick-tag-group-size-lg .brick-tag-group-item-add-button .brick-button-content {
257
427
  font-size: 14px;
258
- }
259
-
260
- .brick-tag-color-normal {
261
- color: rgb(51, 51, 51);
262
- background-color: rgb(244.8, 244.8, 244.8);
263
- }
264
- .brick-tag-color-normal:not(.brick-tag-non-bordered) {
265
- border: 1px solid rgb(224.4, 224.4, 224.4);
266
- }
267
-
268
- .brick-tag-color-primary {
269
- color: #4c84ff;
270
- background-color: rgb(242.25, 245.225, 255);
271
- }
272
- .brick-tag-color-primary:not(.brick-tag-non-bordered) {
273
- border: 1px solid rgb(147.9, 178.245, 255);
274
- }
275
-
276
- .brick-tag-color-success {
277
- color: #39bf45;
278
- background-color: rgb(242.25, 255, 244.375);
279
- }
280
- .brick-tag-color-success:not(.brick-tag-non-bordered) {
281
- border: 1px solid rgb(125.715, 216.75, 136.33575);
282
- }
283
-
284
- .brick-tag-color-danger {
285
- color: #e64552;
286
- background-color: rgb(255, 242.25, 242.25);
287
- }
288
- .brick-tag-color-danger:not(.brick-tag-non-bordered) {
289
- border: 1px solid rgb(255, 147.9, 153.255);
290
- }
291
-
292
- .brick-tag-color-warning {
293
- color: #f27c49;
294
- background-color: rgb(255, 247.1375, 242.25);
295
- }
296
- .brick-tag-color-warning:not(.brick-tag-non-bordered) {
297
- border: 1px solid rgb(255, 183.6, 147.9);
298
428
  }
package/es/tag-group.js CHANGED
@@ -115,6 +115,14 @@ export var TagGroup = /*#__PURE__*/function (_ConfiguredComponent) {
115
115
  }
116
116
  return undefined;
117
117
  }
118
+ }, {
119
+ key: "color",
120
+ get: function get() {
121
+ var _this$props = this.props,
122
+ color = _this$props.color,
123
+ mode = _this$props.mode;
124
+ return mode === 'select' && color === 'light' ? 'light' : 'normal';
125
+ }
118
126
  }, {
119
127
  key: "isModeEdit",
120
128
  get: function get() {
@@ -224,10 +232,11 @@ export var TagGroup = /*#__PURE__*/function (_ConfiguredComponent) {
224
232
  }, {
225
233
  key: "renderTag",
226
234
  value: function renderTag(tagObj) {
227
- var _this$props = this.props,
228
- mode = _this$props.mode,
229
- shape = _this$props.shape,
230
- bordered = _this$props.bordered;
235
+ var _this$props2 = this.props,
236
+ mode = _this$props2.mode,
237
+ shape = _this$props2.shape,
238
+ bordered = _this$props2.bordered,
239
+ color = _this$props2.color;
231
240
  var id = tagObj.id,
232
241
  label = tagObj.label,
233
242
  disabled = tagObj.disabled;
@@ -237,8 +246,8 @@ export var TagGroup = /*#__PURE__*/function (_ConfiguredComponent) {
237
246
  shape: shape,
238
247
  bordered: bordered,
239
248
  disabled: disabled,
240
- size: this.size,
241
- color: 'normal'
249
+ color: color,
250
+ size: this.size
242
251
  };
243
252
  if (mode === 'select') {
244
253
  tagProps.selected = tagObj.selected;
package/es/tag.js CHANGED
@@ -26,7 +26,7 @@ import { SvgMarkX } from '@befe/brick-icon';
26
26
  import { isString, isUndefined } from 'lodash-es';
27
27
  import { omit, safeInvoke, getTextFromReactNode, codeWarning } from '@befe/brick-utils';
28
28
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
29
- export var TAG_COLORS = ['normal', 'primary', 'success', 'danger', 'warning'];
29
+ export var TAG_COLORS = ['normal', 'light', 'brand', 'success', 'danger', 'warning', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple', 'pink'];
30
30
  export var TAG_SIZES = ['xs', 'sm', 'md', 'lg'];
31
31
  export var TAG_SHAPES = ['normal', 'capsule'];
32
32
  export var TAG_ADVANCED_MODES = ['select', 'edit'];
@@ -97,11 +97,21 @@ export var Tag = /*#__PURE__*/function (_ConfiguredComponent) {
97
97
  mode = _ref2.mode;
98
98
  process.env.NODE_ENV !== "production" ? codeWarning(
99
99
  // @ts-ignore 兼容已废弃的历史 color error
100
- this.props.color !== 'error', '[Button] color \'error\' has been deprecated, use color \'danger\' instead.') : void 0;
100
+ this.props.color !== 'error', '[Tag] color \'error\' has been deprecated, use color \'danger\' instead.') : void 0;
101
+ process.env.NODE_ENV !== "production" ? codeWarning(
102
+ // @ts-ignore 兼容已废弃的历史 color primary
103
+ this.props.color !== 'primary', '[Tag] color \'primary\' has been deprecated, use color \'brand\' instead.') : void 0;
101
104
 
102
105
  // istanbul ignore else
103
- // @ts-ignore 兼容已废弃的历史 color error
104
- var color = this.props.color === 'error' ? 'danger' : this.props.color;
106
+ // @ts-ignore 兼容已废弃的历史 color error / primary
107
+ var color = this.props.color === 'error' ? 'danger'
108
+ // @ts-ignore 兼容已废弃的历史 color primary
109
+ : this.props.color === 'primary' ? 'brand' : this.props.color;
110
+
111
+ // select 有两种模式
112
+ if (mode === 'select') {
113
+ return color === 'light' ? 'light' : 'normal';
114
+ }
105
115
 
106
116
  // （暂定）只在 normal 模式下支持颜色
107
117
  if (mode !== 'normal') {
@@ -173,6 +183,7 @@ export var Tag = /*#__PURE__*/function (_ConfiguredComponent) {
173
183
  children: [this.renderLabel(), this.renderRemoveBtn()]
174
184
  });
175
185
  return this.isModeSelect ? /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({}, this.elementProps), {}, {
186
+ disabled: this.props.disabled,
176
187
  children: inner
177
188
  })) : /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, this.elementProps), {}, {
178
189
  children: inner
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@befe/brick-comp-tag",
3
- "version": "0.2.98",
3
+ "version": "0.2.99",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "ssh://git@icode.baidu.com:8235/baidu/be-fe/brick",
@@ -25,12 +25,12 @@
25
25
  "author": "wujun07",
26
26
  "license": "ISC",
27
27
  "dependencies": {
28
- "@befe/brick-comp-button": "^0.2.94",
29
- "@befe/brick-comp-icon": "^0.2.91",
30
- "@befe/brick-comp-input": "^0.2.98",
28
+ "@befe/brick-comp-button": "^0.2.95",
29
+ "@befe/brick-comp-icon": "^0.2.92",
30
+ "@befe/brick-comp-input": "^0.2.99",
31
31
  "@befe/brick-core": "^0.2.52",
32
32
  "@befe/brick-icon": "^0.2.26",
33
- "@befe/brick-style": "^0.2.62",
33
+ "@befe/brick-style": "^0.2.63",
34
34
  "@befe/brick-utils": "^0.2.24"
35
35
  },
36
36
  "peerDependencies": {
@@ -39,5 +39,5 @@
39
39
  "react": "^16.9.0 || ^17.0.0",
40
40
  "react-dom": "^16.9.0 || ^17.0.0"
41
41
  },
42
- "gitHead": "005f5feafd6a07a43d23f7c7ef1e17c23aa4e474"
42
+ "gitHead": "2c1b9398f34b890b418a67e963194246354badd3"
43
43
  }
package/src/style.scss CHANGED
@@ -60,6 +60,17 @@
60
60
  }
61
61
  }
62
62
 
63
+ @each $color in tag.$tag-color-list {
64
+ &-color-#{$color} {
65
+ color: map.get(tag.$tag-text-color, $color);
66
+ background-color: map.get(tag.$tag-bg-color, $color);
67
+
68
+ &:not(.brick-tag-non-bordered) {
69
+ border: base.border(map.get(tag.$tag-border-color, $color));
70
+ }
71
+ }
72
+ }
73
+
63
74
  &-mode-edit {
64
75
  padding-right: tag.$tag-remove-btn-size + tag.$tag-remove-btn-margin + tag.$tag-padding-horizontal;
65
76
 
@@ -76,46 +87,74 @@
76
87
  outline: none;
77
88
  }
78
89
 
79
- &:hover:not(.brick-tag-selected) {
80
- background: tag.$tag-hover-bgc;
81
- }
82
-
83
- &:focus-visible:not(.brick-tag-selected) {
84
- background: tag.$tag-focus-bgc;
85
- @include base.focus-ring();
86
- }
87
-
88
- &:active:not(.brick-tag-selected) {
89
- background: tag.$tag-active-bgc;
90
+ @each $color in tag.$tag-mode-select-color-list {
91
+ &.brick-tag-color-#{$color} {
92
+ &:not(.brick-tag-selected) {
93
+ &:hover {
94
+ color: map.get(tag.$tag-mode-select-hover-color, $color);
95
+ background: map.get(tag.$tag-mode-select-hover-bgc, $color);
96
+ border-color: map.get(tag.$tag-mode-select-hover-border-color, $color)
97
+ }
98
+
99
+ &:focus-visible:not([tabindex^="-"]):not(:active) {
100
+ color: map.get(tag.$tag-mode-select-focus-color, $color);
101
+ background: map.get(tag.$tag-mode-select-focus-bgc, $color);
102
+ @include base.focus-ring();
103
+ }
104
+
105
+ &:active:not(.brick-tag-disabled) {
106
+ color: map.get(tag.$tag-mode-select-active-color, $color);
107
+ background: map.get(tag.$tag-mode-select-active-bgc, $color);
108
+ border-color: map.get(tag.$tag-mode-select-active-border-color, $color);
109
+ }
110
+
111
+ &:disabled,
112
+ &.brick-tag-disabled {
113
+ color: map.get(tag.$tag-mode-select-disabled-color, $color);
114
+ background: map.get(tag.$tag-mode-select-disabled-bgc, $color);
115
+ border-color: map.get(tag.$tag-mode-select-disabled-border-color, $color);
116
+ }
117
+ }
118
+
119
+ &.brick-tag-selected {
120
+ $selected-bgc: map.get(tag.$tag-mode-select-selected-bgc, $color);
121
+ color: map.get(tag.$tag-mode-select-selected-color, $color);
122
+ background: map.get(tag.$tag-mode-select-selected-bgc, $color);
123
+ &:not(.brick-tag-non-bordered) {
124
+ border-color: map.get(tag.$tag-mode-select-selected-border-color, $color);;
125
+ }
126
+
127
+ &:hover {
128
+ color: map.get(tag.$tag-mode-select-selected-hover-color, $color);
129
+ background: map.get(tag.$tag-mode-select-selected-hover-bgc, $color);
130
+ border-color: map.get(tag.$tag-mode-select-selected-hover-border-color, $color);
131
+ }
132
+
133
+ &:focus-visible:not([tabindex^="-"]):not(:active) {
134
+ color: map.get(tag.$tag-mode-select-selected-focus-color, $color);
135
+ background: map.get(tag.$tag-mode-select-selected-focus-bgc, $color);
136
+ @include base.focus-ring();
137
+ }
138
+
139
+ &:active {
140
+ color: map.get(tag.$tag-mode-select-selected-active-color, $color);
141
+ background: map.get(tag.$tag-mode-select-selected-active-bgc, $color);
142
+ border-color: map.get(tag.$tag-mode-select-selected-active-border-color, $color);
143
+ }
144
+
145
+ &:disabled,
146
+ &.brick-tag-disabled {
147
+ color: map.get(tag.$tag-mode-select-selected-disabled-color, $color);
148
+ background: map.get(tag.$tag-mode-select-selected-disabled-bgc, $color);
149
+ border-color: map.get(tag.$tag-mode-select-selected-disabled-border-color, $color);
150
+ cursor: not-allowed;
151
+ }
152
+ }
153
+ }
90
154
  }
91
155
  }
92
- &-selected {
93
- color: tag.$tag-selected-color;
94
- background: tag.$tag-selected-bgc;
95
- border-color: tag.$tag-selected-bgc;
96
-
97
-
98
- &:hover {
99
- background: tag.$tag-selected-hover-bgc;
100
- border-color: tag.$tag-selected-hover-bgc;
101
- }
102
156
 
103
- &:focus-visible {
104
- background: tag.$tag-selected-focus-bgc;
105
- @include base.focus-ring();
106
- }
107
157
 
108
- &:active {
109
- background: tag.$tag-selected-active-bgc;
110
- border-color: tag.$tag-selected-active-bgc;
111
- }
112
-
113
- &.brick-tag-disabled {
114
- background: tag.$tag-selected-disabled-bgc;
115
- border-color: tag.$tag-selected-disabled-bgc;
116
- cursor: not-allowed;
117
- }
118
- }
119
158
 
120
159
  &-disabled:not(&-selected) {
121
160
  background: tag.$tag-disabled-bgc;
@@ -212,13 +251,4 @@
212
251
  }
213
252
  }
214
253
 
215
- @each $color in tag.$tag-color-list {
216
- .brick-tag-color-#{$color} {
217
- color: map.get(tag.$tag-text-color, $color);
218
- background-color: map.get(tag.$tag-bg-color, $color);
219
254
 
220
- &:not(.brick-tag-non-bordered) {
221
- border: base.border(map.get(tag.$tag-border-color, $color));
222
- }
223
- }
224
- }
package/src/tag-group.tsx CHANGED
@@ -29,13 +29,21 @@ export interface TagGroupProps extends PropsFromTag {
29
29
  * 标签组模式
30
30
  */
31
31
  mode?: TagAdvancedMode
32
+
33
+ /**
34
+ * 颜色，仅 mode select 支持
35
+ */
36
+ color?: 'normal' | 'light'
37
+
32
38
  /**
33
39
  * tag 数据
34
40
  */
35
41
  data?: TagObject[]
42
+
36
43
  /**
37
44
  * tag 默认数据
38
45
  */
46
+
39
47
  defaultData?: TagObject[]
40
48
  /**
41
49
  * 数据变化时的回调
@@ -112,6 +120,14 @@ export class TagGroup extends ConfiguredComponent<TagGroupProps, TagGroupState>
112
120
  return undefined
113
121
  }
114
122
 
123
+ get color() {
124
+ const {color, mode} = this.props
125
+
126
+ return mode === 'select' && color === 'light'
127
+ ? 'light'
128
+ : 'normal'
129
+ }
130
+
115
131
  get isModeEdit() {
116
132
  const controlSize = this.controlSize
117
133
  if (controlSize) {
@@ -258,7 +274,7 @@ export class TagGroup extends ConfiguredComponent<TagGroupProps, TagGroupState>
258
274
  }
259
275
 
260
276
  renderTag(tagObj: TagObject) {
261
- const {mode, shape, bordered} = this.props
277
+ const {mode, shape, bordered, color} = this.props
262
278
  const {id, label, disabled} = tagObj
263
279
  const tagProps: TagObject = {
264
280
  id,
@@ -266,8 +282,8 @@ export class TagGroup extends ConfiguredComponent<TagGroupProps, TagGroupState>
266
282
  shape,
267
283
  bordered,
268
284
  disabled,
285
+ color,
269
286
  size: this.size,
270
- color: 'normal',
271
287
  }
272
288
 
273
289
  if (mode === 'select') {
package/src/tag.tsx CHANGED
@@ -7,7 +7,11 @@ import {SvgMarkX} from '@befe/brick-icon'
7
7
  import {isString, isUndefined} from 'lodash-es'
8
8
  import {omit, safeInvoke, getTextFromReactNode, codeWarning} from '@befe/brick-utils'
9
9
 
10
- export const TAG_COLORS = ['normal', 'primary', 'success', 'danger', 'warning'] as const
10
+ export const TAG_COLORS = [
11
+ 'normal', 'light',
12
+ 'brand', 'success', 'danger', 'warning',
13
+ 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple', 'pink',
14
+ ] as const
11
15
  export const TAG_SIZES = ['xs', 'sm', 'md', 'lg'] as const
12
16
  export const TAG_SHAPES = ['normal', 'capsule'] as const
13
17
  export const TAG_ADVANCED_MODES = ['select', 'edit'] as const
@@ -153,12 +157,25 @@ export class Tag extends ConfiguredComponent<TagProps, TagState> {
153
157
  codeWarning(
154
158
  // @ts-ignore 兼容已废弃的历史 color error
155
159
  this.props.color !== 'error',
156
- '[Button] color \'error\' has been deprecated, use color \'danger\' instead.'
160
+ '[Tag] color \'error\' has been deprecated, use color \'danger\' instead.'
161
+ )
162
+ codeWarning(
163
+ // @ts-ignore 兼容已废弃的历史 color primary
164
+ this.props.color !== 'primary',
165
+ '[Tag] color \'primary\' has been deprecated, use color \'brand\' instead.'
157
166
  )
158
167
 
159
168
  // istanbul ignore else
160
- // @ts-ignore 兼容已废弃的历史 color error
161
- const color = this.props.color === 'error' ? 'danger' : (this.props as TagPropsWithDefaults).color
169
+ // @ts-ignore 兼容已废弃的历史 color error / primary
170
+ const color = this.props.color === 'error' ? 'danger'
171
+ // @ts-ignore 兼容已废弃的历史 color primary
172
+ : this.props.color === 'primary' ? 'brand'
173
+ : (this.props as TagPropsWithDefaults).color
174
+
175
+ // select 有两种模式
176
+ if (mode === 'select') {
177
+ return color === 'light' ? 'light' : 'normal'
178
+ }
162
179
 
163
180
  // （暂定）只在 normal 模式下支持颜色
164
181
  if (mode !== 'normal') {
@@ -264,7 +281,7 @@ export class Tag extends ConfiguredComponent<TagProps, TagState> {
264
281
  )
265
282
 
266
283
  return this.isModeSelect
267
- ? <button {...this.elementProps}>{inner}</button>
284
+ ? <button {...this.elementProps} disabled={this.props.disabled}>{inner}</button>
268
285
  : <div {...this.elementProps}>{inner}</div>
269
286
 
270
287
  }
package/types/tag-group.d.ts CHANGED
@@ -16,6 +16,10 @@ export interface TagGroupProps extends PropsFromTag {
16
16
  * 标签组模式
17
17
  */
18
18
  mode?: TagAdvancedMode;
19
+ /**
20
+ * 颜色，仅 mode select 支持
21
+ */
22
+ color?: 'normal' | 'light';
19
23
  /**
20
24
  * tag 数据
21
25
  */
@@ -67,6 +71,7 @@ export declare class TagGroup extends ConfiguredComponent<TagGroupProps, TagGrou
67
71
  get className(): string;
68
72
  get size(): "xs" | "sm" | "md" | "lg";
69
73
  get controlSize(): "xs" | "sm" | "md" | undefined;
74
+ get color(): "normal" | "light";
70
75
  get isModeEdit(): boolean;
71
76
  static getDerivedStateFromProps(nextProps: TagGroupProps): Partial<TagGroupProps> | null;
72
77
  handleBlurInput: () => void;
package/types/tag.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { MouseEvent, MouseEventHandler, FocusEventHandler } from 'react';
2
2
  import { ConfiguredComponent } from '@befe/brick-core';
3
- export declare const TAG_COLORS: readonly ["normal", "primary", "success", "danger", "warning"];
3
+ export declare const TAG_COLORS: readonly ["normal", "light", "brand", "success", "danger", "warning", "red", "orange", "yellow", "green", "cyan", "blue", "purple", "pink"];
4
4
  export declare const TAG_SIZES: readonly ["xs", "sm", "md", "lg"];
5
5
  export declare const TAG_SHAPES: readonly ["normal", "capsule"];
6
6
  export declare const TAG_ADVANCED_MODES: readonly ["select", "edit"];
@@ -95,7 +95,7 @@ export declare class Tag extends ConfiguredComponent<TagProps, TagState> {
95
95
  };
96
96
  get className(): string;
97
97
  get size(): "xs" | "sm" | "md" | "lg";
98
- get color(): "normal" | "primary" | "success" | "danger" | "warning";
98
+ get color(): "normal" | "light" | "brand" | "success" | "danger" | "warning" | "red" | "orange" | "yellow" | "green" | "cyan" | "blue" | "purple" | "pink";
99
99
  get shape(): "normal" | "capsule";
100
100
  get isSingleChar(): boolean;
101
101
  get isModeSelect(): boolean;