@semi-bot/semi-theme-fnos 1.0.7 → 1.0.9

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 (8) hide show
  1. package/package.json +1 -1
  2. package/raw.json +155 -153
  3. package/scss/_palette.scss +45 -45
  4. package/scss/animation.scss +1 -1
  5. package/scss/global.scss +109 -104
  6. package/scss/local.scss +8 -8
  7. package/semi.css +178 -173
  8. 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;
@@ -82,7 +82,7 @@ body, body[theme-mode=dark] .semi-always-light {
82
82
  --semi-amber-6: 170,73,0;
83
83
  --semi-amber-7: 148,58,0;
84
84
  --semi-amber-8: 124,45,0;
85
- --semi-amber-9: 102,36,0;
85
+ --semi-amber-9: 80,30,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;
@@ -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: 102,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;
281
+ --semi-amber-0: 80,30,0;
282
+ --semi-amber-1: 124,45,0;
283
+ --semi-amber-2: 148,58,0;
284
+ --semi-amber-3: 170,73,0;
285
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;
286
+ --semi-amber-5: 253,161,97;
287
+ --semi-amber-6: 255,197,143;
288
+ --semi-amber-7: 255,228,193;
289
+ --semi-amber-8: 255,240,219;
290
+ --semi-amber-9: 255,246,235;
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: 62,66,70;
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);
@@ -477,44 +476,44 @@ body, body[theme-mode=dark] .semi-always-light {
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);
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-8), 0.22);
500
+ --semi-color-border-modal: rgba(var(--semi-grey-8),0);
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
- --semi-color-input-HoverBg: rgba(255,255,255,1);
504
+ --semi-color-input-HoverBg: rgba(255,255,255,0);
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);
513
- --semi-color-input-ActiveBg: rgba(255,255,255,1);
511
+ --semi-color-disabled-bg: rgba(var(--semi-grey-5),0.16);
512
+ --semi-color-input-ActiveBg: rgba(255,255,255,0);
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);
516
515
  --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
517
- --semi-color-input-DefaultBg: rgba(255,255,255,1);
516
+ --semi-color-input-DefaultBg: rgba(255,255,255,0);
518
517
  --semi-color-photo-toastText: rgba(255,255,255,1);
519
518
  --semi-color-primary-hover: rgba(var(--semi-brand-6), 1);
520
519
  --semi-color-success-hover: rgba(var(--semi-green-6), 1);
@@ -522,19 +521,19 @@ body, body[theme-mode=dark] .semi-always-light {
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
529
  --semi-color-success-active: rgba(var(--semi-green-7), 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);
@@ -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 {
593
- --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);
594
+ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
595
+ --semi-color-app: rgba(var(--semi-cyan-4),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);
639
- --semi-color-app-header: rgba(var(--semi-grey-0),0);
640
- --semi-color-bg-dropdown: rgba(var(--semi-grey-2),1);
640
+ --semi-color-text-nav: rgba(var(--semi-neutral-9),0.75);
641
+ --semi-color-app-header: rgba(var(--semi-neutral-0), 0);
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);
@@ -664,20 +666,20 @@ body[theme-mode=dark], body .semi-always-dark {
664
666
  --semi-color-success: rgba(var(--semi-green-4),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
- --semi-color-app-siderbar: rgba(var(--semi-grey-0), 0);
669
+ --semi-color-app-siderbar: rgba(var(--semi-neutral-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-neutral-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,25 +687,25 @@ 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-grey-5),0);
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-grey-5),0);
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-grey-5),0);
707
709
  --semi-color-photo-toastText: rgba(255,255,255,1);
708
710
  --semi-color-primary-hover: rgba(var(--semi-brand-3),1);
709
711
  --semi-color-success-hover: rgba(var(--semi-green-3),1);
@@ -711,49 +713,49 @@ body[theme-mode=dark], body .semi-always-dark {
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-grey-5),0.16);
718
720
  --semi-color-primary-active: rgba(var(--semi-brand-2),1);
719
721
  --semi-color-success-active: rgba(var(--semi-green-2),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);
@@ -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;
@@ -14685,7 +14690,7 @@ img[src=""], img:not([src]) {
14685
14690
  font-size: 14px;
14686
14691
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
14687
14692
  line-height: 20px;
14688
- background-color: var(--semi-color-bg-transparent);
14693
+ background-color: var(--semi-color-bg-1);
14689
14694
  border: 1px var(--semi-color-border) solid;
14690
14695
  border-radius: 6px;
14691
14696
  width: 100%;
@@ -14718,19 +14723,19 @@ img[src=""], img:not([src]) {
14718
14723
  line-height: 40px;
14719
14724
  }
14720
14725
  .semi-input-wrapper:hover {
14721
- background-color: var(--semi-color-input-HoverBg);
14726
+ background-color: var(--semi-color-bg-1);
14722
14727
  border-color: var(--semi-color-border-hover);
14723
14728
  }
14724
14729
  .semi-input-wrapper-focus {
14725
- background-color: var(--semi-color-input-ActiveBg);
14730
+ background-color: var(--semi-color-bg-1);
14726
14731
  border: var(--semi-color-focus-border) solid 1px;
14727
14732
  }
14728
14733
  .semi-input-wrapper-focus:hover {
14729
- background-color: var(--semi-color-input-HoverBg);
14734
+ background-color: var(--semi-color-bg-1);
14730
14735
  border-color: var(--semi-color-focus-border);
14731
14736
  }
14732
14737
  .semi-input-wrapper-focus:active {
14733
- background-color: var(--semi-color-input-ActiveBg);
14738
+ background-color: var(--semi-color-bg-1);
14734
14739
  border-color: var(--semi-color-focus-border);
14735
14740
  }
14736
14741
  .semi-input-wrapper.semi-input-readonly {
@@ -14848,18 +14853,18 @@ img[src=""], img:not([src]) {
14848
14853
  background-color: transparent;
14849
14854
  }
14850
14855
  .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-bg-transparent);
14856
+ background-color: var(--semi-color-bg-1);
14852
14857
  border: 1px transparent solid;
14853
14858
  }
14854
14859
  .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);
14860
+ background-color: var(--semi-color-bg-1);
14856
14861
  }
14857
14862
  .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);
14863
+ background-color: var(--semi-color-bg-1);
14859
14864
  }
14860
14865
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus {
14861
14866
  border: 1px var(--semi-color-focus-border) solid;
14862
- background-color: var(--semi-color-input-ActiveBg);
14867
+ background-color: var(--semi-color-bg-1);
14863
14868
  }
14864
14869
  .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
14870
  border-right-style: none;
@@ -14869,7 +14874,7 @@ img[src=""], img:not([src]) {
14869
14874
  }
14870
14875
  .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
14876
  box-sizing: border-box;
14872
- background-color: var(--semi-color-input-ActiveBg);
14877
+ background-color: var(--semi-color-bg-1);
14873
14878
  }
14874
14879
  .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
14880
  border: 1px var(--semi-color-focus-border) solid;
@@ -14888,13 +14893,13 @@ img[src=""], img:not([src]) {
14888
14893
  border-radius: 0;
14889
14894
  }
14890
14895
  .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);
14896
+ background-color: var(--semi-color-bg-1);
14892
14897
  }
14893
14898
  .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);
14899
+ background-color: var(--semi-color-bg-1);
14895
14900
  }
14896
14901
  .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-bg-transparent);
14902
+ background-color: var(--semi-color-bg-1);
14898
14903
  }
14899
14904
  .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
14905
  border-radius: 0 6px 6px 0;
@@ -15080,7 +15085,7 @@ img[src=""], img:not([src]) {
15080
15085
  height: 100%;
15081
15086
  display: flex;
15082
15087
  align-items: center;
15083
- background-color: var(--semi-color-bg-transparent);
15088
+ background-color: var(--semi-color-bg-1);
15084
15089
  color: var(--semi-color-text-2);
15085
15090
  font-size: 14px;
15086
15091
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -26067,21 +26072,21 @@ p.semi-typography-extended,
26067
26072
  border: 1px var(--semi-color-border) solid;
26068
26073
  border-radius: 6px;
26069
26074
  vertical-align: bottom;
26070
- background-color: var(--semi-color-bg-transparent);
26075
+ background-color: var(--semi-color-bg-1);
26071
26076
  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
26077
  }
26073
26078
  .semi-input-textarea-wrapper:hover {
26074
- background-color: var(--semi-color-input-HoverBg);
26079
+ background-color: var(--semi-color-bg-1);
26075
26080
  }
26076
26081
  .semi-input-textarea-wrapper-focus {
26077
- background-color: var(--semi-color-input-ActiveBg);
26082
+ background-color: var(--semi-color-bg-1);
26078
26083
  border: 1px var(--semi-color-focus-border) solid;
26079
26084
  }
26080
26085
  .semi-input-textarea-wrapper-focus:hover, .semi-input-textarea-wrapper-focus:active {
26081
- background-color: var(--semi-color-input-ActiveBg);
26086
+ background-color: var(--semi-color-bg-1);
26082
26087
  }
26083
26088
  .semi-input-textarea-wrapper:active {
26084
- background-color: var(--semi-color-input-ActiveBg);
26089
+ background-color: var(--semi-color-bg-1);
26085
26090
  }
26086
26091
  .semi-input-textarea-wrapper .semi-input-clearbtn {
26087
26092
  position: absolute;