@douyinfe/semi-theme-default 2.88.0-alpha.5 → 2.88.0-beta.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-theme-default",
3
- "version": "2.88.0-alpha.5",
3
+ "version": "2.88.0-beta.0",
4
4
  "description": "semi-theme-default",
5
5
  "keywords": [
6
6
  "semi-theme",
@@ -13,6 +13,6 @@
13
13
  "sideEffects": "*.scss",
14
14
  "author": "huangzhijing.pixel@bytedance.com",
15
15
  "license": "MIT",
16
- "gitHead": "4c315f4ba7979b29b92f8b06900de921897715a1",
16
+ "gitHead": "4ae6ef6d4279089069fbdf45b5a23b425a6c201e",
17
17
  "_unpkg": true
18
18
  }
@@ -161,6 +161,80 @@ body, body .semi-always-light, :host, :host .semi-always-light {
161
161
  --semi-yellow-7: 167,139,0;
162
162
  --semi-yellow-8: 125,106,0;
163
163
  --semi-yellow-9: 83,72,0;
164
+
165
+ // ai related
166
+ --semi-ai-purple-0: 248,237,255;
167
+ --semi-ai-purple-1: 242,218,255;
168
+ --semi-ai-purple-2: 227,181,255;
169
+ --semi-ai-purple-3: 209,145,255;
170
+ --semi-ai-purple-4: 189,108,255;
171
+ --semi-ai-purple-5: 166,71,255;
172
+ --semi-ai-purple-6: 134,54,219;
173
+ --semi-ai-purple-7: 105,40,184;
174
+ --semi-ai-purple-8: 78,28,148;
175
+ --semi-ai-purple-9: 54,18,112;
176
+
177
+ --semi-ai-general-0-3: 239,247,255;
178
+ --semi-ai-general-0-2: 244,244,255;
179
+ --semi-ai-general-0-1: 248,237,255;
180
+ --semi-ai-general-0-0: 255,242,255;
181
+
182
+ --semi-ai-general-1-3: 213,235,255;
183
+ --semi-ai-general-1-2: 223,224,255;
184
+ --semi-ai-general-1-1: 242,218,255;
185
+ --semi-ai-general-1-0: 255,218,254;
186
+
187
+ --semi-ai-general-2-3: 171,213,255;
188
+ --semi-ai-general-2-2: 193,192,255;
189
+ --semi-ai-general-2-1: 227,181,255;
190
+ --semi-ai-general-2-0: 254,181,255;
191
+
192
+ --semi-ai-general-3-3: 130,190,255;
193
+ --semi-ai-general-3-2: 163,160,255;
194
+ --semi-ai-general-3-1: 209,145,255;
195
+ --semi-ai-general-3-0: 249,143,255;
196
+
197
+ --semi-ai-general-4-3: 88,166,255;
198
+ --semi-ai-general-4-2: 134,129,255;
199
+ --semi-ai-general-4-1: 189,108,255;
200
+ --semi-ai-general-4-0: 242,106,255;
201
+
202
+ --semi-ai-general-5-3: 46,140,255;
203
+ --semi-ai-general-5-2: 107,97,255;
204
+ --semi-ai-general-5-1: 166,71,255;
205
+ --semi-ai-general-5-0: 233,69,255;
206
+
207
+ --semi-ai-general-6-3: 33,114,219;
208
+ --semi-ai-general-6-2: 88,77,219;
209
+ --semi-ai-general-6-1: 134,54,219;
210
+ --semi-ai-general-6-0: 194,53,219;
211
+
212
+ --semi-ai-general-7-3: 22,89,184;
213
+ --semi-ai-general-7-2: 71,59,184;
214
+ --semi-ai-general-7-1: 105,40,184;
215
+ --semi-ai-general-7-0: 157,39,184;
216
+
217
+ --semi-ai-general-8-3: 13,67,148;
218
+ --semi-ai-general-8-2: 55,43,148;
219
+ --semi-ai-general-8-1: 78,28,148;
220
+ --semi-ai-general-8-0: 121,27,148;
221
+
222
+ --semi-ai-general-9-3: 7,47,112;
223
+ --semi-ai-general-9-2: 40,29,112;
224
+ --semi-ai-general-9-1: 54,18,112;
225
+ --semi-ai-general-9-0: 88,17,112;
226
+
227
+ --semi-ai-general-0: linear-gradient(278deg, rgba(var(--semi-ai-general-0-0)) 0%, rgba(var(--semi-ai-general-0-1)) 30%, rgba(var(--semi-ai-general-0-2)) 60%, rgba(var(--semi-ai-general-0-3)) 100%);
228
+ --semi-ai-general-1: linear-gradient(278deg, rgba(var(--semi-ai-general-1-0)) 0%, rgba(var(--semi-ai-general-1-1)) 30%, rgba(var(--semi-ai-general-1-2)) 60%, rgba(var(--semi-ai-general-1-3)) 100%);
229
+ --semi-ai-general-2: linear-gradient(278deg, rgba(var(--semi-ai-general-2-0)) 0%, rgba(var(--semi-ai-general-2-1)) 30%, rgba(var(--semi-ai-general-2-2)) 60%, rgba(var(--semi-ai-general-2-3)) 100%);
230
+ --semi-ai-general-3: linear-gradient(278deg, rgba(var(--semi-ai-general-3-0)) 0%, rgba(var(--semi-ai-general-3-1)) 30%, rgba(var(--semi-ai-general-3-2)) 60%, rgba(var(--semi-ai-general-3-3)) 100%);
231
+ --semi-ai-general-4: linear-gradient(278deg, rgba(var(--semi-ai-general-4-0)) 0%, rgba(var(--semi-ai-general-4-1)) 30%, rgba(var(--semi-ai-general-4-2)) 60%, rgba(var(--semi-ai-general-4-3)) 100%);
232
+ --semi-ai-general-5: linear-gradient(278deg, rgba(var(--semi-ai-general-5-0)) 0%, rgba(var(--semi-ai-general-5-1)) 30%, rgba(var(--semi-ai-general-5-2)) 60%, rgba(var(--semi-ai-general-5-3)) 100%);
233
+ --semi-ai-general-6: linear-gradient(278deg, rgba(var(--semi-ai-general-6-0)) 0%, rgba(var(--semi-ai-general-6-1)) 30%, rgba(var(--semi-ai-general-6-2)) 60%, rgba(var(--semi-ai-general-6-3)) 100%);
234
+ --semi-ai-general-7: linear-gradient(278deg, rgba(var(--semi-ai-general-7-0)) 0%, rgba(var(--semi-ai-general-7-1)) 30%, rgba(var(--semi-ai-general-7-2)) 60%, rgba(var(--semi-ai-general-7-3)) 100%);
235
+ --semi-ai-general-8: linear-gradient(278deg, rgba(var(--semi-ai-general-8-0)) 0%, rgba(var(--semi-ai-general-8-1)) 30%, rgba(var(--semi-ai-general-8-2)) 60%, rgba(var(--semi-ai-general-8-3)) 100%);
236
+ --semi-ai-general-9: linear-gradient(278deg, rgba(var(--semi-ai-general-9-0)) 0%, rgba(var(--semi-ai-general-9-1)) 30%, rgba(var(--semi-ai-general-9-2)) 60%, rgba(var(--semi-ai-general-9-3)) 100%);
237
+
164
238
  }
165
239
 
166
240
  body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :host .semi-always-dark {
@@ -326,4 +400,78 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
326
400
  --semi-grey-9: 249,249,249;
327
401
  --semi-white: 255, 255, 255;
328
402
  --semi-black: 0, 0, 0;
403
+
404
+ // ai related
405
+ --semi-ai-purple-0: 58,23,112;
406
+ --semi-ai-purple-1: 83,35,148;
407
+ --semi-ai-purple-2: 111,49,184;
408
+ --semi-ai-purple-3: 141,65,219;
409
+ --semi-ai-purple-4: 167,68,255;
410
+ --semi-ai-purple-5: 195,117,255;
411
+ --semi-ai-purple-6: 213,152,255;
412
+ --semi-ai-purple-7: 229,186,255;
413
+ --semi-ai-purple-8: 243,221,255;
414
+ --semi-ai-purple-9: 251,243,255;
415
+
416
+ --semi-ai-general-0-0: 9,44,100;
417
+ --semi-ai-general-0-1: 39,29,108;
418
+ --semi-ai-general-0-2: 58,23,112;
419
+ --semi-ai-general-0-3: 80,18,101;
420
+
421
+ --semi-ai-general-1-0: 17,64,136;
422
+ --semi-ai-general-1-1: 54,43,144;
423
+ --semi-ai-general-1-2: 83,35,148;
424
+ --semi-ai-general-1-3: 113,28,137;
425
+
426
+ --semi-ai-general-2-0: 26,86,172;
427
+ --semi-ai-general-2-1: 70,59,180;
428
+ --semi-ai-general-2-2: 111,49,184;
429
+ --semi-ai-general-2-3: 148,41,173;
430
+
431
+ --semi-ai-general-3-0: 38,111,207;
432
+ --semi-ai-general-3-1: 88,78,215;
433
+ --semi-ai-general-3-2: 141,65,219;
434
+ --semi-ai-general-3-3: 185,55,208;
435
+
436
+ --semi-ai-general-4-0: 35,127,240;
437
+ --semi-ai-general-4-1: 94,84,248;
438
+ --semi-ai-general-4-2: 167,68,255;
439
+ --semi-ai-general-4-3: 219,56,241;
440
+
441
+ --semi-ai-general-5-0: 91,162,245;
442
+ --semi-ai-general-5-1: 134,129,252;
443
+ --semi-ai-general-5-2: 195,117,255;
444
+ --semi-ai-general-5-3: 234,107,246;
445
+
446
+ --semi-ai-general-6-0: 131,187,248;
447
+ --semi-ai-general-6-1: 163,160,253;
448
+ --semi-ai-general-6-2: 213,152,255;
449
+ --semi-ai-general-6-3: 243,143,248;
450
+
451
+ --semi-ai-general-7-0: 172,210,250;
452
+ --semi-ai-general-7-1: 192,192,253;
453
+ --semi-ai-general-7-2: 229,186,255;
454
+ --semi-ai-general-7-3: 249,180,251;
455
+
456
+ --semi-ai-general-8-0: 213,233,253;
457
+ --semi-ai-general-8-1: 223,223,254;
458
+ --semi-ai-general-8-2: 243,221,255;
459
+ --semi-ai-general-8-3: 253,217,252;
460
+
461
+ --semi-ai-general-9-0: 239,247,254;
462
+ --semi-ai-general-9-1: 244,244,255;
463
+ --semi-ai-general-9-2: 251,243,255;
464
+ --semi-ai-general-9-3: 254,241,254;
465
+
466
+ --semi-ai-general-0: linear-gradient(278deg, rgba(var(--semi-ai-general-0-0)) 0%, rgba(var(--semi-ai-general-0-1)) 30%, rgba(var(--semi-ai-general-0-2)) 60%, rgba(var(--semi-ai-general-0-3)) 100%);
467
+ --semi-ai-general-1: linear-gradient(278deg, rgba(var(--semi-ai-general-1-0)) 0%, rgba(var(--semi-ai-general-1-1)) 30%, rgba(var(--semi-ai-general-1-2)) 60%, rgba(var(--semi-ai-general-1-3)) 100%);
468
+ --semi-ai-general-2: linear-gradient(278deg, rgba(var(--semi-ai-general-2-0)) 0%, rgba(var(--semi-ai-general-2-1)) 30%, rgba(var(--semi-ai-general-2-2)) 60%, rgba(var(--semi-ai-general-2-3)) 100%);
469
+ --semi-ai-general-3: linear-gradient(278deg, rgba(var(--semi-ai-general-3-0)) 0%, rgba(var(--semi-ai-general-3-1)) 30%, rgba(var(--semi-ai-general-3-2)) 60%, rgba(var(--semi-ai-general-3-3)) 100%);
470
+ --semi-ai-general-4: linear-gradient(278deg, rgba(var(--semi-ai-general-4-0)) 0%, rgba(var(--semi-ai-general-4-1)) 30%, rgba(var(--semi-ai-general-4-2)) 60%, rgba(var(--semi-ai-general-4-3)) 100%);
471
+ --semi-ai-general-5: linear-gradient(278deg, rgba(var(--semi-ai-general-5-0)) 0%, rgba(var(--semi-ai-general-5-1)) 30%, rgba(var(--semi-ai-general-5-2)) 60%, rgba(var(--semi-ai-general-5-3)) 100%);
472
+ --semi-ai-general-6: linear-gradient(278deg, rgba(var(--semi-ai-general-6-0)) 0%, rgba(var(--semi-ai-general-6-1)) 30%, rgba(var(--semi-ai-general-6-2)) 60%, rgba(var(--semi-ai-general-6-3)) 100%);
473
+ --semi-ai-general-7: linear-gradient(278deg, rgba(var(--semi-ai-general-7-0)) 0%, rgba(var(--semi-ai-general-7-1)) 30%, rgba(var(--semi-ai-general-7-2)) 60%, rgba(var(--semi-ai-general-7-3)) 100%);
474
+ --semi-ai-general-8: linear-gradient(278deg, rgba(var(--semi-ai-general-8-0)) 0%, rgba(var(--semi-ai-general-8-1)) 30%, rgba(var(--semi-ai-general-8-2)) 60%, rgba(var(--semi-ai-general-8-3)) 100%);
475
+ --semi-ai-general-9: linear-gradient(278deg, rgba(var(--semi-ai-general-9-0)) 0%, rgba(var(--semi-ai-general-9-1)) 30%, rgba(var(--semi-ai-general-9-2)) 60%, rgba(var(--semi-ai-general-9-3)) 100%);
476
+
329
477
  }
package/scss/global.scss CHANGED
@@ -122,6 +122,25 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
122
122
  --semi-color-data-17: rgba(182, 215, 129, 1); //vchart 数据色板颜色 - 17
123
123
  --semi-color-data-18: rgba(212, 88, 212, 1); //vchart 数据色板颜色 - 18
124
124
  --semi-color-data-19: rgba(188, 198, 255, 1); //vchart 数据色板颜色 - 19
125
+
126
+ // ai-related
127
+ --semi-color-ai-general: var(--semi-ai-general-5); // AI 场景颜色
128
+ --semi-color-ai-general-hover: var(--semi-ai-general-6); // AI 场景颜色 - 悬浮态
129
+ --semi-color-ai-general-active: var(--semi-ai-general-7); // AI 场景颜色 - 激活态
130
+ --semi-color-ai-general-disabled: var(--semi-ai-general-2); // AI 场景颜色 - 禁用态
131
+
132
+ --semi-color-ai-purple: rgba(var(--semi-ai-purple-5)); // AI 次要场景颜色
133
+ --semi-color-ai-purple-hover: rgba(var(--semi-ai-purple-6)); // AI 次要场景颜色 - 悬浮态
134
+ --semi-color-ai-purple-active: rgba(var(--semi-ai-purple-7)); // AI 次要场景颜色 - 激活态
135
+ --semi-color-ai-purple-disabled: rgba(var(--semi-ai-purple-2)); // AI 次要场景颜色 - 禁用态
136
+
137
+ --semi-color-ai-background-bottom: linear-gradient(201.15deg, rgba(255, 255, 255, 0.04) 6.58%, rgba(255, 226, 138, 0.04) 32.88%, rgba(231, 45, 255, 0.04) 67.93%, rgba(0, 115, 255, 0.04) 94.23%); // AI 场景背景色底部
138
+ --semi-color-ai-background-bottom-hover: linear-gradient(201.15deg, rgba(255, 255, 255, 0.08) 6.58%, rgba(255, 226, 138, 0.08) 32.88%, rgba(231, 45, 255, 0.08) 67.93%, rgba(0, 115, 255, 0.08) 94.23%); // AI 场景背景色底部 - 悬浮态
139
+ --semi-color-ai-background-bottom-active: linear-gradient(201.15deg, rgba(255, 255, 255, 0.12) 6.58%, rgba(255, 226, 138, 0.12) 32.88%, rgba(231, 45, 255, 0.12) 67.93%, rgba(0, 115, 255, 0.12) 94.23%); // AI 场景背景色底部 - 激活态
140
+
141
+ --semi-color-ai-background-top: linear-gradient(201.15deg, rgba(83, 56, 255, 0.16) 6.58%, rgba(176, 48, 240, 0.096) 32.88%, rgba(231, 45, 255, 0.048) 59.17%, rgba(255, 255, 255, 0) 94.23%); // AI 场景背景色顶部
142
+ --semi-color-ai-background-top-hover: linear-gradient(201.15deg, rgba(83, 56, 255, 0.24) 6.58%, rgba(176, 48, 240, 0.144) 32.88%, rgba(231, 45, 255, 0.072) 59.17%, rgba(255, 255, 255, 0) 94.23%); // AI 场景背景色顶部 - 悬浮态
143
+ --semi-color-ai-background-top-hover: linear-gradient(201.15deg, rgba(83, 56, 255, 0.32) 6.58%, rgba(176, 48, 240, 0.192) 32.88%, rgba(231, 45, 255, 0.096) 59.17%, rgba(255, 255, 255, 0) 94.23%);// AI 场景背景色顶部 - 激活态
125
144
  }
126
145
 
127
146
  body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :host .semi-always-dark {
@@ -232,4 +251,24 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
232
251
  --semi-color-data-17: rgba(98, 138, 6, 1); //vchart 数据色板颜色 - 17
233
252
  --semi-color-data-18: rgba(162, 48, 179, 1); //vchart 数据色板颜色 - 18
234
253
  --semi-color-data-19: rgba(40, 51, 138, 1); //vchart 数据色板颜色 - 19
254
+
255
+ // ai-related
256
+ --semi-color-ai-general: var(--semi-ai-general-5); // AI 场景颜色
257
+ --semi-color-ai-general-hover: var(--semi-ai-general-6); // AI 场景颜色 - 悬浮态
258
+ --semi-color-ai-general-active: var(--semi-ai-general-7); // AI 场景颜色 - 激活态
259
+ --semi-color-ai-general-disabled: var(--semi-ai-general-2); // AI 场景颜色 - 禁用态
260
+
261
+ --semi-color-ai-purple: rgba(var(--semi-ai-purple-5)); // AI 次要场景颜色
262
+ --semi-color-ai-purple-hover: rgba(var(--semi-ai-purple-6)); // AI 次要场景颜色 - 悬浮态
263
+ --semi-color-ai-purple-active: rgba(var(--semi-ai-purple-7)); // AI 次要场景颜色 - 激活态
264
+ --semi-color-ai-purple-disabled: rgba(var(--semi-ai-purple-2)); // AI 次要场景颜色 - 禁用态
265
+
266
+ --semi-color-ai-background-bottom: linear-gradient(201.15deg, rgba(255, 226, 138, 0.2) 6.58%, rgba(231, 45, 255, 0.2) 50.4%, rgba(0, 115, 255, 0.2) 94.23%); // AI 场景背景色底部
267
+ --semi-color-ai-background-bottom-hover: linear-gradient(201.15deg, rgba(255, 226, 138, 0.3) 6.58%, rgba(231, 45, 255, 0.3) 50.4%, rgba(0, 115, 255, 0.3) 94.23%); // AI 场景背景色底部 - 悬浮态
268
+ --semi-color-ai-background-bottom-active: linear-gradient(201.15deg, rgba(255, 226, 138, 0.4) 6.58%, rgba(231, 45, 255, 0.4) 50.4%, rgba(0, 115, 255, 0.4) 94.23%); // AI 场景背景色底部 - 激活态
269
+
270
+ --semi-color-ai-background-top: linear-gradient(201.15deg, rgba(83, 56, 255, 0.36) 6.58%, rgba(176, 48, 240, 0.216) 32.88%, rgba(154, 0, 174, 0.108) 59.17%, rgba(0, 0, 0, 0) 94.23%); // AI 场景背景色顶部
271
+ --semi-color-ai-background-top-hover: linear-gradient(201.15deg, rgba(83, 56, 255, 0.54) 6.58%, rgba(176, 48, 240, 0.324) 32.88%, rgba(154, 0, 174, 0.162) 59.17%, rgba(0, 0, 0, 0) 94.23%); // AI 场景背景色顶部 - 悬浮态
272
+ --semi-color-ai-background-top-hover: linear-gradient(201.15deg, rgba(83, 56, 255, 0.72) 6.58%, rgba(176, 48, 240, 0.432) 32.88%, rgba(154, 0, 174, 0.216) 59.17%, rgba(0, 0, 0, 0) 94.23%); // AI 场景背景色顶部 - 激活态
273
+
235
274
  }