@semi-bot/semi-theme-fnos 1.0.61 → 1.1.1

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 (10) hide show
  1. package/README.md +2 -2
  2. package/package.json +1 -1
  3. package/raw.json +174 -170
  4. package/scss/_palette.scss +57 -57
  5. package/scss/animation.scss +1 -1
  6. package/scss/global.scss +114 -107
  7. package/scss/local.scss +10 -10
  8. package/scss/mixin.scss +1 -1
  9. package/semi.css +255 -218
  10. package/semi.min.css +1 -1
package/semi.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* sizing */
2
2
  /* spacing */
3
- body, body[theme-mode=dark] .semi-always-light {
3
+ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light {
4
4
  --semi-black: 0,0,0;
5
5
  --semi-red-0: 255,235,235;
6
6
  --semi-red-1: 255,224,224;
@@ -11,7 +11,7 @@ body, body[theme-mode=dark] .semi-always-light {
11
11
  --semi-red-6: 204,0,0;
12
12
  --semi-red-7: 182,0,0;
13
13
  --semi-red-8: 155,0,0;
14
- --semi-red-9: 102,0,0;
14
+ --semi-red-9: 51,0,0;
15
15
  --semi-white: 255,255,255;
16
16
  --semi-blue-0: 230,244,255;
17
17
  --semi-blue-1: 215,237,255;
@@ -73,16 +73,16 @@ body, body[theme-mode=dark] .semi-always-light {
73
73
  --semi-teal-7: 0,116,119;
74
74
  --semi-teal-8: 0,86,90;
75
75
  --semi-teal-9: 0,56,60;
76
- --semi-amber-0: 255,246,235;
77
- --semi-amber-1: 255,240,219;
78
- --semi-amber-2: 255,228,193;
79
- --semi-amber-3: 255,197,143;
80
- --semi-amber-4: 253,161,97;
81
- --semi-amber-5: 189,91,0;
82
- --semi-amber-6: 170,73,0;
83
- --semi-amber-7: 148,58,0;
84
- --semi-amber-8: 124,45,0;
85
- --semi-amber-9: 102,36,0;
76
+ --semi-amber-0: 252,244,232;
77
+ --semi-amber-1: 249,230,199;
78
+ --semi-amber-2: 243,202,146;
79
+ --semi-amber-3: 236,172,95;
80
+ --semi-amber-4: 230,141,46;
81
+ --semi-amber-5: 224,108,0;
82
+ --semi-amber-6: 188,81,0;
83
+ --semi-amber-7: 153,58,0;
84
+ --semi-amber-8: 117,39,0;
85
+ --semi-amber-9: 81,23,0;
86
86
  --semi-black-0: 227,227,230;
87
87
  --semi-black-1: 191,192,205;
88
88
  --semi-black-2: 134,135,154;
@@ -109,10 +109,10 @@ body, body[theme-mode=dark] .semi-always-light {
109
109
  --semi-green-3: 73,183,137;
110
110
  --semi-green-4: 32,159,108;
111
111
  --semi-green-5: 0,135,83;
112
- --semi-green-6: 0,113,71;
113
- --semi-green-7: 0,90,58;
114
- --semi-green-8: 0,68,45;
115
- --semi-green-9: 0,45,31;
112
+ --semi-green-6: 0,95,62;
113
+ --semi-green-7: 0,66,44;
114
+ --semi-green-8: 0,48,32;
115
+ --semi-green-9: 0,38,26;
116
116
  --semi-white-0: 255,255,255;
117
117
  --semi-white-1: 255,255,255;
118
118
  --semi-white-2: 255,255,255;
@@ -180,7 +180,7 @@ body, body[theme-mode=dark] .semi-always-light {
180
180
  --semi-neutral-4: 146,151,158;
181
181
  --semi-neutral-5: 120,126,135;
182
182
  --semi-neutral-6: 84,88,95;
183
- --semi-neutral-7: 62,66,70;
183
+ --semi-neutral-7: 48,50,54;
184
184
  --semi-neutral-8: 34,35,38;
185
185
  --semi-neutral-9: 24,25,27;
186
186
  --semi-light-blue-0: 233,247,254;
@@ -205,23 +205,23 @@ body, body[theme-mode=dark] .semi-always-light {
205
205
  --semi-light-green-9: 24,69,0;
206
206
  }
207
207
 
208
- body[theme-mode=dark], body .semi-always-dark {
208
+ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
209
209
  --semi-black: 0, 0, 0;
210
- --semi-red-0: 90,0,26;
211
- --semi-red-1: 126,0,31;
212
- --semi-red-2: 162,3,38;
213
- --semi-red-3: 197,10,44;
210
+ --semi-red-0: 51,0,0;
211
+ --semi-red-1: 155,0,0;
212
+ --semi-red-2: 182,0,0;
213
+ --semi-red-3: 204,0,0;
214
214
  --semi-red-4: 230,0,35;
215
- --semi-red-5: 237,63,83;
216
- --semi-red-6: 242,109,120;
217
- --semi-red-7: 246,156,160;
218
- --semi-red-8: 251,205,205;
219
- --semi-red-9: 253,235,235;
215
+ --semi-red-5: 235,66,66;
216
+ --semi-red-6: 244,113,113;
217
+ --semi-red-7: 252,187,187;
218
+ --semi-red-8: 255,224,224;
219
+ --semi-red-9: 255,235,235;
220
220
  --semi-white: 255, 255, 255;
221
221
  --semi-blue-0: 0,37,112;
222
222
  --semi-blue-1: 0,52,148;
223
223
  --semi-blue-2: 3,69,184;
224
- --semi-blue-3: 11,91,219;
224
+ --semi-blue-3: 0,94,235;
225
225
  --semi-blue-4: 0,102,255;
226
226
  --semi-blue-5: 67,145,255;
227
227
  --semi-blue-6: 114,175,255;
@@ -278,16 +278,16 @@ body[theme-mode=dark], body .semi-always-dark {
278
278
  --semi-teal-7: 135,225,220;
279
279
  --semi-teal-8: 192,240,236;
280
280
  --semi-teal-9: 228,247,246;
281
- --semi-amber-0: 110,31,0;
282
- --semi-amber-1: 131,43,0;
283
- --semi-amber-2: 151,59,3;
284
- --semi-amber-3: 172,79,8;
285
- --semi-amber-4: 189,91,0;
286
- --semi-amber-5: 205,131,54;
287
- --semi-amber-6: 217,163,97;
288
- --semi-amber-7: 230,194,145;
289
- --semi-amber-8: 242,225,198;
290
- --semi-amber-9: 249,242,231;
281
+ --semi-amber-0: 84,24,0;
282
+ --semi-amber-1: 120,40,0;
283
+ --semi-amber-2: 156,61,3;
284
+ --semi-amber-3: 191,88,9;
285
+ --semi-amber-4: 224,108,0;
286
+ --semi-amber-5: 233,150,61;
287
+ --semi-amber-6: 238,179,107;
288
+ --semi-amber-7: 244,206,154;
289
+ --semi-amber-8: 249,232,203;
290
+ --semi-amber-9: 252,246,234;
291
291
  --semi-black-0: 0,0,0;
292
292
  --semi-black-1: 0,0,0;
293
293
  --semi-black-2: 0,0,0;
@@ -301,23 +301,23 @@ body[theme-mode=dark], body .semi-always-dark {
301
301
  --semi-brand-0: 0,31,77;
302
302
  --semi-brand-1: 0,61,153;
303
303
  --semi-brand-2: 0,67,184;
304
- --semi-brand-3: 0,92,229;
304
+ --semi-brand-3: 0,94,235;
305
305
  --semi-brand-4: 0,102,255;
306
306
  --semi-brand-5: 51,136,255;
307
307
  --semi-brand-6: 102,163,255;
308
308
  --semi-brand-7: 153,194,255;
309
309
  --semi-brand-8: 204,224,255;
310
310
  --semi-brand-9: 229,240,255;
311
- --semi-green-0: 2,46,32;
312
- --semi-green-1: 3,69,47;
313
- --semi-green-2: 5,92,62;
314
- --semi-green-3: 8,115,76;
311
+ --semi-green-0: 0,38,26;
312
+ --semi-green-1: 0,48,32;
313
+ --semi-green-2: 0,66,44;
314
+ --semi-green-3: 0,95,62;
315
315
  --semi-green-4: 0,135,83;
316
- --semi-green-5: 43,161,114;
317
- --semi-green-6: 83,185,142;
318
- --semi-green-7: 132,208,175;
319
- --semi-green-8: 189,232,212;
320
- --semi-green-9: 226,243,235;
316
+ --semi-green-5: 32,159,108;
317
+ --semi-green-6: 73,183,137;
318
+ --semi-green-7: 124,207,171;
319
+ --semi-green-8: 185,231,210;
320
+ --semi-green-9: 224,243,234;
321
321
  --semi-indigo-0: 23,27,101;
322
322
  --semi-indigo-1: 32,37,122;
323
323
  --semi-indigo-2: 41,49,142;
@@ -368,16 +368,16 @@ body[theme-mode=dark], body .semi-always-dark {
368
368
  --semi-yellow-7: 255,250,180;
369
369
  --semi-yellow-8: 255,254,217;
370
370
  --semi-yellow-9: 255,255,241;
371
- --semi-neutral-0: 44,48,56;
372
- --semi-neutral-1: 62,67,77;
373
- --semi-neutral-2: 81,87,97;
374
- --semi-neutral-3: 101,108,118;
371
+ --semi-neutral-0: 24,25,27;
372
+ --semi-neutral-1: 34,35,38;
373
+ --semi-neutral-2: 48,50,54;
374
+ --semi-neutral-3: 84,88,95;
375
375
  --semi-neutral-4: 120,126,135;
376
- --semi-neutral-5: 147,153,161;
377
- --semi-neutral-6: 173,178,185;
378
- --semi-neutral-7: 199,203,208;
379
- --semi-neutral-8: 227,229,232;
380
- --semi-neutral-9: 243,243,243;
376
+ --semi-neutral-5: 146,151,158;
377
+ --semi-neutral-6: 174,178,183;
378
+ --semi-neutral-7: 201,203,207;
379
+ --semi-neutral-8: 227,228,230;
380
+ --semi-neutral-9: 242,243,244;
381
381
  --semi-light-blue-0: 0,51,97;
382
382
  --semi-light-blue-1: 0,73,133;
383
383
  --semi-light-blue-2: 0,95,169;
@@ -400,40 +400,39 @@ body[theme-mode=dark], body .semi-always-dark {
400
400
  --semi-light-green-9: 242,251,233;
401
401
  }
402
402
 
403
- body, body[theme-mode=dark] .semi-always-light {
403
+ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light {
404
404
  --semi-color-app: rgba(var(--semi-neutral-0),1);
405
- --semi-color-bg-0: rgba(var(--semi-grey-0),1);
405
+ --semi-color-bg-0: rgba(var(--semi-neutral-0),1);
406
406
  --semi-color-bg-1: rgba(255,255,255,1);
407
407
  --semi-color-bg-2: rgba(255,255,255,1);
408
408
  --semi-color-bg-3: rgba(255,255,255,1);
409
409
  --semi-color-bg-4: rgba(255,255,255,1);
410
410
  --semi-color-info: rgba(var(--semi-brand-5),1);
411
411
  --semi-color-link: rgba(var(--semi-brand-5),1);
412
- --semi-color-bg-anti: rgba(var(--semi-grey-9),1);
412
+ --semi-color-bg-anti: rgba(var(--semi-neutral-9), 1);
413
413
  --semi-color-nav-bg: rgba(var(--semi-grey-0), 1);
414
414
  --semi-color-black: rgba(0,0,0,1);
415
- --semi-color-data-0: rgba(var(--semi-brand-5),1);
416
- --semi-color-data-1: rgba(142, 212, 231, 1);
417
- --semi-color-data-2: rgba(245, 135, 0, 1);
418
- --semi-color-data-3: rgba(220, 183, 252, 1);
419
- --semi-color-data-4: rgba(74, 156, 247, 1);
420
- --semi-color-data-5: rgba(243, 204, 53, 1);
421
- --semi-color-data-6: rgba(254, 128, 144, 1);
422
- --semi-color-data-7: rgba(139, 215, 210, 1);
423
- --semi-color-data-8: rgba(131, 176, 35, 1);
424
- --semi-color-data-9: rgba(233, 165, 229, 1);
425
- --semi-color-fill-0: rgba(var(--semi-grey-5),0.05);
426
- --semi-color-fill-1: rgba(var(--semi-grey-5),0.08);
415
+ --semi-color-data-0: rgba(0,102,255,1);
416
+ --semi-color-data-1: rgba(142,212,231,1);
417
+ --semi-color-data-2: rgba(245,135,0,1);
418
+ --semi-color-data-3: rgba(220,183,252,1);
419
+ --semi-color-data-4: rgba(74,156,251,1);
420
+ --semi-color-data-5: rgba(243,204,53,1);
421
+ --semi-color-data-6: rgba(254,128,144,1);
422
+ --semi-color-data-7: rgba(0,179,178,1);
423
+ --semi-color-data-8: rgba(0,135,83,1);
424
+ --semi-color-data-9: rgba(230,155,255,1);
425
+ --semi-color-fill-0: rgba(var(--semi-grey-5),0.08);
426
+ --semi-color-fill-1: rgba(var(--semi-grey-5),0.12);
427
427
  --semi-color-fill-2: rgba(var(--semi-grey-5),0.16);
428
428
  --semi-color-fill-3: rgba(var(--semi-grey-5),0.32);
429
- --semi-color-text-0: rgba(var(--semi-grey-9),1);
430
- --semi-color-text-1: rgba(var(--semi-grey-9),0.75);
431
- --semi-color-text-2: rgba(var(--semi-grey-9),0.5);
432
- --semi-color-text-3: rgba(var(--semi-grey-9),0.25);
429
+ --semi-color-text-0: rgba(var(--semi-neutral-9),1);
430
+ --semi-color-text-1: rgba(var(--semi-neutral-9),0.75);
431
+ --semi-color-text-2: rgba(var(--semi-neutral-9),0.5);
432
+ --semi-color-text-3: rgba(var(--semi-neutral-9),0.25);
433
433
  --semi-color-white: rgba(255,255,255,1);
434
- --semi-color-app-name: rgba(var(--semi-blue-5),1);
435
434
  --semi-color-bg-avatar: rgba(var(--semi-grey-5),0.16);
436
- --semi-color-data-10: rgba(48, 167, 206, 1);
435
+ --semi-color-data-10: rgba(48,167,206,1);
437
436
  --semi-color-data-11: rgba(249, 192, 100, 1);
438
437
  --semi-color-data-12: rgba(177, 113, 249, 1);
439
438
  --semi-color-data-13: rgba(119, 182, 249, 1);
@@ -444,10 +443,10 @@ body, body[theme-mode=dark] .semi-always-light {
444
443
  --semi-color-data-18: rgba(212,88,212,1);
445
444
  --semi-color-data-19: rgba(188, 198, 255, 1);
446
445
  --semi-color-data-20: rgba(121,137,255, 1);
447
- --semi-color-border: rgba(var(--semi-grey-8),0.16);
446
+ --semi-color-border: rgba(var(--semi-grey-6),0.16);
448
447
  --semi-color-danger: rgba(var(--semi-red-5),1);
449
448
  --semi-color-shadow: rgba(var(--semi-grey-9), 0.05);
450
- --semi-color-text-nav: rgba(var(--semi-grey-9),0.75);
449
+ --semi-color-text-nav: rgba(var(--semi-neutral-9), 0.75);
451
450
  --semi-color-app-header: rgba(var(--semi-neutral-0),0);
452
451
  --semi-color-bg-dropdown: rgba(255,255,255,1);
453
452
  --semi-color-black-10: rgba(0,0,0,0.1);
@@ -473,43 +472,43 @@ body, body[theme-mode=dark] .semi-always-light {
473
472
  --semi-color-info-hover: rgba(var(--semi-brand-6), 1);
474
473
  --semi-color-link-hover: rgba(var(--semi-brand-6), 1);
475
474
  --semi-color-primary: rgba(var(--semi-brand-5),1);
476
- --semi-color-success: rgba(var(--semi-green-5),1);
475
+ --semi-color-success: rgba(var(--semi-green-4),1);
477
476
  --semi-color-tab-HoverBg: rgba(var(--semi-grey-5),0.16);
478
477
  --semi-color-warning: rgba(var(--semi-amber-5), 1);
479
478
  --semi-color-app-siderbar: rgba(var(--semi-neutral-0),0);
480
- --semi-color-card-border: rgba(var(--semi-grey-8),0.16);
479
+ --semi-color-card-border: rgba(var(--semi-grey-6),0.16);
481
480
  --semi-color-info-active: rgba(var(--semi-brand-7), 1);
482
481
  --semi-color-link-active: rgba(var(--semi-brand-7),1);
483
482
  --semi-color-app-container: rgba(255,255,255,1);
484
483
  --semi-color-bg-transparent: rgba(255,255,255,0);
485
- --semi-color-card-HoverBg: rgba(var(--semi-grey-5),0.08);
484
+ --semi-color-card-HoverBg: rgba(var(--semi-grey-5),0.12);
486
485
  --semi-color-divider-0: rgba(var(--semi-grey-8),0.22);
487
486
  --semi-color-divider-1: rgba(var(--semi-grey-8),0.16);
488
487
  --semi-color-divider-2: rgba(var(--semi-grey-8),0.08);
489
- --semi-color-link-visited: rgba(var(--semi-brand-3),1);
488
+ --semi-color-link-visited: rgba(var(--semi-brand-7),1);
490
489
  --semi-color-photo-toast: rgba(0,0,0,0.9);
491
490
  --semi-color-tab-DefaultBg: rgba(var(--semi-grey-5),0.05);
492
- --semi-color-tertiary: rgba(var(--semi-grey-5),1);
493
- --semi-color-card-ActiveBg: rgba(var(--semi-grey-5),0.12);
491
+ --semi-color-tertiary: rgba(var(--semi-neutral-6), 1);
492
+ --semi-color-card-ActiveBg: rgba(var(--semi-brand-5),0.12);
494
493
  --semi-color-focus-border: rgba(var(--semi-brand-5),1);
495
494
  --semi-color-info-disabled: rgba(var(--semi-grey-5),0.16);
496
495
  --semi-color-overlay-bg: rgba(0,0,0,0.7);
497
496
  --semi-color-tab-DisabledBg: rgba(var(--semi-grey-5),0.16);
498
497
  --semi-color-tab-SelectedBg: rgba(var(--semi-grey-9),1);
499
498
  --semi-color-Scrollbar: rgba(var(--semi-grey-5),0.16);
500
- --semi-color-border-hover: rgba(var(--semi-grey-8),0.22);
501
- --semi-color-border-modal: rgba(var(--semi-grey-8),0.08);
502
- --semi-color-card-DefaultBg: rgba(var(--semi-grey-5),0.05);
499
+ --semi-color-border-hover: rgba(var(--semi-grey-6),0.22);
500
+ --semi-color-border-modal: rgba(var(--semi-grey-6),0.08);
501
+ --semi-color-card-DefaultBg: rgba(var(--semi-grey-5),0.08);
503
502
  --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
504
503
  --semi-color-highlight: rgba(var(--semi-grey-9), 1);
505
504
  --semi-color-input-HoverBg: rgba(255,255,255,1);
506
505
  --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
507
506
  --semi-color-table-FocusBg: rgba(var(--semi-brand-5),0.2);
508
- --semi-color-table-HoverBg: rgba(var(--semi-neutral-5),0.08);
509
- --semi-color-border-active: rgba(var(--semi-brand-5),1);
510
- --semi-color-border-select: rgba(var(--semi-grey-8),0);
507
+ --semi-color-table-HoverBg: rgba(var(--semi-grey-5),0.08);
508
+ --semi-color-border-active: rgba(var(--semi-grey-6),0.32);
509
+ --semi-color-border-select: rgba(var(--semi-grey-6),0);
511
510
  --semi-color-danger-active: rgba(var(--semi-red-7), 1);
512
- --semi-color-disabled-bg: rgba(var(--semi-grey-5), 0.08);
511
+ --semi-color-disabled-bg: rgba(var(--semi-grey-5),0.16);
513
512
  --semi-color-input-ActiveBg: rgba(255,255,255,1);
514
513
  --semi-color-table-ActiveBg: rgba(var(--semi-brand-5),0.12);
515
514
  --semi-color-card-borderHover: rgba(var(--semi-grey-8),0.22);
@@ -517,32 +516,33 @@ body, body[theme-mode=dark] .semi-always-light {
517
516
  --semi-color-input-DefaultBg: rgba(255,255,255,1);
518
517
  --semi-color-photo-toastText: rgba(255,255,255,1);
519
518
  --semi-color-primary-hover: rgba(var(--semi-brand-6), 1);
520
- --semi-color-success-hover: rgba(var(--semi-green-6), 1);
519
+ --semi-color-success-hover: rgba(var(--semi-green-5),1);
521
520
  --semi-color-warning-hover: rgba(var(--semi-amber-6), 1);
522
521
  --semi-color-Component-bg: rgba(255,255,255,0.5);
523
522
  --semi-color-card-borderActive: rgba(var(--semi-brand-5),1);
524
523
  --semi-color-default-active: rgba(var(--semi-grey-2), 1);
525
- --semi-color-disabled-fill: rgba(var(--semi-grey-5), 0.08);
526
- --semi-color-disabled-text: rgba(var(--semi-grey-5), 0.4);
524
+ --semi-color-disabled-fill: rgba(var(--semi-grey-5), 0.16);
525
+ --semi-color-disabled-text: rgba(var(--semi-grey-9), 0.25);
527
526
  --semi-color-highlight-bg: rgba(var(--semi-yellow-5),1);
528
527
  --semi-color-input-DisabledBg: rgba(var(--semi-grey-5),0.16);
529
528
  --semi-color-primary-active: rgba(var(--semi-brand-7), 1);
530
- --semi-color-success-active: rgba(var(--semi-green-7), 1);
529
+ --semi-color-success-active: rgba(var(--semi-green-6),1);
531
530
  --semi-color-warning-active: rgba(var(--semi-amber-7), 1);
532
- --semi-color-tertiary-hover: rgba(var(--semi-grey-6),0.8);
531
+ --semi-color-tertiary-hover: rgba(var(--semi-neutral-7), 1);
533
532
  --semi-color-Component-card: rgba(255,255,255,0.9);
534
- --semi-color-disabled-border: rgba(var(--semi-grey-5), 0.2);
535
- --semi-color-primary-disabled: rgba(var(--semi-neutral-5),0.08);
533
+ --semi-color-disabled-border: rgba(var(--semi-grey-8), 0.16);
534
+ --semi-color-primary-disabled: rgba(var(--semi-grey-5),0.16);
536
535
  --semi-color-success-disabled: rgba(var(--semi-grey-5),0.16);
537
- --semi-color-tertiary-active: rgba(var(--semi-grey-7),1);
536
+ --semi-color-tertiary-active: rgba(var(--semi-neutral-8), 1);
538
537
  --semi-color-Scrollbar-hover: rgba(var(--semi-grey-5),0.32);
539
538
  --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
540
539
  --semi-color-overlay-CustomAnti: rgba(255,255,255,0.7);
541
540
  --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
542
541
  --semi-color-info-light-hover: rgba(var(--semi-brand-1),1);
542
+ --semi-color-progress-defaultBg: rgba(var(--semi-grey-5),0.16);
543
543
  --semi-color-fndesktop-navbarBg: rgba(134,164,179,0.05);
544
544
  --semi-color-info-light-active: rgba(var(--semi-brand-2),1);
545
- --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2),1);
545
+ --semi-color-secondary-disabled: rgba(var(--semi-grey-5),0.16);
546
546
  --semi-color-info-light-default: rgba(var(--semi-brand-0),1);
547
547
  --semi-color-overlay-CustomPreview: rgba(0,0,0,0.9);
548
548
  --semi-color-danger-light-hover: rgba(var(--semi-red-1), 1);
@@ -557,12 +557,12 @@ body, body[theme-mode=dark] .semi-always-light {
557
557
  --semi-color-warning-light-active: rgba(var(--semi-amber-2), 1);
558
558
  --semi-color-primary-light-default: rgba(var(--semi-brand-0),1);
559
559
  --semi-color-success-light-default: rgba(var(--semi-green-0), 1);
560
- --semi-color-tertiary-light-hover: rgba(var(--semi-grey-3),1);
560
+ --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5),0.16);
561
561
  --semi-color-warning-light-default: rgba(var(--semi-amber-0), 1);
562
- --semi-color-tertiary-light-active: rgba(var(--semi-grey-4),1);
562
+ --semi-color-tertiary-light-active: rgba(var(--semi-grey-5),0.32);
563
563
  --semi-color-CheckboxPhoto-DefaultBg: rgba(255,255,255,0.2);
564
564
  --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1), 1);
565
- --semi-color-tertiary-light-default: rgba(var(--semi-grey-2),1);
565
+ --semi-color-tertiary-light-default: rgba(var(--semi-grey-5),0.12);
566
566
  --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2), 1);
567
567
  --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0), 1);
568
568
  --semi-color-CheckboxPhoto-DefaultBorder: rgba(255,255,255,1);
@@ -570,7 +570,7 @@ body, body[theme-mode=dark] .semi-always-light {
570
570
  --semi-color-CheckboxPhoto-DefaultBorderHover: rgba(255,255,255,0);
571
571
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
572
572
  -webkit-font-smoothing: antialiased;
573
- --semi-shadow-elevated: 0px 12px 42px -4px rgba(0,0,0,0.08),0px 8px 16px -6px rgba(0,0,0,0.08);
573
+ --semi-shadow-elevated: 0px 10px 20px 0px rgba(0,0,0,0.08),0px 10px 40px 0px rgba(0,0,0,0.12);
574
574
  --semi-shadow-0: none;
575
575
  --semi-shadow-1: none;
576
576
  --semi-shadow-2: 0px 2px 4px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.16);
@@ -579,48 +579,51 @@ body, body[theme-mode=dark] .semi-always-light {
579
579
  --semi-shadow-text: 0px 0px 4px 0px rgba(0,0,0,0.5),0px 1px 6px 0px rgba(0,0,0,0.2);
580
580
  --semi-shadow-dropdown: 0px 12px 42px -4px rgba(20,23,26,0.12),0px 8px 18px -6px rgba(20,23,26,0.2);
581
581
  --semi-border-radius-full: 9999px;
582
+ --semi-border-radius-name: 8px;
582
583
  --semi-border-radius-large: 12px;
583
584
  --semi-border-radius-small: 3px;
584
585
  --semi-border-radius-circle: 50%;
585
586
  --semi-border-radius-medium: 6px;
587
+ --semi-border-radius-custom-app: 16px;
586
588
  --semi-border-radius-extra-small: 3px;
589
+ --semi-border-radius-custom-content: 12px;
587
590
  --semi-border-radius-custom-button-large: 12px;
588
591
  --semi-border-radius-custom-button-small: 6px;
589
592
  --semi-border-radius-custom-button-default: 8px;
590
593
  }
591
594
 
592
- body[theme-mode=dark], body .semi-always-dark {
595
+ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
593
596
  --semi-color-app: rgba(var(--semi-grey-0),1);
594
- --semi-color-bg-0: rgba(var(--semi-grey-0), 1);
595
- --semi-color-bg-1: rgba(var(--semi-grey-1), 1);
596
- --semi-color-bg-2: rgba(var(--semi-grey-1), 1);
597
- --semi-color-bg-3: rgba(var(--semi-grey-2), 1);
598
- --semi-color-bg-4: rgba(var(--semi-grey-2), 1);
597
+ --semi-color-bg-0: rgba(var(--semi-neutral-0),1);
598
+ --semi-color-bg-1: rgba(var(--semi-neutral-1), 1);
599
+ --semi-color-bg-2: rgba(var(--semi-neutral-1), 1);
600
+ --semi-color-bg-3: rgba(var(--semi-neutral-2), 1);
601
+ --semi-color-bg-4: rgba(var(--semi-neutral-2), 1);
599
602
  --semi-color-info: rgba(var(--semi-brand-4),1);
600
603
  --semi-color-link: rgba(var(--semi-brand-4),1);
601
604
  --semi-color-bg-anti: rgba(255,255,255,1);
602
605
  --semi-color-nav-bg: rgba(var(--semi-grey-2), 1);
603
606
  --semi-color-black: rgba(0,0,0,1);
604
- --semi-color-data-0: rgba(var(--semi-brand-4),1);
605
- --semi-color-data-1: rgba(102,204,255,1);
607
+ --semi-color-data-0: rgba(0,102,255,1);
608
+ --semi-color-data-1: rgba(142,212,231,1);
606
609
  --semi-color-data-2: rgba(245,135,0,1);
607
610
  --semi-color-data-3: rgba(220,183,252,1);
608
- --semi-color-data-4: rgba(74,156,247,1);
611
+ --semi-color-data-4: rgba(74,156,251,1);
609
612
  --semi-color-data-5: rgba(243,204,53,1);
610
613
  --semi-color-data-6: rgba(254,128,144,1);
611
- --semi-color-data-7: rgba(139,215,210,1);
612
- --semi-color-data-8: rgba(140,176,35,1);
614
+ --semi-color-data-7: rgba(0,179,178,1);
615
+ --semi-color-data-8: rgba(0,135,83,1);
613
616
  --semi-color-data-9: rgba(233,165,229,1);
614
- --semi-color-fill-0: rgba(var(--semi-grey-5), 0.05);
617
+ --semi-color-fill-0: rgba(var(--semi-grey-5),0.05);
615
618
  --semi-color-fill-1: rgba(var(--semi-grey-5),0.08);
616
619
  --semi-color-fill-2: rgba(var(--semi-grey-5),0.16);
617
620
  --semi-color-fill-3: rgba(var(--semi-grey-5),0.32);
618
621
  --semi-color-text-0: rgba(255,255,255,1);
619
- --semi-color-text-1: rgba(255,255,255,0.75);
620
- --semi-color-text-2: rgba(255,255,255,0.5);
621
- --semi-color-text-3: rgba(255,255,255,0.25);
622
+ --semi-color-text-1: rgba(var(--semi-neutral-9),0.75);
623
+ --semi-color-text-2: rgba(var(--semi-neutral-9),0.5);
624
+ --semi-color-text-3: rgba(var(--semi-neutral-9),0.25);
622
625
  --semi-color-white: rgba(255,255,255,1);
623
- --semi-color-bg-avatar: rgba(var(--semi-grey-5),0.16);
626
+ --semi-color-bg-avatar: rgba(var(--semi-neutral-5),0.16);
624
627
  --semi-color-data-10: rgba(48,167,206,1);
625
628
  --semi-color-data-11: rgba(249,192,100,1);
626
629
  --semi-color-data-12: rgba(177,113,249,1);
@@ -631,13 +634,13 @@ body[theme-mode=dark], body .semi-always-dark {
631
634
  --semi-color-data-17: rgba(182,215,129,1);
632
635
  --semi-color-data-18: rgba(212,88,212,1);
633
636
  --semi-color-data-19: rgba(188,198,255,1);
634
- --semi-color-data-20: rgba(var(--semi-brand-4), 1);
635
- --semi-color-border: rgba(var(--semi-grey-5), 0.16);
637
+ --semi-color-data-20: rgba(121,137,255,1);
638
+ --semi-color-border: rgba(var(--semi-grey-5),0.16);
636
639
  --semi-color-danger: rgba(var(--semi-red-4),1);
637
640
  --semi-color-shadow: rgba(var(--semi-grey-0), 0.8);
638
- --semi-color-text-nav: rgba(255,255,255,0.75);
641
+ --semi-color-text-nav: rgba(var(--semi-neutral-9),0.75);
639
642
  --semi-color-app-header: rgba(var(--semi-grey-0),0);
640
- --semi-color-bg-dropdown: rgba(var(--semi-grey-2),1);
643
+ --semi-color-bg-dropdown: rgba(var(--semi-neutral-2), 1);
641
644
  --semi-color-black-10: rgba(0,0,0,0.1);
642
645
  --semi-color-black-20: rgba(0,0,0,0.2);
643
646
  --semi-color-black-30: rgba(0,0,0,0.3);
@@ -647,7 +650,7 @@ body[theme-mode=dark], body .semi-always-dark {
647
650
  --semi-color-black-70: rgba(0,0,0,0.7);
648
651
  --semi-color-black-80: rgba(0,0,0,0.8);
649
652
  --semi-color-black-90: rgba(0,0,0,0.9);
650
- --semi-color-text-anti: rgba(var(--semi-grey-0),1);
653
+ --semi-color-text-anti: rgba(var(--semi-neutral-0),1);
651
654
  --semi-color-white-10: rgba(255,255,255,0.1);
652
655
  --semi-color-white-20: rgba(255,255,255,0.2);
653
656
  --semi-color-white-30: rgba(255,255,255,0.3);
@@ -661,23 +664,23 @@ body[theme-mode=dark], body .semi-always-dark {
661
664
  --semi-color-info-hover: rgba(var(--semi-brand-3),1);
662
665
  --semi-color-link-hover: rgba(var(--semi-brand-3),1);
663
666
  --semi-color-primary: rgba(var(--semi-brand-4),1);
664
- --semi-color-success: rgba(var(--semi-green-4),1);
667
+ --semi-color-success: rgba(var(--semi-green-5),1);
665
668
  --semi-color-tab-HoverBg: rgba(var(--semi-grey-2), 1);
666
669
  --semi-color-warning: rgba(var(--semi-amber-4),1);
667
670
  --semi-color-app-siderbar: rgba(var(--semi-grey-0), 0);
668
671
  --semi-color-card-border: rgba(var(--semi-grey-5),0.16);
669
672
  --semi-color-info-active: rgba(var(--semi-brand-2),1);
670
673
  --semi-color-link-active: rgba(var(--semi-brand-2),1);
671
- --semi-color-app-container: rgba(var(--semi-grey-1),1);
672
- --semi-color-bg-transparent: rgba(var(--semi-grey-0),0);
674
+ --semi-color-app-container: rgba(var(--semi-grey-1), 1);
675
+ --semi-color-bg-transparent: rgba(var(--semi-neutral-0), 0);
673
676
  --semi-color-card-HoverBg: rgba(var(--semi-grey-5),0.08);
674
677
  --semi-color-divider-0: rgba(var(--semi-grey-5),0.22);
675
678
  --semi-color-divider-1: rgba(var(--semi-grey-5),0.16);
676
679
  --semi-color-divider-2: rgba(var(--semi-grey-5),0.08);
677
680
  --semi-color-link-visited: rgba(var(--semi-brand-2),1);
678
681
  --semi-color-photo-toast: rgba(0,0,0,0.9);
679
- --semi-color-tab-DefaultBg: rgba(var(--semi-grey-1), 1);
680
- --semi-color-tertiary: rgba(var(--semi-grey-5), 0.16);
682
+ --semi-color-tab-DefaultBg: rgba(var(--semi-grey-1),1);
683
+ --semi-color-tertiary: rgba(var(--semi-grey-5),0.08);
681
684
  --semi-color-card-ActiveBg: rgba(var(--semi-brand-4),0.12);
682
685
  --semi-color-focus-border: rgba(var(--semi-brand-4),1);
683
686
  --semi-color-info-disabled: rgba(var(--semi-grey-5),0.16);
@@ -685,81 +688,82 @@ body[theme-mode=dark], body .semi-always-dark {
685
688
  --semi-color-shadow-anti: rgba(0,0,0,0.7);
686
689
  --semi-color-tab-DisabledBg: rgba(var(--semi-grey-2), 1);
687
690
  --semi-color-tab-SelectedBg: rgba(var(--semi-grey-9), 1);
688
- --semi-color-Scrollbar: rgba(var(--semi-grey-5), 0.08);
689
- --semi-color-border-hover: rgba(var(--semi-grey-5), 0.22);
691
+ --semi-color-Scrollbar: rgba(var(--semi-grey-5),0.16);
692
+ --semi-color-border-hover: rgba(var(--semi-grey-5),0.22);
690
693
  --semi-color-border-modal: rgba(var(--semi-grey-5),0.16);
691
- --semi-color-card-DefaultBg: rgba(var(--semi-grey-5), 0.05);
694
+ --semi-color-card-DefaultBg: rgba(var(--semi-grey-5),0.05);
692
695
  --semi-color-danger-hover: rgba(var(--semi-red-3),1);
693
696
  --semi-color-highlight: rgba(var(--semi-white),1);
694
- --semi-color-input-HoverBg: rgba(var(--semi-grey-5), 0.08);
697
+ --semi-color-input-HoverBg: rgba(var(--semi-neutral-1),1);
695
698
  --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
696
- --semi-color-table-FocusBg: rgba(var(--semi-brand-4),0.12);
699
+ --semi-color-table-FocusBg: rgba(var(--semi-brand-4),0.2);
697
700
  --semi-color-table-HoverBg: rgba(var(--semi-grey-5),0.08);
698
- --semi-color-border-actvie: rgba(var(--semi-grey-5), 0.32);
699
- --semi-color-border-select: rgba(var(--semi-grey-5), 0.22);
701
+ --semi-color-border-active: rgba(var(--semi-grey-5),0.32);
702
+ --semi-color-border-select: rgba(var(--semi-grey-5),0.16);
700
703
  --semi-color-danger-active: rgba(var(--semi-red-2),1);
701
704
  --semi-color-disabled-bg: rgba(var(--semi-grey-5),0.16);
702
- --semi-color-input-ActiveBg: rgba(var(--semi-grey-5),0.05);
703
- --semi-color-table-ActiveBg: rgba(var(--semi-brand-4),0.2);
705
+ --semi-color-input-ActiveBg: rgba(var(--semi-neutral-1),1);
706
+ --semi-color-table-ActiveBg: rgba(var(--semi-brand-4),0.12);
704
707
  --semi-color-card-borderHover: rgba(var(--semi-grey-5),0.22);
705
708
  --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
706
- --semi-color-input-DefaultBg: rgba(var(--semi-grey-5), 0.05);
709
+ --semi-color-input-DefaultBg: rgba(var(--semi-neutral-1),1);
707
710
  --semi-color-photo-toastText: rgba(255,255,255,1);
708
711
  --semi-color-primary-hover: rgba(var(--semi-brand-3),1);
709
- --semi-color-success-hover: rgba(var(--semi-green-3),1);
712
+ --semi-color-success-hover: rgba(var(--semi-green-4),1);
710
713
  --semi-color-warning-hover: rgba(var(--semi-amber-3),1);
711
714
  --semi-color-Component-bg: rgba(0,0,0,0.6);
712
715
  --semi-color-card-borderActive: rgba(var(--semi-brand-4),1);
713
716
  --semi-color-default-active: rgba(var(--semi-grey-2), 1);
714
- --semi-color-disabled-fill: rgba(var(--semi-grey-5),0.16);
715
- --semi-color-disabled-text: rgba(var(--semi-grey-5),0.25);
717
+ --semi-color-disabled-fill: rgba(var(--semi-neutral-5), 0.16);
718
+ --semi-color-disabled-text: rgba(var(--semi-neutral-9),0.25);
716
719
  --semi-color-highlight-bg: rgba(var(--semi-yellow-4),1);
717
- --semi-color-input-DisabledBg: rgba(var(--semi-grey-5),0.08);
720
+ --semi-color-input-DisabledBg: rgba(var(--semi-neutral-5),0.16);
718
721
  --semi-color-primary-active: rgba(var(--semi-brand-2),1);
719
- --semi-color-success-active: rgba(var(--semi-green-2),1);
722
+ --semi-color-success-active: rgba(var(--semi-green-3),1);
720
723
  --semi-color-warning-active: rgba(var(--semi-amber-2),1);
721
- --semi-color-tertiary-hover: rgba(var(--semi-grey-5), 0.32);
724
+ --semi-color-tertiary-hover: rgba(var(--semi-grey-7),0.16);
722
725
  --semi-color-Component-card: rgba(12,13,13,0.6);
723
- --semi-color-disabled-border: rgba(var(--semi-grey-5),0.2);
724
- --semi-color-primary-disabled: rgba(var(--semi-neutral-5),0.08);
726
+ --semi-color-disabled-border: rgba(var(--semi-grey-5),0.16);
727
+ --semi-color-primary-disabled: rgba(var(--semi-grey-5),0.16);
725
728
  --semi-color-success-disabled: rgba(var(--semi-grey-5),0.16);
726
- --semi-color-tertiary-active: rgba(var(--semi-grey-5), 0.34);
727
- --semi-color-Scrollbar-hover: rgba(var(--semi-grey-5), 0.16);
729
+ --semi-color-tertiary-active: rgba(var(--semi-grey-8),0.22);
730
+ --semi-color-Scrollbar-hover: rgba(var(--semi-grey-5),0.32);
728
731
  --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
729
732
  --semi-color-overlay-CustomAnti: rgba(0,0,0,0.6);
730
733
  --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
731
- --semi-color-info-light-hover: rgba(var(--semi-brand-1),0.5);
734
+ --semi-color-info-light-hover: rgba(var(--semi-brand-1),1);
735
+ --semi-color-progress-defaultBg: rgba(var(--semi-grey-5),0.16);
732
736
  --semi-color-fndesktop-navbarBg: rgba(12,13,13,0.6);
733
737
  --semi-color-info-light-active: rgba(var(--semi-brand-2),1);
734
- --semi-color-secondary-disabled: rgba(var(--semi-neutral-5),0.08);
735
- --semi-color-info-light-default: rgba(var(--semi-brand-0),0.8);
738
+ --semi-color-secondary-disabled: rgba(var(--semi-grey-5),0.16);
739
+ --semi-color-info-light-default: rgba(var(--semi-brand-0),1);
736
740
  --semi-color-overlay-CustomPreview: rgba(0,0,0,0.9);
737
741
  --semi-color-danger-light-hover: rgba(var(--semi-red-1),1);
738
742
  --semi-color-danger-light-active: rgba(var(--semi-red-2),1);
739
743
  --semi-color-fndesktop-navbarBorder: rgba(255,255,255,0.05);
740
744
  --semi-color-danger-light-default: rgba(var(--semi-red-0),1);
741
- --semi-color-primary-light-hover: rgba(var(--semi-brand-1),0.55);
745
+ --semi-color-primary-light-hover: rgba(var(--semi-brand-1),1);
742
746
  --semi-color-success-light-hover: rgba(var(--semi-green-1),1);
743
747
  --semi-color-warning-light-hover: rgba(var(--semi-amber-1), 1);
744
748
  --semi-color-primary-light-active: rgba(var(--semi-brand-2),1);
745
749
  --semi-color-success-light-active: rgba(var(--semi-green-2),1);
746
750
  --semi-color-warning-light-active: rgba(var(--semi-amber-2), 1);
747
- --semi-color-primary-light-default: rgba(var(--semi-brand-0),0.3);
751
+ --semi-color-primary-light-default: rgba(var(--semi-brand-0),1);
748
752
  --semi-color-success-light-default: rgba(var(--semi-green-0),1);
749
- --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), 0.3);
753
+ --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5),0.16);
750
754
  --semi-color-warning-light-default: rgba(var(--semi-amber-0), 1);
751
- --semi-color-tertiary-light-active: rgba(var(--semi-grey-5), 0.4);
755
+ --semi-color-tertiary-light-active: rgba(var(--semi-grey-5),0.32);
752
756
  --semi-color-CheckboxPhoto-DefaultBg: rgba(255,255,255,0.2);
753
- --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-5), 0.3);
754
- --semi-color-tertiary-light-default: rgba(var(--semi-grey-5), 0.2);
755
- --semi-color-secondary-light-active: rgba(var(--semi-light-blue-5),0.4);
756
- --semi-color-secondary-light-default: rgba(var(--semi-light-blue-5), 0.2);
757
+ --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1),1);
758
+ --semi-color-tertiary-light-default: rgba(var(--semi-grey-5),0.08);
759
+ --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2),1);
760
+ --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0),1);
757
761
  --semi-color-CheckboxPhoto-DefaultBorder: rgba(255,255,255,0.7);
758
762
  --semi-color-CheckboxPhoto-DefaultBgHover: rgba(255,255,255,0.7);
759
763
  --semi-color-CheckboxPhoto-DefaultBorderHover: rgba(255,255,255,0);
760
764
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
761
765
  -webkit-font-smoothing: antialiased;
762
- --semi-shadow-elevated: 0px 12px 42px -4px rgba(0,0,0,0.08),0px 8px 16px -6px rgba(0,0,0,0.08);
766
+ --semi-shadow-elevated: 0px 10px 20px 0px rgba(0,0,0,0.08),0px 10px 40px 0px rgba(0,0,0,0.12);
763
767
  --semi-shadow-0: none;
764
768
  --semi-shadow-1: none;
765
769
  --semi-shadow-2: 0px 2px 4px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.16);
@@ -768,17 +772,20 @@ body[theme-mode=dark], body .semi-always-dark {
768
772
  --semi-shadow-text: 0px 0px 4px 0px rgba(0,0,0,0.5),0px 1px 6px 0px rgba(0,0,0,0.2);
769
773
  --semi-shadow-dropdown: 0px 12px 42px -4px rgba(20,23,26,0.12),0px 8px 18px -6px rgba(20,23,26,0.2);
770
774
  --semi-border-radius-full: 9999px;
775
+ --semi-border-radius-name: 8px;
771
776
  --semi-border-radius-large: 12px;
772
777
  --semi-border-radius-small: 3px;
773
778
  --semi-border-radius-circle: 50%;
774
779
  --semi-border-radius-medium: 6px;
780
+ --semi-border-radius-custom-app: 16px;
775
781
  --semi-border-radius-extra-small: 3px;
782
+ --semi-border-radius-custom-content: 12px;
776
783
  --semi-border-radius-custom-button-large: 12px;
777
784
  --semi-border-radius-custom-button-small: 6px;
778
785
  --semi-border-radius-custom-button-default: 8px;
779
786
  }
780
787
 
781
- body {
788
+ body, :host {
782
789
  --semi-transform_scale-none:scale(1,1);
783
790
  --semi-transform_scale-small:scale(1,1);
784
791
  --semi-transform_scale-medium:scale(1,1);
@@ -3624,7 +3631,7 @@ body {
3624
3631
  border: 1px solid var(--semi-color-border);
3625
3632
  }
3626
3633
  .semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-outline, .semi-button-tertiary.semi-button-borderless {
3627
- color: var(--semi-color-text-0);
3634
+ color: var(--semi-color-text-1);
3628
3635
  }
3629
3636
  .semi-button-primary {
3630
3637
  background-color: var(--semi-color-primary);
@@ -3745,17 +3752,17 @@ body {
3745
3752
  background-color: var(--semi-color-fill-1);
3746
3753
  }
3747
3754
  .semi-button-light {
3748
- background-color: var(--semi-color-fill-1);
3755
+ background-color: var(--semi-color-tertiary-light-default);
3749
3756
  border: 1px transparent solid;
3750
3757
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
3751
3758
  transform: scale(var(--semi-transform_scale-none));
3752
3759
  }
3753
3760
  .semi-button-light:not(.semi-button-disabled):hover {
3754
- background-color: var(--semi-color-fill-2);
3761
+ background-color: var(--semi-color-tertiary-light-hover);
3755
3762
  border: 1px var(--semi-color-bg-transparent) solid;
3756
3763
  }
3757
3764
  .semi-button-light:not(.semi-button-disabled):active {
3758
- background-color: var(--semi-color-fill-3);
3765
+ background-color: var(--semi-color-tertiary-light-active);
3759
3766
  border: 1px var(--semi-color-bg-transparent) solid;
3760
3767
  }
3761
3768
  .semi-button-size-small {
@@ -3855,7 +3862,7 @@ body {
3855
3862
  background-color: var(--semi-color-disabled-bg);
3856
3863
  }
3857
3864
  .semi-button-group-line-light {
3858
- background-color: var(--semi-color-fill-1);
3865
+ background-color: var(--semi-color-tertiary-light-default);
3859
3866
  }
3860
3867
  .semi-button-group-line-borderless {
3861
3868
  background-color: transparent;
@@ -5985,12 +5992,15 @@ body {
5985
5992
  right: -8px;
5986
5993
  color: var(--semi-color-text-2);
5987
5994
  }
5988
- .semi-chat-attachment-process.semi-progress-circle {
5995
+ .semi-chat-attachment-process.semi-progress-circle, .semi-chat-attachment-fail {
5989
5996
  position: absolute;
5990
5997
  top: 50%;
5991
5998
  left: 50%;
5992
5999
  transform: translate(-50%, -50%);
5993
6000
  }
6001
+ .semi-chat-attachment-fail {
6002
+ color: var(--semi-color-danger);
6003
+ }
5994
6004
  .semi-chat-attachment-file {
5995
6005
  display: inline-flex;
5996
6006
  flex-direction: row;
@@ -6725,6 +6735,9 @@ body {
6725
6735
  .semi-cropper {
6726
6736
  position: relative;
6727
6737
  }
6738
+ .semi-cropper img {
6739
+ max-width: none;
6740
+ }
6728
6741
  .semi-cropper-img {
6729
6742
  position: absolute;
6730
6743
  user-select: none;
@@ -8380,7 +8393,7 @@ body {
8380
8393
  }
8381
8394
  .semi-dropdown-wrapper {
8382
8395
  overflow-y: auto;
8383
- box-shadow: 0px 12px 42px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -6px rgba(0, 0, 0, 0.08);
8396
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 10px 40px 0px rgba(0, 0, 0, 0.12);
8384
8397
  position: relative;
8385
8398
  z-index: 1050;
8386
8399
  border-radius: 8px;
@@ -14421,6 +14434,20 @@ body {
14421
14434
  display: inline-block;
14422
14435
  overflow: hidden;
14423
14436
  }
14437
+ .semi-image img {
14438
+ /**
14439
+ * In tailwind, the max-width of img/video is set to 100%,
14440
+ * which will affect the amplification effect of the picture.
14441
+ * So we need to set max-width to none.
14442
+ */
14443
+ max-width: none;
14444
+ }
14445
+ .semi-image-tooltip-children-wrapper {
14446
+ display: inline-flex;
14447
+ width: fit-content;
14448
+ height: fit-content;
14449
+ vertical-align: middle;
14450
+ }
14424
14451
  .semi-image-img {
14425
14452
  vertical-align: top;
14426
14453
  border-radius: inherit;
@@ -14591,12 +14618,6 @@ body {
14591
14618
  transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
14592
14619
  z-index: 0;
14593
14620
  user-select: none;
14594
- /**
14595
- * In tailwind, the max-width of img/video is set to 100%,
14596
- * which will affect the amplification effect of the picture.
14597
- * So we need to set max-width to none.
14598
- */
14599
- max-width: none;
14600
14621
  }
14601
14622
  .semi-image-preview-image-spin {
14602
14623
  position: absolute;
@@ -14685,7 +14706,7 @@ img[src=""], img:not([src]) {
14685
14706
  font-size: 14px;
14686
14707
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
14687
14708
  line-height: 20px;
14688
- background-color: var(--semi-color-input-DefaultBg);
14709
+ background-color: var(--semi-color-bg-1);
14689
14710
  border: 1px var(--semi-color-border) solid;
14690
14711
  border-radius: 6px;
14691
14712
  width: 100%;
@@ -14718,19 +14739,19 @@ img[src=""], img:not([src]) {
14718
14739
  line-height: 40px;
14719
14740
  }
14720
14741
  .semi-input-wrapper:hover {
14721
- background-color: var(--semi-color-input-HoverBg);
14742
+ background-color: var(--semi-color-bg-1);
14722
14743
  border-color: var(--semi-color-border-hover);
14723
14744
  }
14724
14745
  .semi-input-wrapper-focus {
14725
- background-color: var(--semi-color-input-ActiveBg);
14746
+ background-color: var(--semi-color-bg-1);
14726
14747
  border: var(--semi-color-focus-border) solid 1px;
14727
14748
  }
14728
14749
  .semi-input-wrapper-focus:hover {
14729
- background-color: var(--semi-color-input-HoverBg);
14750
+ background-color: var(--semi-color-bg-1);
14730
14751
  border-color: var(--semi-color-focus-border);
14731
14752
  }
14732
14753
  .semi-input-wrapper-focus:active {
14733
- background-color: var(--semi-color-input-ActiveBg);
14754
+ background-color: var(--semi-color-bg-1);
14734
14755
  border-color: var(--semi-color-focus-border);
14735
14756
  }
14736
14757
  .semi-input-wrapper.semi-input-readonly {
@@ -14848,18 +14869,18 @@ img[src=""], img:not([src]) {
14848
14869
  background-color: transparent;
14849
14870
  }
14850
14871
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input {
14851
- background-color: var(--semi-color-input-DefaultBg);
14872
+ background-color: var(--semi-color-bg-1);
14852
14873
  border: 1px transparent solid;
14853
14874
  }
14854
14875
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover {
14855
- background-color: var(--semi-color-input-HoverBg);
14876
+ background-color: var(--semi-color-bg-1);
14856
14877
  }
14857
14878
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover ~ .semi-input-modebtn {
14858
- background-color: var(--semi-color-input-HoverBg);
14879
+ background-color: var(--semi-color-bg-1);
14859
14880
  }
14860
14881
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus {
14861
14882
  border: 1px var(--semi-color-focus-border) solid;
14862
- background-color: var(--semi-color-input-ActiveBg);
14883
+ background-color: var(--semi-color-bg-1);
14863
14884
  }
14864
14885
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn {
14865
14886
  border-right-style: none;
@@ -14869,7 +14890,7 @@ img[src=""], img:not([src]) {
14869
14890
  }
14870
14891
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn {
14871
14892
  box-sizing: border-box;
14872
- background-color: var(--semi-color-input-ActiveBg);
14893
+ background-color: var(--semi-color-bg-1);
14873
14894
  }
14874
14895
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn {
14875
14896
  border: 1px var(--semi-color-focus-border) solid;
@@ -14888,13 +14909,13 @@ img[src=""], img:not([src]) {
14888
14909
  border-radius: 0;
14889
14910
  }
14890
14911
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active {
14891
- background-color: var(--semi-color-input-ActiveBg);
14912
+ background-color: var(--semi-color-bg-1);
14892
14913
  }
14893
14914
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active ~ .semi-input-modebtn {
14894
- background-color: var(--semi-color-input-ActiveBg);
14915
+ background-color: var(--semi-color-bg-1);
14895
14916
  }
14896
14917
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover {
14897
- background-color: var(--semi-color-input-DefaultBg);
14918
+ background-color: var(--semi-color-bg-1);
14898
14919
  }
14899
14920
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover:last-child {
14900
14921
  border-radius: 0 6px 6px 0;
@@ -15080,7 +15101,7 @@ img[src=""], img:not([src]) {
15080
15101
  height: 100%;
15081
15102
  display: flex;
15082
15103
  align-items: center;
15083
- background-color: var(--semi-color-input-DefaultBg);
15104
+ background-color: var(--semi-color-bg-1);
15084
15105
  color: var(--semi-color-text-2);
15085
15106
  font-size: 14px;
15086
15107
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -16084,6 +16105,11 @@ img[src=""], img:not([src]) {
16084
16105
  transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4);
16085
16106
  opacity: 0;
16086
16107
  }
16108
+ .semi-navigation-collapsed-wrapper {
16109
+ display: flex;
16110
+ width: fit-content;
16111
+ height: fit-content;
16112
+ }
16087
16113
  .semi-navigation-sub-wrap .semi-navigation-sub-title, .semi-navigation-item {
16088
16114
  cursor: pointer;
16089
16115
  display: flex;
@@ -16896,7 +16922,7 @@ img[src=""], img:not([src]) {
16896
16922
  }
16897
16923
 
16898
16924
  .semi-notification-notice {
16899
- box-shadow: 0px 12px 42px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -6px rgba(0, 0, 0, 0.08);
16925
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 10px 40px 0px rgba(0, 0, 0, 0.12);
16900
16926
  border-radius: var(--semi-border-radius-medium);
16901
16927
  padding-top: 16px;
16902
16928
  padding-right: 12px;
@@ -17528,7 +17554,7 @@ img[src=""], img:not([src]) {
17528
17554
  position: relative;
17529
17555
  background-color: var(--semi-color-bg-3);
17530
17556
  backdrop-filter: none;
17531
- box-shadow: 0px 12px 42px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -6px rgba(0, 0, 0, 0.08);
17557
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 10px 40px 0px rgba(0, 0, 0, 0.12);
17532
17558
  z-index: 1030;
17533
17559
  border-radius: var(--semi-border-radius-medium);
17534
17560
  font-size: 14px;
@@ -18192,6 +18218,11 @@ img[src=""], img:not([src]) {
18192
18218
  height: 24px;
18193
18219
  font-size: 24px;
18194
18220
  }
18221
+ .semi-rating-star-outer {
18222
+ display: inline-flex;
18223
+ width: fit-content;
18224
+ height: fit-content;
18225
+ }
18195
18226
  .semi-rating-star-wrapper {
18196
18227
  position: relative;
18197
18228
  overflow: hidden;
@@ -20796,7 +20827,7 @@ img[src=""], img:not([src]) {
20796
20827
  position: absolute;
20797
20828
  width: 9px;
20798
20829
  height: calc(100% - 4px * 2);
20799
- background-color: var(--semi-color-divider-1);
20830
+ background-color: var(--semi-color-divider-2);
20800
20831
  bottom: 4px;
20801
20832
  right: -1px;
20802
20833
  cursor: col-resize;
@@ -20825,7 +20856,7 @@ img[src=""], img:not([src]) {
20825
20856
  overflow-wrap: break-word;
20826
20857
  border-left: none;
20827
20858
  border-right: none;
20828
- border-bottom: 1px solid var(--semi-color-divider-1);
20859
+ border-bottom: 1px solid var(--semi-color-divider-2);
20829
20860
  padding: 16px;
20830
20861
  box-sizing: border-box;
20831
20862
  position: relative;
@@ -20869,7 +20900,7 @@ img[src=""], img:not([src]) {
20869
20900
  }
20870
20901
  .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell {
20871
20902
  background-color: rgba(var(--semi-grey-0), 1);
20872
- border-bottom: 1px solid var(--semi-color-divider-1);
20903
+ border-bottom: 1px solid var(--semi-color-divider-2);
20873
20904
  }
20874
20905
  .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell:not(.semi-table-column-selection) {
20875
20906
  padding: 10px 16px;
@@ -20981,32 +21012,32 @@ img[src=""], img:not([src]) {
20981
21012
  .semi-table-bordered .semi-table-title {
20982
21013
  padding-left: 16px;
20983
21014
  padding-right: 16px;
20984
- border-top: 1px solid var(--semi-color-divider-1);
20985
- border-right: 1px solid var(--semi-color-divider-1);
20986
- border-left: 1px solid var(--semi-color-divider-1);
21015
+ border-top: 1px solid var(--semi-color-divider-2);
21016
+ border-right: 1px solid var(--semi-color-divider-2);
21017
+ border-left: 1px solid var(--semi-color-divider-2);
20987
21018
  }
20988
21019
  .semi-table-bordered .semi-table-container {
20989
- border: 1px solid var(--semi-color-divider-1);
21020
+ border: 1px solid var(--semi-color-divider-2);
20990
21021
  border-right: 0;
20991
21022
  border-bottom: 0;
20992
21023
  }
20993
21024
  .semi-table-bordered .semi-table-header::-webkit-scrollbar {
20994
- border-right: 1px solid var(--semi-color-divider-1);
21025
+ border-right: 1px solid var(--semi-color-divider-2);
20995
21026
  }
20996
21027
  .semi-table-bordered .semi-table-footer {
20997
- border-left: 1px solid var(--semi-color-divider-1);
20998
- border-right: 1px solid var(--semi-color-divider-1);
20999
- border-bottom: 1px solid var(--semi-color-divider-1);
21028
+ border-left: 1px solid var(--semi-color-divider-2);
21029
+ border-right: 1px solid var(--semi-color-divider-2);
21030
+ border-bottom: 1px solid var(--semi-color-divider-2);
21000
21031
  }
21001
21032
  .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
21002
21033
  background-color: transparent;
21003
21034
  }
21004
21035
  .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
21005
21036
  .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
21006
- border-right: 1px solid var(--semi-color-divider-1);
21037
+ border-right: 1px solid var(--semi-color-divider-2);
21007
21038
  }
21008
21039
  .semi-table-bordered .semi-table-placeholder {
21009
- border-right: 1px solid var(--semi-color-divider-1);
21040
+ border-right: 1px solid var(--semi-color-divider-2);
21010
21041
  }
21011
21042
  .semi-table-placeholder {
21012
21043
  position: sticky;
@@ -21017,7 +21048,7 @@ img[src=""], img:not([src]) {
21017
21048
  font-size: 14px;
21018
21049
  text-align: center;
21019
21050
  background: transparent;
21020
- border-bottom: 1px solid var(--semi-color-divider-1);
21051
+ border-bottom: 1px solid var(--semi-color-divider-2);
21021
21052
  }
21022
21053
  .semi-table-fixed {
21023
21054
  table-layout: fixed;
@@ -21154,20 +21185,20 @@ img[src=""], img:not([src]) {
21154
21185
  }
21155
21186
  .semi-table-wrapper-rtl .semi-table-bordered .semi-table-container {
21156
21187
  border-left: 0;
21157
- border-right: 1px solid var(--semi-color-divider-1);
21188
+ border-right: 1px solid var(--semi-color-divider-2);
21158
21189
  }
21159
21190
  .semi-table-wrapper-rtl .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
21160
21191
  .semi-table-wrapper-rtl .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
21161
21192
  border-right: 0;
21162
- border-left: 1px solid var(--semi-color-divider-1);
21193
+ border-left: 1px solid var(--semi-color-divider-2);
21163
21194
  }
21164
21195
  .semi-table-wrapper-rtl .semi-table-bordered .semi-table-placeholder {
21165
- border-left: 1px solid var(--semi-color-divider-1);
21196
+ border-left: 1px solid var(--semi-color-divider-2);
21166
21197
  border-right: 0;
21167
21198
  }
21168
21199
  .semi-table-wrapper-rtl .semi-table-bordered .semi-table-header::-webkit-scrollbar {
21169
21200
  border-right: 0;
21170
- border-left: 1px solid var(--semi-color-divider-1);
21201
+ border-left: 1px solid var(--semi-color-divider-2);
21171
21202
  }
21172
21203
  .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner {
21173
21204
  left: auto;
@@ -23120,7 +23151,7 @@ img[src=""], img:not([src]) {
23120
23151
  }
23121
23152
  .semi-toast-content {
23122
23153
  pointer-events: all;
23123
- box-shadow: 0px 12px 42px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -6px rgba(0, 0, 0, 0.08);
23154
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 10px 40px 0px rgba(0, 0, 0, 0.12);
23124
23155
  font-size: 14px;
23125
23156
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
23126
23157
  line-height: 20px;
@@ -24910,6 +24941,12 @@ p.semi-typography-extended,
24910
24941
  display: flex;
24911
24942
  flex-wrap: wrap;
24912
24943
  }
24944
+ .semi-upload-tooltip-children-wrapper {
24945
+ display: inline-flex;
24946
+ width: fit-content;
24947
+ height: fit-content;
24948
+ vertical-align: middle;
24949
+ }
24913
24950
  .semi-upload-disabled {
24914
24951
  cursor: not-allowed;
24915
24952
  }
@@ -26067,21 +26104,21 @@ p.semi-typography-extended,
26067
26104
  border: 1px var(--semi-color-border) solid;
26068
26105
  border-radius: 6px;
26069
26106
  vertical-align: bottom;
26070
- background-color: var(--semi-color-input-DefaultBg);
26107
+ background-color: var(--semi-color-bg-1);
26071
26108
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
26072
26109
  }
26073
26110
  .semi-input-textarea-wrapper:hover {
26074
- background-color: var(--semi-color-input-HoverBg);
26111
+ background-color: var(--semi-color-bg-1);
26075
26112
  }
26076
26113
  .semi-input-textarea-wrapper-focus {
26077
- background-color: var(--semi-color-input-ActiveBg);
26114
+ background-color: var(--semi-color-bg-1);
26078
26115
  border: 1px var(--semi-color-focus-border) solid;
26079
26116
  }
26080
26117
  .semi-input-textarea-wrapper-focus:hover, .semi-input-textarea-wrapper-focus:active {
26081
- background-color: var(--semi-color-input-ActiveBg);
26118
+ background-color: var(--semi-color-bg-1);
26082
26119
  }
26083
26120
  .semi-input-textarea-wrapper:active {
26084
- background-color: var(--semi-color-input-ActiveBg);
26121
+ background-color: var(--semi-color-bg-1);
26085
26122
  }
26086
26123
  .semi-input-textarea-wrapper .semi-input-clearbtn {
26087
26124
  position: absolute;