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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +2 -2
  2. package/package.json +1 -1
  3. package/raw.json +169 -167
  4. package/scss/_palette.scss +57 -57
  5. package/scss/animation.scss +1 -1
  6. package/scss/global.scss +110 -105
  7. package/scss/local.scss +9 -9
  8. package/scss/mixin.scss +1 -1
  9. package/semi.css +250 -215
  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-8), 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-8),0.08);
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);
499
+ --semi-color-border-hover: rgba(var(--semi-grey-8), 0.22);
501
500
  --semi-color-border-modal: rgba(var(--semi-grey-8),0.08);
502
- --semi-color-card-DefaultBg: rgba(var(--semi-grey-5),0.05);
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);
507
+ --semi-color-table-HoverBg: rgba(var(--semi-grey-5),0.08);
508
+ --semi-color-border-active: rgba(var(--semi-grey-5),0.32);
510
509
  --semi-color-border-select: rgba(var(--semi-grey-8),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,24 +516,24 @@ 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);
@@ -542,7 +541,7 @@ body, body[theme-mode=dark] .semi-always-light {
542
541
  --semi-color-info-light-hover: rgba(var(--semi-brand-1),1);
543
542
  --semi-color-fndesktop-navbarBg: rgba(134,164,179,0.05);
544
543
  --semi-color-info-light-active: rgba(var(--semi-brand-2),1);
545
- --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2),1);
544
+ --semi-color-secondary-disabled: rgba(var(--semi-grey-5),0.16);
546
545
  --semi-color-info-light-default: rgba(var(--semi-brand-0),1);
547
546
  --semi-color-overlay-CustomPreview: rgba(0,0,0,0.9);
548
547
  --semi-color-danger-light-hover: rgba(var(--semi-red-1), 1);
@@ -557,12 +556,12 @@ body, body[theme-mode=dark] .semi-always-light {
557
556
  --semi-color-warning-light-active: rgba(var(--semi-amber-2), 1);
558
557
  --semi-color-primary-light-default: rgba(var(--semi-brand-0),1);
559
558
  --semi-color-success-light-default: rgba(var(--semi-green-0), 1);
560
- --semi-color-tertiary-light-hover: rgba(var(--semi-grey-3),1);
559
+ --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5),0.16);
561
560
  --semi-color-warning-light-default: rgba(var(--semi-amber-0), 1);
562
- --semi-color-tertiary-light-active: rgba(var(--semi-grey-4),1);
561
+ --semi-color-tertiary-light-active: rgba(var(--semi-grey-5),0.32);
563
562
  --semi-color-CheckboxPhoto-DefaultBg: rgba(255,255,255,0.2);
564
563
  --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1), 1);
565
- --semi-color-tertiary-light-default: rgba(var(--semi-grey-2),1);
564
+ --semi-color-tertiary-light-default: rgba(var(--semi-grey-5),0.12);
566
565
  --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2), 1);
567
566
  --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0), 1);
568
567
  --semi-color-CheckboxPhoto-DefaultBorder: rgba(255,255,255,1);
@@ -570,7 +569,7 @@ body, body[theme-mode=dark] .semi-always-light {
570
569
  --semi-color-CheckboxPhoto-DefaultBorderHover: rgba(255,255,255,0);
571
570
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
572
571
  -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);
572
+ --semi-shadow-elevated: 0px 10px 20px 0px rgba(0,0,0,0.08),0px 10px 40px 0px rgba(0,0,0,0.12);
574
573
  --semi-shadow-0: none;
575
574
  --semi-shadow-1: none;
576
575
  --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 +578,51 @@ body, body[theme-mode=dark] .semi-always-light {
579
578
  --semi-shadow-text: 0px 0px 4px 0px rgba(0,0,0,0.5),0px 1px 6px 0px rgba(0,0,0,0.2);
580
579
  --semi-shadow-dropdown: 0px 12px 42px -4px rgba(20,23,26,0.12),0px 8px 18px -6px rgba(20,23,26,0.2);
581
580
  --semi-border-radius-full: 9999px;
581
+ --semi-border-radius-name: 8px;
582
582
  --semi-border-radius-large: 12px;
583
583
  --semi-border-radius-small: 3px;
584
584
  --semi-border-radius-circle: 50%;
585
585
  --semi-border-radius-medium: 6px;
586
+ --semi-border-radius-custom-app: 16px;
586
587
  --semi-border-radius-extra-small: 3px;
588
+ --semi-border-radius-custom-content: 12px;
587
589
  --semi-border-radius-custom-button-large: 12px;
588
590
  --semi-border-radius-custom-button-small: 6px;
589
591
  --semi-border-radius-custom-button-default: 8px;
590
592
  }
591
593
 
592
- body[theme-mode=dark], body .semi-always-dark {
594
+ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
593
595
  --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);
596
+ --semi-color-bg-0: rgba(var(--semi-neutral-0),1);
597
+ --semi-color-bg-1: rgba(var(--semi-neutral-1), 1);
598
+ --semi-color-bg-2: rgba(var(--semi-neutral-1), 1);
599
+ --semi-color-bg-3: rgba(var(--semi-neutral-2), 1);
600
+ --semi-color-bg-4: rgba(var(--semi-neutral-2), 1);
599
601
  --semi-color-info: rgba(var(--semi-brand-4),1);
600
602
  --semi-color-link: rgba(var(--semi-brand-4),1);
601
603
  --semi-color-bg-anti: rgba(255,255,255,1);
602
604
  --semi-color-nav-bg: rgba(var(--semi-grey-2), 1);
603
605
  --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);
606
+ --semi-color-data-0: rgba(0,102,255,1);
607
+ --semi-color-data-1: rgba(142,212,231,1);
606
608
  --semi-color-data-2: rgba(245,135,0,1);
607
609
  --semi-color-data-3: rgba(220,183,252,1);
608
- --semi-color-data-4: rgba(74,156,247,1);
610
+ --semi-color-data-4: rgba(74,156,251,1);
609
611
  --semi-color-data-5: rgba(243,204,53,1);
610
612
  --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);
613
+ --semi-color-data-7: rgba(0,179,178,1);
614
+ --semi-color-data-8: rgba(0,135,83,1);
613
615
  --semi-color-data-9: rgba(233,165,229,1);
614
- --semi-color-fill-0: rgba(var(--semi-grey-5), 0.05);
616
+ --semi-color-fill-0: rgba(var(--semi-grey-5),0.05);
615
617
  --semi-color-fill-1: rgba(var(--semi-grey-5),0.08);
616
618
  --semi-color-fill-2: rgba(var(--semi-grey-5),0.16);
617
619
  --semi-color-fill-3: rgba(var(--semi-grey-5),0.32);
618
620
  --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);
621
+ --semi-color-text-1: rgba(var(--semi-neutral-9),0.75);
622
+ --semi-color-text-2: rgba(var(--semi-neutral-9),0.5);
623
+ --semi-color-text-3: rgba(var(--semi-neutral-9),0.25);
622
624
  --semi-color-white: rgba(255,255,255,1);
623
- --semi-color-bg-avatar: rgba(var(--semi-grey-5),0.16);
625
+ --semi-color-bg-avatar: rgba(var(--semi-neutral-5),0.16);
624
626
  --semi-color-data-10: rgba(48,167,206,1);
625
627
  --semi-color-data-11: rgba(249,192,100,1);
626
628
  --semi-color-data-12: rgba(177,113,249,1);
@@ -631,13 +633,13 @@ body[theme-mode=dark], body .semi-always-dark {
631
633
  --semi-color-data-17: rgba(182,215,129,1);
632
634
  --semi-color-data-18: rgba(212,88,212,1);
633
635
  --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);
636
+ --semi-color-data-20: rgba(121,137,255,1);
637
+ --semi-color-border: rgba(var(--semi-grey-5),0.16);
636
638
  --semi-color-danger: rgba(var(--semi-red-4),1);
637
639
  --semi-color-shadow: rgba(var(--semi-grey-0), 0.8);
638
- --semi-color-text-nav: rgba(255,255,255,0.75);
640
+ --semi-color-text-nav: rgba(var(--semi-neutral-9),0.75);
639
641
  --semi-color-app-header: rgba(var(--semi-grey-0),0);
640
- --semi-color-bg-dropdown: rgba(var(--semi-grey-2),1);
642
+ --semi-color-bg-dropdown: rgba(var(--semi-neutral-2), 1);
641
643
  --semi-color-black-10: rgba(0,0,0,0.1);
642
644
  --semi-color-black-20: rgba(0,0,0,0.2);
643
645
  --semi-color-black-30: rgba(0,0,0,0.3);
@@ -647,7 +649,7 @@ body[theme-mode=dark], body .semi-always-dark {
647
649
  --semi-color-black-70: rgba(0,0,0,0.7);
648
650
  --semi-color-black-80: rgba(0,0,0,0.8);
649
651
  --semi-color-black-90: rgba(0,0,0,0.9);
650
- --semi-color-text-anti: rgba(var(--semi-grey-0),1);
652
+ --semi-color-text-anti: rgba(var(--semi-neutral-0),1);
651
653
  --semi-color-white-10: rgba(255,255,255,0.1);
652
654
  --semi-color-white-20: rgba(255,255,255,0.2);
653
655
  --semi-color-white-30: rgba(255,255,255,0.3);
@@ -661,23 +663,23 @@ body[theme-mode=dark], body .semi-always-dark {
661
663
  --semi-color-info-hover: rgba(var(--semi-brand-3),1);
662
664
  --semi-color-link-hover: rgba(var(--semi-brand-3),1);
663
665
  --semi-color-primary: rgba(var(--semi-brand-4),1);
664
- --semi-color-success: rgba(var(--semi-green-4),1);
666
+ --semi-color-success: rgba(var(--semi-green-5),1);
665
667
  --semi-color-tab-HoverBg: rgba(var(--semi-grey-2), 1);
666
668
  --semi-color-warning: rgba(var(--semi-amber-4),1);
667
669
  --semi-color-app-siderbar: rgba(var(--semi-grey-0), 0);
668
670
  --semi-color-card-border: rgba(var(--semi-grey-5),0.16);
669
671
  --semi-color-info-active: rgba(var(--semi-brand-2),1);
670
672
  --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);
673
+ --semi-color-app-container: rgba(var(--semi-grey-1), 1);
674
+ --semi-color-bg-transparent: rgba(var(--semi-neutral-0), 0);
673
675
  --semi-color-card-HoverBg: rgba(var(--semi-grey-5),0.08);
674
676
  --semi-color-divider-0: rgba(var(--semi-grey-5),0.22);
675
677
  --semi-color-divider-1: rgba(var(--semi-grey-5),0.16);
676
678
  --semi-color-divider-2: rgba(var(--semi-grey-5),0.08);
677
679
  --semi-color-link-visited: rgba(var(--semi-brand-2),1);
678
680
  --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);
681
+ --semi-color-tab-DefaultBg: rgba(var(--semi-grey-1),1);
682
+ --semi-color-tertiary: rgba(var(--semi-grey-5),0.08);
681
683
  --semi-color-card-ActiveBg: rgba(var(--semi-brand-4),0.12);
682
684
  --semi-color-focus-border: rgba(var(--semi-brand-4),1);
683
685
  --semi-color-info-disabled: rgba(var(--semi-grey-5),0.16);
@@ -685,81 +687,81 @@ body[theme-mode=dark], body .semi-always-dark {
685
687
  --semi-color-shadow-anti: rgba(0,0,0,0.7);
686
688
  --semi-color-tab-DisabledBg: rgba(var(--semi-grey-2), 1);
687
689
  --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);
690
+ --semi-color-Scrollbar: rgba(var(--semi-grey-5),0.16);
691
+ --semi-color-border-hover: rgba(var(--semi-grey-5),0.22);
690
692
  --semi-color-border-modal: rgba(var(--semi-grey-5),0.16);
691
- --semi-color-card-DefaultBg: rgba(var(--semi-grey-5), 0.05);
693
+ --semi-color-card-DefaultBg: rgba(var(--semi-grey-5),0.05);
692
694
  --semi-color-danger-hover: rgba(var(--semi-red-3),1);
693
695
  --semi-color-highlight: rgba(var(--semi-white),1);
694
- --semi-color-input-HoverBg: rgba(var(--semi-grey-5), 0.08);
696
+ --semi-color-input-HoverBg: rgba(var(--semi-neutral-1),1);
695
697
  --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
696
- --semi-color-table-FocusBg: rgba(var(--semi-brand-4),0.12);
698
+ --semi-color-table-FocusBg: rgba(var(--semi-brand-4),0.2);
697
699
  --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);
700
+ --semi-color-border-active: rgba(var(--semi-grey-5),0.32);
701
+ --semi-color-border-select: rgba(var(--semi-grey-5),0.16);
700
702
  --semi-color-danger-active: rgba(var(--semi-red-2),1);
701
703
  --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);
704
+ --semi-color-input-ActiveBg: rgba(var(--semi-neutral-1),1);
705
+ --semi-color-table-ActiveBg: rgba(var(--semi-brand-4),0.12);
704
706
  --semi-color-card-borderHover: rgba(var(--semi-grey-5),0.22);
705
707
  --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
706
- --semi-color-input-DefaultBg: rgba(var(--semi-grey-5), 0.05);
708
+ --semi-color-input-DefaultBg: rgba(var(--semi-neutral-1),1);
707
709
  --semi-color-photo-toastText: rgba(255,255,255,1);
708
710
  --semi-color-primary-hover: rgba(var(--semi-brand-3),1);
709
- --semi-color-success-hover: rgba(var(--semi-green-3),1);
711
+ --semi-color-success-hover: rgba(var(--semi-green-4),1);
710
712
  --semi-color-warning-hover: rgba(var(--semi-amber-3),1);
711
713
  --semi-color-Component-bg: rgba(0,0,0,0.6);
712
714
  --semi-color-card-borderActive: rgba(var(--semi-brand-4),1);
713
715
  --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);
716
+ --semi-color-disabled-fill: rgba(var(--semi-neutral-5), 0.16);
717
+ --semi-color-disabled-text: rgba(var(--semi-neutral-9),0.25);
716
718
  --semi-color-highlight-bg: rgba(var(--semi-yellow-4),1);
717
- --semi-color-input-DisabledBg: rgba(var(--semi-grey-5),0.08);
719
+ --semi-color-input-DisabledBg: rgba(var(--semi-neutral-5),0.16);
718
720
  --semi-color-primary-active: rgba(var(--semi-brand-2),1);
719
- --semi-color-success-active: rgba(var(--semi-green-2),1);
721
+ --semi-color-success-active: rgba(var(--semi-green-3),1);
720
722
  --semi-color-warning-active: rgba(var(--semi-amber-2),1);
721
- --semi-color-tertiary-hover: rgba(var(--semi-grey-5), 0.32);
723
+ --semi-color-tertiary-hover: rgba(var(--semi-grey-5),0.16);
722
724
  --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);
725
+ --semi-color-disabled-border: rgba(var(--semi-grey-5),0.16);
726
+ --semi-color-primary-disabled: rgba(var(--semi-grey-5),0.16);
725
727
  --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);
728
+ --semi-color-tertiary-active: rgba(var(--semi-grey-5),0.2);
729
+ --semi-color-Scrollbar-hover: rgba(var(--semi-grey-5),0.32);
728
730
  --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
729
731
  --semi-color-overlay-CustomAnti: rgba(0,0,0,0.6);
730
732
  --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
731
- --semi-color-info-light-hover: rgba(var(--semi-brand-1),0.5);
733
+ --semi-color-info-light-hover: rgba(var(--semi-brand-1),1);
732
734
  --semi-color-fndesktop-navbarBg: rgba(12,13,13,0.6);
733
735
  --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);
736
+ --semi-color-secondary-disabled: rgba(var(--semi-grey-5),0.16);
737
+ --semi-color-info-light-default: rgba(var(--semi-brand-0),1);
736
738
  --semi-color-overlay-CustomPreview: rgba(0,0,0,0.9);
737
739
  --semi-color-danger-light-hover: rgba(var(--semi-red-1),1);
738
740
  --semi-color-danger-light-active: rgba(var(--semi-red-2),1);
739
741
  --semi-color-fndesktop-navbarBorder: rgba(255,255,255,0.05);
740
742
  --semi-color-danger-light-default: rgba(var(--semi-red-0),1);
741
- --semi-color-primary-light-hover: rgba(var(--semi-brand-1),0.55);
743
+ --semi-color-primary-light-hover: rgba(var(--semi-brand-1),1);
742
744
  --semi-color-success-light-hover: rgba(var(--semi-green-1),1);
743
745
  --semi-color-warning-light-hover: rgba(var(--semi-amber-1), 1);
744
746
  --semi-color-primary-light-active: rgba(var(--semi-brand-2),1);
745
747
  --semi-color-success-light-active: rgba(var(--semi-green-2),1);
746
748
  --semi-color-warning-light-active: rgba(var(--semi-amber-2), 1);
747
- --semi-color-primary-light-default: rgba(var(--semi-brand-0),0.3);
749
+ --semi-color-primary-light-default: rgba(var(--semi-brand-0),1);
748
750
  --semi-color-success-light-default: rgba(var(--semi-green-0),1);
749
- --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), 0.3);
751
+ --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5),0.16);
750
752
  --semi-color-warning-light-default: rgba(var(--semi-amber-0), 1);
751
- --semi-color-tertiary-light-active: rgba(var(--semi-grey-5), 0.4);
753
+ --semi-color-tertiary-light-active: rgba(var(--semi-grey-5),0.32);
752
754
  --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);
755
+ --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1),1);
756
+ --semi-color-tertiary-light-default: rgba(var(--semi-grey-5),0.08);
757
+ --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2),1);
758
+ --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0),1);
757
759
  --semi-color-CheckboxPhoto-DefaultBorder: rgba(255,255,255,0.7);
758
760
  --semi-color-CheckboxPhoto-DefaultBgHover: rgba(255,255,255,0.7);
759
761
  --semi-color-CheckboxPhoto-DefaultBorderHover: rgba(255,255,255,0);
760
762
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
761
763
  -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);
764
+ --semi-shadow-elevated: 0px 10px 20px 0px rgba(0,0,0,0.08),0px 10px 40px 0px rgba(0,0,0,0.12);
763
765
  --semi-shadow-0: none;
764
766
  --semi-shadow-1: none;
765
767
  --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 +770,20 @@ body[theme-mode=dark], body .semi-always-dark {
768
770
  --semi-shadow-text: 0px 0px 4px 0px rgba(0,0,0,0.5),0px 1px 6px 0px rgba(0,0,0,0.2);
769
771
  --semi-shadow-dropdown: 0px 12px 42px -4px rgba(20,23,26,0.12),0px 8px 18px -6px rgba(20,23,26,0.2);
770
772
  --semi-border-radius-full: 9999px;
773
+ --semi-border-radius-name: 8px;
771
774
  --semi-border-radius-large: 12px;
772
775
  --semi-border-radius-small: 3px;
773
776
  --semi-border-radius-circle: 50%;
774
777
  --semi-border-radius-medium: 6px;
778
+ --semi-border-radius-custom-app: 16px;
775
779
  --semi-border-radius-extra-small: 3px;
780
+ --semi-border-radius-custom-content: 12px;
776
781
  --semi-border-radius-custom-button-large: 12px;
777
782
  --semi-border-radius-custom-button-small: 6px;
778
783
  --semi-border-radius-custom-button-default: 8px;
779
784
  }
780
785
 
781
- body {
786
+ body, :host {
782
787
  --semi-transform_scale-none:scale(1,1);
783
788
  --semi-transform_scale-small:scale(1,1);
784
789
  --semi-transform_scale-medium:scale(1,1);
@@ -3745,17 +3750,17 @@ body {
3745
3750
  background-color: var(--semi-color-fill-1);
3746
3751
  }
3747
3752
  .semi-button-light {
3748
- background-color: var(--semi-color-fill-1);
3753
+ background-color: var(--semi-color-tertiary-light-default);
3749
3754
  border: 1px transparent solid;
3750
3755
  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
3756
  transform: scale(var(--semi-transform_scale-none));
3752
3757
  }
3753
3758
  .semi-button-light:not(.semi-button-disabled):hover {
3754
- background-color: var(--semi-color-fill-2);
3759
+ background-color: var(--semi-color-tertiary-light-hover);
3755
3760
  border: 1px var(--semi-color-bg-transparent) solid;
3756
3761
  }
3757
3762
  .semi-button-light:not(.semi-button-disabled):active {
3758
- background-color: var(--semi-color-fill-3);
3763
+ background-color: var(--semi-color-tertiary-light-active);
3759
3764
  border: 1px var(--semi-color-bg-transparent) solid;
3760
3765
  }
3761
3766
  .semi-button-size-small {
@@ -3855,7 +3860,7 @@ body {
3855
3860
  background-color: var(--semi-color-disabled-bg);
3856
3861
  }
3857
3862
  .semi-button-group-line-light {
3858
- background-color: var(--semi-color-fill-1);
3863
+ background-color: var(--semi-color-tertiary-light-default);
3859
3864
  }
3860
3865
  .semi-button-group-line-borderless {
3861
3866
  background-color: transparent;
@@ -5985,12 +5990,15 @@ body {
5985
5990
  right: -8px;
5986
5991
  color: var(--semi-color-text-2);
5987
5992
  }
5988
- .semi-chat-attachment-process.semi-progress-circle {
5993
+ .semi-chat-attachment-process.semi-progress-circle, .semi-chat-attachment-fail {
5989
5994
  position: absolute;
5990
5995
  top: 50%;
5991
5996
  left: 50%;
5992
5997
  transform: translate(-50%, -50%);
5993
5998
  }
5999
+ .semi-chat-attachment-fail {
6000
+ color: var(--semi-color-danger);
6001
+ }
5994
6002
  .semi-chat-attachment-file {
5995
6003
  display: inline-flex;
5996
6004
  flex-direction: row;
@@ -6725,6 +6733,9 @@ body {
6725
6733
  .semi-cropper {
6726
6734
  position: relative;
6727
6735
  }
6736
+ .semi-cropper img {
6737
+ max-width: none;
6738
+ }
6728
6739
  .semi-cropper-img {
6729
6740
  position: absolute;
6730
6741
  user-select: none;
@@ -8380,7 +8391,7 @@ body {
8380
8391
  }
8381
8392
  .semi-dropdown-wrapper {
8382
8393
  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);
8394
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 10px 40px 0px rgba(0, 0, 0, 0.12);
8384
8395
  position: relative;
8385
8396
  z-index: 1050;
8386
8397
  border-radius: 8px;
@@ -14421,6 +14432,20 @@ body {
14421
14432
  display: inline-block;
14422
14433
  overflow: hidden;
14423
14434
  }
14435
+ .semi-image img {
14436
+ /**
14437
+ * In tailwind, the max-width of img/video is set to 100%,
14438
+ * which will affect the amplification effect of the picture.
14439
+ * So we need to set max-width to none.
14440
+ */
14441
+ max-width: none;
14442
+ }
14443
+ .semi-image-tooltip-children-wrapper {
14444
+ display: inline-flex;
14445
+ width: fit-content;
14446
+ height: fit-content;
14447
+ vertical-align: middle;
14448
+ }
14424
14449
  .semi-image-img {
14425
14450
  vertical-align: top;
14426
14451
  border-radius: inherit;
@@ -14591,12 +14616,6 @@ body {
14591
14616
  transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
14592
14617
  z-index: 0;
14593
14618
  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
14619
  }
14601
14620
  .semi-image-preview-image-spin {
14602
14621
  position: absolute;
@@ -14685,7 +14704,7 @@ img[src=""], img:not([src]) {
14685
14704
  font-size: 14px;
14686
14705
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
14687
14706
  line-height: 20px;
14688
- background-color: var(--semi-color-input-DefaultBg);
14707
+ background-color: var(--semi-color-bg-1);
14689
14708
  border: 1px var(--semi-color-border) solid;
14690
14709
  border-radius: 6px;
14691
14710
  width: 100%;
@@ -14718,19 +14737,19 @@ img[src=""], img:not([src]) {
14718
14737
  line-height: 40px;
14719
14738
  }
14720
14739
  .semi-input-wrapper:hover {
14721
- background-color: var(--semi-color-input-HoverBg);
14740
+ background-color: var(--semi-color-bg-1);
14722
14741
  border-color: var(--semi-color-border-hover);
14723
14742
  }
14724
14743
  .semi-input-wrapper-focus {
14725
- background-color: var(--semi-color-input-ActiveBg);
14744
+ background-color: var(--semi-color-bg-1);
14726
14745
  border: var(--semi-color-focus-border) solid 1px;
14727
14746
  }
14728
14747
  .semi-input-wrapper-focus:hover {
14729
- background-color: var(--semi-color-input-HoverBg);
14748
+ background-color: var(--semi-color-bg-1);
14730
14749
  border-color: var(--semi-color-focus-border);
14731
14750
  }
14732
14751
  .semi-input-wrapper-focus:active {
14733
- background-color: var(--semi-color-input-ActiveBg);
14752
+ background-color: var(--semi-color-bg-1);
14734
14753
  border-color: var(--semi-color-focus-border);
14735
14754
  }
14736
14755
  .semi-input-wrapper.semi-input-readonly {
@@ -14848,18 +14867,18 @@ img[src=""], img:not([src]) {
14848
14867
  background-color: transparent;
14849
14868
  }
14850
14869
  .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);
14870
+ background-color: var(--semi-color-bg-1);
14852
14871
  border: 1px transparent solid;
14853
14872
  }
14854
14873
  .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);
14874
+ background-color: var(--semi-color-bg-1);
14856
14875
  }
14857
14876
  .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);
14877
+ background-color: var(--semi-color-bg-1);
14859
14878
  }
14860
14879
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus {
14861
14880
  border: 1px var(--semi-color-focus-border) solid;
14862
- background-color: var(--semi-color-input-ActiveBg);
14881
+ background-color: var(--semi-color-bg-1);
14863
14882
  }
14864
14883
  .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
14884
  border-right-style: none;
@@ -14869,7 +14888,7 @@ img[src=""], img:not([src]) {
14869
14888
  }
14870
14889
  .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
14890
  box-sizing: border-box;
14872
- background-color: var(--semi-color-input-ActiveBg);
14891
+ background-color: var(--semi-color-bg-1);
14873
14892
  }
14874
14893
  .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
14894
  border: 1px var(--semi-color-focus-border) solid;
@@ -14888,13 +14907,13 @@ img[src=""], img:not([src]) {
14888
14907
  border-radius: 0;
14889
14908
  }
14890
14909
  .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);
14910
+ background-color: var(--semi-color-bg-1);
14892
14911
  }
14893
14912
  .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);
14913
+ background-color: var(--semi-color-bg-1);
14895
14914
  }
14896
14915
  .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);
14916
+ background-color: var(--semi-color-bg-1);
14898
14917
  }
14899
14918
  .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
14919
  border-radius: 0 6px 6px 0;
@@ -15080,7 +15099,7 @@ img[src=""], img:not([src]) {
15080
15099
  height: 100%;
15081
15100
  display: flex;
15082
15101
  align-items: center;
15083
- background-color: var(--semi-color-input-DefaultBg);
15102
+ background-color: var(--semi-color-bg-1);
15084
15103
  color: var(--semi-color-text-2);
15085
15104
  font-size: 14px;
15086
15105
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -16084,6 +16103,11 @@ img[src=""], img:not([src]) {
16084
16103
  transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4);
16085
16104
  opacity: 0;
16086
16105
  }
16106
+ .semi-navigation-collapsed-wrapper {
16107
+ display: flex;
16108
+ width: fit-content;
16109
+ height: fit-content;
16110
+ }
16087
16111
  .semi-navigation-sub-wrap .semi-navigation-sub-title, .semi-navigation-item {
16088
16112
  cursor: pointer;
16089
16113
  display: flex;
@@ -16896,7 +16920,7 @@ img[src=""], img:not([src]) {
16896
16920
  }
16897
16921
 
16898
16922
  .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);
16923
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 10px 40px 0px rgba(0, 0, 0, 0.12);
16900
16924
  border-radius: var(--semi-border-radius-medium);
16901
16925
  padding-top: 16px;
16902
16926
  padding-right: 12px;
@@ -17528,7 +17552,7 @@ img[src=""], img:not([src]) {
17528
17552
  position: relative;
17529
17553
  background-color: var(--semi-color-bg-3);
17530
17554
  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);
17555
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 10px 40px 0px rgba(0, 0, 0, 0.12);
17532
17556
  z-index: 1030;
17533
17557
  border-radius: var(--semi-border-radius-medium);
17534
17558
  font-size: 14px;
@@ -18192,6 +18216,11 @@ img[src=""], img:not([src]) {
18192
18216
  height: 24px;
18193
18217
  font-size: 24px;
18194
18218
  }
18219
+ .semi-rating-star-outer {
18220
+ display: inline-flex;
18221
+ width: fit-content;
18222
+ height: fit-content;
18223
+ }
18195
18224
  .semi-rating-star-wrapper {
18196
18225
  position: relative;
18197
18226
  overflow: hidden;
@@ -20796,7 +20825,7 @@ img[src=""], img:not([src]) {
20796
20825
  position: absolute;
20797
20826
  width: 9px;
20798
20827
  height: calc(100% - 4px * 2);
20799
- background-color: var(--semi-color-divider-1);
20828
+ background-color: var(--semi-color-divider-2);
20800
20829
  bottom: 4px;
20801
20830
  right: -1px;
20802
20831
  cursor: col-resize;
@@ -20825,7 +20854,7 @@ img[src=""], img:not([src]) {
20825
20854
  overflow-wrap: break-word;
20826
20855
  border-left: none;
20827
20856
  border-right: none;
20828
- border-bottom: 1px solid var(--semi-color-divider-1);
20857
+ border-bottom: 1px solid var(--semi-color-divider-2);
20829
20858
  padding: 16px;
20830
20859
  box-sizing: border-box;
20831
20860
  position: relative;
@@ -20869,7 +20898,7 @@ img[src=""], img:not([src]) {
20869
20898
  }
20870
20899
  .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell {
20871
20900
  background-color: rgba(var(--semi-grey-0), 1);
20872
- border-bottom: 1px solid var(--semi-color-divider-1);
20901
+ border-bottom: 1px solid var(--semi-color-divider-2);
20873
20902
  }
20874
20903
  .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell:not(.semi-table-column-selection) {
20875
20904
  padding: 10px 16px;
@@ -20981,32 +21010,32 @@ img[src=""], img:not([src]) {
20981
21010
  .semi-table-bordered .semi-table-title {
20982
21011
  padding-left: 16px;
20983
21012
  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);
21013
+ border-top: 1px solid var(--semi-color-divider-2);
21014
+ border-right: 1px solid var(--semi-color-divider-2);
21015
+ border-left: 1px solid var(--semi-color-divider-2);
20987
21016
  }
20988
21017
  .semi-table-bordered .semi-table-container {
20989
- border: 1px solid var(--semi-color-divider-1);
21018
+ border: 1px solid var(--semi-color-divider-2);
20990
21019
  border-right: 0;
20991
21020
  border-bottom: 0;
20992
21021
  }
20993
21022
  .semi-table-bordered .semi-table-header::-webkit-scrollbar {
20994
- border-right: 1px solid var(--semi-color-divider-1);
21023
+ border-right: 1px solid var(--semi-color-divider-2);
20995
21024
  }
20996
21025
  .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);
21026
+ border-left: 1px solid var(--semi-color-divider-2);
21027
+ border-right: 1px solid var(--semi-color-divider-2);
21028
+ border-bottom: 1px solid var(--semi-color-divider-2);
21000
21029
  }
21001
21030
  .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
21002
21031
  background-color: transparent;
21003
21032
  }
21004
21033
  .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
21005
21034
  .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
21006
- border-right: 1px solid var(--semi-color-divider-1);
21035
+ border-right: 1px solid var(--semi-color-divider-2);
21007
21036
  }
21008
21037
  .semi-table-bordered .semi-table-placeholder {
21009
- border-right: 1px solid var(--semi-color-divider-1);
21038
+ border-right: 1px solid var(--semi-color-divider-2);
21010
21039
  }
21011
21040
  .semi-table-placeholder {
21012
21041
  position: sticky;
@@ -21017,7 +21046,7 @@ img[src=""], img:not([src]) {
21017
21046
  font-size: 14px;
21018
21047
  text-align: center;
21019
21048
  background: transparent;
21020
- border-bottom: 1px solid var(--semi-color-divider-1);
21049
+ border-bottom: 1px solid var(--semi-color-divider-2);
21021
21050
  }
21022
21051
  .semi-table-fixed {
21023
21052
  table-layout: fixed;
@@ -21154,20 +21183,20 @@ img[src=""], img:not([src]) {
21154
21183
  }
21155
21184
  .semi-table-wrapper-rtl .semi-table-bordered .semi-table-container {
21156
21185
  border-left: 0;
21157
- border-right: 1px solid var(--semi-color-divider-1);
21186
+ border-right: 1px solid var(--semi-color-divider-2);
21158
21187
  }
21159
21188
  .semi-table-wrapper-rtl .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
21160
21189
  .semi-table-wrapper-rtl .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
21161
21190
  border-right: 0;
21162
- border-left: 1px solid var(--semi-color-divider-1);
21191
+ border-left: 1px solid var(--semi-color-divider-2);
21163
21192
  }
21164
21193
  .semi-table-wrapper-rtl .semi-table-bordered .semi-table-placeholder {
21165
- border-left: 1px solid var(--semi-color-divider-1);
21194
+ border-left: 1px solid var(--semi-color-divider-2);
21166
21195
  border-right: 0;
21167
21196
  }
21168
21197
  .semi-table-wrapper-rtl .semi-table-bordered .semi-table-header::-webkit-scrollbar {
21169
21198
  border-right: 0;
21170
- border-left: 1px solid var(--semi-color-divider-1);
21199
+ border-left: 1px solid var(--semi-color-divider-2);
21171
21200
  }
21172
21201
  .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
21202
  left: auto;
@@ -23120,7 +23149,7 @@ img[src=""], img:not([src]) {
23120
23149
  }
23121
23150
  .semi-toast-content {
23122
23151
  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);
23152
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 10px 40px 0px rgba(0, 0, 0, 0.12);
23124
23153
  font-size: 14px;
23125
23154
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
23126
23155
  line-height: 20px;
@@ -24910,6 +24939,12 @@ p.semi-typography-extended,
24910
24939
  display: flex;
24911
24940
  flex-wrap: wrap;
24912
24941
  }
24942
+ .semi-upload-tooltip-children-wrapper {
24943
+ display: inline-flex;
24944
+ width: fit-content;
24945
+ height: fit-content;
24946
+ vertical-align: middle;
24947
+ }
24913
24948
  .semi-upload-disabled {
24914
24949
  cursor: not-allowed;
24915
24950
  }
@@ -26067,21 +26102,21 @@ p.semi-typography-extended,
26067
26102
  border: 1px var(--semi-color-border) solid;
26068
26103
  border-radius: 6px;
26069
26104
  vertical-align: bottom;
26070
- background-color: var(--semi-color-input-DefaultBg);
26105
+ background-color: var(--semi-color-bg-1);
26071
26106
  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
26107
  }
26073
26108
  .semi-input-textarea-wrapper:hover {
26074
- background-color: var(--semi-color-input-HoverBg);
26109
+ background-color: var(--semi-color-bg-1);
26075
26110
  }
26076
26111
  .semi-input-textarea-wrapper-focus {
26077
- background-color: var(--semi-color-input-ActiveBg);
26112
+ background-color: var(--semi-color-bg-1);
26078
26113
  border: 1px var(--semi-color-focus-border) solid;
26079
26114
  }
26080
26115
  .semi-input-textarea-wrapper-focus:hover, .semi-input-textarea-wrapper-focus:active {
26081
- background-color: var(--semi-color-input-ActiveBg);
26116
+ background-color: var(--semi-color-bg-1);
26082
26117
  }
26083
26118
  .semi-input-textarea-wrapper:active {
26084
- background-color: var(--semi-color-input-ActiveBg);
26119
+ background-color: var(--semi-color-bg-1);
26085
26120
  }
26086
26121
  .semi-input-textarea-wrapper .semi-input-clearbtn {
26087
26122
  position: absolute;