@semi-bot/semi-theme-fnos 1.0.8 → 1.0.10

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 +12 -9
  3. package/scss/_palette.scss +2 -2
  4. package/scss/animation.scss +1 -1
  5. package/scss/global.scss +12 -6
  6. package/scss/local.scss +5 -5
  7. package/semi.css +34 -28
  8. package/semi.min.css +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@semi-bot/semi-theme-fnos",
3
- "version": "1.0.8",
3
+ "version": "1.0.10",
4
4
  "description": "Semi theme generated by dsm. https://semi.design/dsm",
5
5
  "keywords": [
6
6
  "semi-theme",
package/raw.json CHANGED
@@ -402,7 +402,7 @@
402
402
  "tokens": {
403
403
  "color": {
404
404
  "dark": {
405
- "app/--semi-color-app": "rgba(var(--semi-cyan-4),1)",
405
+ "app/--semi-color-app": "rgba(var(--semi-grey-0),1)",
406
406
  "bg/--semi-color-bg-0": "rgba(var(--semi-neutral-0),1)",
407
407
  "bg/--semi-color-bg-1": "rgba(var(--semi-neutral-1), 1)",
408
408
  "bg/--semi-color-bg-2": "rgba(var(--semi-neutral-1), 1)",
@@ -448,7 +448,7 @@
448
448
  "danger/--semi-color-danger": "rgba(var(--semi-red-4),1)",
449
449
  "shadow/--semi-color-shadow": "rgba(var(--semi-grey-0), 0.8)",
450
450
  "text/--semi-color-text-nav": "rgba(var(--semi-neutral-9),0.75)",
451
- "app/--semi-color-app-header": "rgba(var(--semi-neutral-0), 0)",
451
+ "app/--semi-color-app-header": "rgba(var(--semi-grey-0),0)",
452
452
  "bg/--semi-color-bg-dropdown": "rgba(var(--semi-neutral-2), 1)",
453
453
  "black/--semi-color-black-10": "rgba(0,0,0,0.1)",
454
454
  "black/--semi-color-black-20": "rgba(0,0,0,0.2)",
@@ -476,11 +476,11 @@
476
476
  "success/--semi-color-success": "rgba(var(--semi-green-4),1)",
477
477
  "tab/--semi-color-tab-HoverBg": "rgba(var(--semi-grey-2), 1)",
478
478
  "warning/--semi-color-warning": "rgba(var(--semi-amber-4),1)",
479
- "app/--semi-color-app-siderbar": "rgba(var(--semi-neutral-0), 0)",
479
+ "app/--semi-color-app-siderbar": "rgba(var(--semi-grey-0), 0)",
480
480
  "card/--semi-color-card-border": "rgba(var(--semi-grey-5),0.16)",
481
481
  "info/--semi-color-info-active": "rgba(var(--semi-brand-2),1)",
482
482
  "link/--semi-color-link-active": "rgba(var(--semi-brand-2),1)",
483
- "app/--semi-color-app-container": "rgba(var(--semi-neutral-1), 1)",
483
+ "app/--semi-color-app-container": "rgba(var(--semi-grey-1), 1)",
484
484
  "bg/--semi-color-bg-transparent": "rgba(var(--semi-neutral-0), 0)",
485
485
  "card/--semi-color-card-HoverBg": "rgba(var(--semi-grey-5),0.08)",
486
486
  "divider/--semi-color-divider-0": "rgba(var(--semi-grey-5),0.22)",
@@ -904,14 +904,14 @@
904
904
  "$color-input_danger-bg-focus": "var(--semi-color-bg-1)",
905
905
  "$color-input_danger-bg-hover": "var(--semi-color-bg-1)",
906
906
  "$color-input_danger-bg-active": "var(--semi-color-bg-1)",
907
- "$color-input_default-bg-focus": "var(--semi-color-input-ActiveBg)",
908
- "$color-input_default-bg-hover": "var(--semi-color-input-HoverBg)",
907
+ "$color-input_default-bg-focus": "var(--semi-color-bg-1)",
908
+ "$color-input_default-bg-hover": "var(--semi-color-bg-1)",
909
909
  "$color-input_warning-bg-focus": "var(--semi-color-bg-1)",
910
910
  "$color-input_warning-bg-hover": "var(--semi-color-bg-1)",
911
911
  "$color-input_danger-bg-default": "var(--semi-color-bg-1)",
912
- "$color-input_default-bg-active": "var(--semi-color-input-ActiveBg)",
912
+ "$color-input_default-bg-active": "var(--semi-color-bg-1)",
913
913
  "$color-input_warning-bg-active": "var(--semi-color-bg-1)",
914
- "$color-input_default-bg-default": "var(--semi-color-bg-transparent)",
914
+ "$color-input_default-bg-default": "var(--semi-color-bg-1)",
915
915
  "$color-input_warning-bg-default": "var(--semi-color-bg-1)",
916
916
  "$color-input_danger-border-focus": "var(--semi-color-danger-active)",
917
917
  "$color-input_danger-border-hover": "var(--semi-color-danger-hover)",
@@ -922,7 +922,7 @@
922
922
  "$color-input_warning-border-focus": "var(--semi-color-warning-active)",
923
923
  "$color-input_warning-border-hover": "var(--semi-color-warning-hover)",
924
924
  "$color-input_danger-border-default": "var(--semi-color-danger)",
925
- "$color-input_default-bg-focus-hover": "var(--semi-color-input-HoverBg)",
925
+ "$color-input_default-bg-focus-hover": "var(--semi-color-bg-1)",
926
926
  "$color-input_default-border-default": "var(--semi-color-border)",
927
927
  "$color-input_warning-border-default": "var(--semi-color-warning)",
928
928
  "$color-inputNumber_button-bg-disabled": "var(--semi-color-disabled-bg)",
@@ -1321,11 +1321,14 @@
1321
1321
  },
1322
1322
  "border-radius": {
1323
1323
  "--semi-border-radius-full": "9999px",
1324
+ "--semi-border-radius-name": "8px",
1324
1325
  "--semi-border-radius-large": "12px",
1325
1326
  "--semi-border-radius-small": "3px",
1326
1327
  "--semi-border-radius-circle": "50%",
1327
1328
  "--semi-border-radius-medium": "6px",
1329
+ "--semi-border-radius-custom-app": "16px",
1328
1330
  "--semi-border-radius-extra-small": "3px",
1331
+ "--semi-border-radius-custom-content": "12px",
1329
1332
  "--semi-border-radius-custom-button-large": "12px",
1330
1333
  "--semi-border-radius-custom-button-small": "6px",
1331
1334
  "--semi-border-radius-custom-button-default": "8px"
package/scss/_palette.scss CHANGED
@@ -1,4 +1,4 @@
1
- body, body[theme-mode="dark"] .semi-always-light {
1
+ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-light {
2
2
  --semi-black: 0,0,0;
3
3
  --semi-red-0: 255,235,235;
4
4
  --semi-red-1: 255,224,224;
@@ -204,7 +204,7 @@ body, body[theme-mode="dark"] .semi-always-light {
204
204
 
205
205
 
206
206
  }
207
- body[theme-mode="dark"], body .semi-always-dark {
207
+ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :host .semi-always-dark {
208
208
  --semi-black: 0, 0, 0;
209
209
  --semi-red-0: 102,0,0;
210
210
  --semi-red-1: 155,0,0;
package/scss/animation.scss CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- body{
2
+ body, :host {
3
3
  --semi-transform_scale-none:scale(1,1);
4
4
  --semi-transform_scale-small:scale(1,1);
5
5
  --semi-transform_scale-medium:scale(1,1);
package/scss/global.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @import './_palette.scss';
2
2
 
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-color-app: rgba(var(--semi-neutral-0),1);
5
5
  --semi-color-bg-0: rgba(var(--semi-neutral-0),1);
6
6
  --semi-color-bg-1: rgba(255,255,255,1);
@@ -178,19 +178,22 @@ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI','PingFang SC
178
178
  --semi-shadow-text: 0px 0px 4px 0px rgba(0,0,0,0.5),0px 1px 6px 0px rgba(0,0,0,0.2);
179
179
  --semi-shadow-dropdown: 0px 12px 42px -4px rgba(20,23,26,0.12),0px 8px 18px -6px rgba(20,23,26,0.2);
180
180
  --semi-border-radius-full: 9999px;
181
+ --semi-border-radius-name: 8px;
181
182
  --semi-border-radius-large: 12px;
182
183
  --semi-border-radius-small: 3px;
183
184
  --semi-border-radius-circle: 50%;
184
185
  --semi-border-radius-medium: 6px;
186
+ --semi-border-radius-custom-app: 16px;
185
187
  --semi-border-radius-extra-small: 3px;
188
+ --semi-border-radius-custom-content: 12px;
186
189
  --semi-border-radius-custom-button-large: 12px;
187
190
  --semi-border-radius-custom-button-small: 6px;
188
191
  --semi-border-radius-custom-button-default: 8px;
189
192
 
190
193
 
191
194
  }
192
- body[theme-mode="dark"], body .semi-always-dark {
193
- --semi-color-app: rgba(var(--semi-cyan-4),1);
195
+ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :host .semi-always-dark {
196
+ --semi-color-app: rgba(var(--semi-grey-0),1);
194
197
  --semi-color-bg-0: rgba(var(--semi-neutral-0),1);
195
198
  --semi-color-bg-1: rgba(var(--semi-neutral-1), 1);
196
199
  --semi-color-bg-2: rgba(var(--semi-neutral-1), 1);
@@ -236,7 +239,7 @@ body[theme-mode="dark"], body .semi-always-dark {
236
239
  --semi-color-danger: rgba(var(--semi-red-4),1);
237
240
  --semi-color-shadow: rgba(var(--semi-grey-0), 0.8);
238
241
  --semi-color-text-nav: rgba(var(--semi-neutral-9),0.75);
239
- --semi-color-app-header: rgba(var(--semi-neutral-0), 0);
242
+ --semi-color-app-header: rgba(var(--semi-grey-0),0);
240
243
  --semi-color-bg-dropdown: rgba(var(--semi-neutral-2), 1);
241
244
  --semi-color-black-10: rgba(0,0,0,0.1);
242
245
  --semi-color-black-20: rgba(0,0,0,0.2);
@@ -264,11 +267,11 @@ body[theme-mode="dark"], body .semi-always-dark {
264
267
  --semi-color-success: rgba(var(--semi-green-4),1);
265
268
  --semi-color-tab-HoverBg: rgba(var(--semi-grey-2), 1);
266
269
  --semi-color-warning: rgba(var(--semi-amber-4),1);
267
- --semi-color-app-siderbar: rgba(var(--semi-neutral-0), 0);
270
+ --semi-color-app-siderbar: rgba(var(--semi-grey-0), 0);
268
271
  --semi-color-card-border: rgba(var(--semi-grey-5),0.16);
269
272
  --semi-color-info-active: rgba(var(--semi-brand-2),1);
270
273
  --semi-color-link-active: rgba(var(--semi-brand-2),1);
271
- --semi-color-app-container: rgba(var(--semi-neutral-1), 1);
274
+ --semi-color-app-container: rgba(var(--semi-grey-1), 1);
272
275
  --semi-color-bg-transparent: rgba(var(--semi-neutral-0), 0);
273
276
  --semi-color-card-HoverBg: rgba(var(--semi-grey-5),0.08);
274
277
  --semi-color-divider-0: rgba(var(--semi-grey-5),0.22);
@@ -368,11 +371,14 @@ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI','PingFang SC
368
371
  --semi-shadow-text: 0px 0px 4px 0px rgba(0,0,0,0.5),0px 1px 6px 0px rgba(0,0,0,0.2);
369
372
  --semi-shadow-dropdown: 0px 12px 42px -4px rgba(20,23,26,0.12),0px 8px 18px -6px rgba(20,23,26,0.2);
370
373
  --semi-border-radius-full: 9999px;
374
+ --semi-border-radius-name: 8px;
371
375
  --semi-border-radius-large: 12px;
372
376
  --semi-border-radius-small: 3px;
373
377
  --semi-border-radius-circle: 50%;
374
378
  --semi-border-radius-medium: 6px;
379
+ --semi-border-radius-custom-app: 16px;
375
380
  --semi-border-radius-extra-small: 3px;
381
+ --semi-border-radius-custom-content: 12px;
376
382
  --semi-border-radius-custom-button-large: 12px;
377
383
  --semi-border-radius-custom-button-small: 6px;
378
384
  --semi-border-radius-custom-button-default: 8px;
package/scss/local.scss CHANGED
@@ -11,14 +11,14 @@ $color-badge_primary_solid-bg-default: var(--semi-color-danger);
11
11
  $color-input_danger-bg-focus: var(--semi-color-bg-1);
12
12
  $color-input_danger-bg-hover: var(--semi-color-bg-1);
13
13
  $color-input_danger-bg-active: var(--semi-color-bg-1);
14
- $color-input_default-bg-focus: var(--semi-color-input-ActiveBg);
15
- $color-input_default-bg-hover: var(--semi-color-input-HoverBg);
14
+ $color-input_default-bg-focus: var(--semi-color-bg-1);
15
+ $color-input_default-bg-hover: var(--semi-color-bg-1);
16
16
  $color-input_warning-bg-focus: var(--semi-color-bg-1);
17
17
  $color-input_warning-bg-hover: var(--semi-color-bg-1);
18
18
  $color-input_danger-bg-default: var(--semi-color-bg-1);
19
- $color-input_default-bg-active: var(--semi-color-input-ActiveBg);
19
+ $color-input_default-bg-active: var(--semi-color-bg-1);
20
20
  $color-input_warning-bg-active: var(--semi-color-bg-1);
21
- $color-input_default-bg-default: var(--semi-color-bg-transparent);
21
+ $color-input_default-bg-default: var(--semi-color-bg-1);
22
22
  $color-input_warning-bg-default: var(--semi-color-bg-1);
23
23
  $color-input_danger-border-focus: var(--semi-color-danger-active);
24
24
  $color-input_danger-border-hover: var(--semi-color-danger-hover);
@@ -29,7 +29,7 @@ $color-input_default-border-hover: var(--semi-color-border-hover);
29
29
  $color-input_warning-border-focus: var(--semi-color-warning-active);
30
30
  $color-input_warning-border-hover: var(--semi-color-warning-hover);
31
31
  $color-input_danger-border-default: var(--semi-color-danger);
32
- $color-input_default-bg-focus-hover: var(--semi-color-input-HoverBg);
32
+ $color-input_default-bg-focus-hover: var(--semi-color-bg-1);
33
33
  $color-input_default-border-default: var(--semi-color-border);
34
34
  $color-input_warning-border-default: var(--semi-color-warning);
35
35
  $color-inputNumber_button-bg-disabled: var(--semi-color-disabled-bg);
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;
@@ -205,7 +205,7 @@ 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
210
  --semi-red-0: 102,0,0;
211
211
  --semi-red-1: 155,0,0;
@@ -400,7 +400,7 @@ 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
405
  --semi-color-bg-0: rgba(var(--semi-neutral-0),1);
406
406
  --semi-color-bg-1: rgba(255,255,255,1);
@@ -578,18 +578,21 @@ body, body[theme-mode=dark] .semi-always-light {
578
578
  --semi-shadow-text: 0px 0px 4px 0px rgba(0,0,0,0.5),0px 1px 6px 0px rgba(0,0,0,0.2);
579
579
  --semi-shadow-dropdown: 0px 12px 42px -4px rgba(20,23,26,0.12),0px 8px 18px -6px rgba(20,23,26,0.2);
580
580
  --semi-border-radius-full: 9999px;
581
+ --semi-border-radius-name: 8px;
581
582
  --semi-border-radius-large: 12px;
582
583
  --semi-border-radius-small: 3px;
583
584
  --semi-border-radius-circle: 50%;
584
585
  --semi-border-radius-medium: 6px;
586
+ --semi-border-radius-custom-app: 16px;
585
587
  --semi-border-radius-extra-small: 3px;
588
+ --semi-border-radius-custom-content: 12px;
586
589
  --semi-border-radius-custom-button-large: 12px;
587
590
  --semi-border-radius-custom-button-small: 6px;
588
591
  --semi-border-radius-custom-button-default: 8px;
589
592
  }
590
593
 
591
- body[theme-mode=dark], body .semi-always-dark {
592
- --semi-color-app: rgba(var(--semi-cyan-4),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-grey-0),1);
593
596
  --semi-color-bg-0: rgba(var(--semi-neutral-0),1);
594
597
  --semi-color-bg-1: rgba(var(--semi-neutral-1), 1);
595
598
  --semi-color-bg-2: rgba(var(--semi-neutral-1), 1);
@@ -635,7 +638,7 @@ body[theme-mode=dark], body .semi-always-dark {
635
638
  --semi-color-danger: rgba(var(--semi-red-4),1);
636
639
  --semi-color-shadow: rgba(var(--semi-grey-0), 0.8);
637
640
  --semi-color-text-nav: rgba(var(--semi-neutral-9),0.75);
638
- --semi-color-app-header: rgba(var(--semi-neutral-0), 0);
641
+ --semi-color-app-header: rgba(var(--semi-grey-0),0);
639
642
  --semi-color-bg-dropdown: rgba(var(--semi-neutral-2), 1);
640
643
  --semi-color-black-10: rgba(0,0,0,0.1);
641
644
  --semi-color-black-20: rgba(0,0,0,0.2);
@@ -663,11 +666,11 @@ body[theme-mode=dark], body .semi-always-dark {
663
666
  --semi-color-success: rgba(var(--semi-green-4),1);
664
667
  --semi-color-tab-HoverBg: rgba(var(--semi-grey-2), 1);
665
668
  --semi-color-warning: rgba(var(--semi-amber-4),1);
666
- --semi-color-app-siderbar: rgba(var(--semi-neutral-0), 0);
669
+ --semi-color-app-siderbar: rgba(var(--semi-grey-0), 0);
667
670
  --semi-color-card-border: rgba(var(--semi-grey-5),0.16);
668
671
  --semi-color-info-active: rgba(var(--semi-brand-2),1);
669
672
  --semi-color-link-active: rgba(var(--semi-brand-2),1);
670
- --semi-color-app-container: rgba(var(--semi-neutral-1), 1);
673
+ --semi-color-app-container: rgba(var(--semi-grey-1), 1);
671
674
  --semi-color-bg-transparent: rgba(var(--semi-neutral-0), 0);
672
675
  --semi-color-card-HoverBg: rgba(var(--semi-grey-5),0.08);
673
676
  --semi-color-divider-0: rgba(var(--semi-grey-5),0.22);
@@ -767,17 +770,20 @@ body[theme-mode=dark], body .semi-always-dark {
767
770
  --semi-shadow-text: 0px 0px 4px 0px rgba(0,0,0,0.5),0px 1px 6px 0px rgba(0,0,0,0.2);
768
771
  --semi-shadow-dropdown: 0px 12px 42px -4px rgba(20,23,26,0.12),0px 8px 18px -6px rgba(20,23,26,0.2);
769
772
  --semi-border-radius-full: 9999px;
773
+ --semi-border-radius-name: 8px;
770
774
  --semi-border-radius-large: 12px;
771
775
  --semi-border-radius-small: 3px;
772
776
  --semi-border-radius-circle: 50%;
773
777
  --semi-border-radius-medium: 6px;
778
+ --semi-border-radius-custom-app: 16px;
774
779
  --semi-border-radius-extra-small: 3px;
780
+ --semi-border-radius-custom-content: 12px;
775
781
  --semi-border-radius-custom-button-large: 12px;
776
782
  --semi-border-radius-custom-button-small: 6px;
777
783
  --semi-border-radius-custom-button-default: 8px;
778
784
  }
779
785
 
780
- body {
786
+ body, :host {
781
787
  --semi-transform_scale-none:scale(1,1);
782
788
  --semi-transform_scale-small:scale(1,1);
783
789
  --semi-transform_scale-medium:scale(1,1);
@@ -14684,7 +14690,7 @@ img[src=""], img:not([src]) {
14684
14690
  font-size: 14px;
14685
14691
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
14686
14692
  line-height: 20px;
14687
- background-color: var(--semi-color-bg-transparent);
14693
+ background-color: var(--semi-color-bg-1);
14688
14694
  border: 1px var(--semi-color-border) solid;
14689
14695
  border-radius: 6px;
14690
14696
  width: 100%;
@@ -14717,19 +14723,19 @@ img[src=""], img:not([src]) {
14717
14723
  line-height: 40px;
14718
14724
  }
14719
14725
  .semi-input-wrapper:hover {
14720
- background-color: var(--semi-color-input-HoverBg);
14726
+ background-color: var(--semi-color-bg-1);
14721
14727
  border-color: var(--semi-color-border-hover);
14722
14728
  }
14723
14729
  .semi-input-wrapper-focus {
14724
- background-color: var(--semi-color-input-ActiveBg);
14730
+ background-color: var(--semi-color-bg-1);
14725
14731
  border: var(--semi-color-focus-border) solid 1px;
14726
14732
  }
14727
14733
  .semi-input-wrapper-focus:hover {
14728
- background-color: var(--semi-color-input-HoverBg);
14734
+ background-color: var(--semi-color-bg-1);
14729
14735
  border-color: var(--semi-color-focus-border);
14730
14736
  }
14731
14737
  .semi-input-wrapper-focus:active {
14732
- background-color: var(--semi-color-input-ActiveBg);
14738
+ background-color: var(--semi-color-bg-1);
14733
14739
  border-color: var(--semi-color-focus-border);
14734
14740
  }
14735
14741
  .semi-input-wrapper.semi-input-readonly {
@@ -14847,18 +14853,18 @@ img[src=""], img:not([src]) {
14847
14853
  background-color: transparent;
14848
14854
  }
14849
14855
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input {
14850
- background-color: var(--semi-color-bg-transparent);
14856
+ background-color: var(--semi-color-bg-1);
14851
14857
  border: 1px transparent solid;
14852
14858
  }
14853
14859
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover {
14854
- background-color: var(--semi-color-input-HoverBg);
14860
+ background-color: var(--semi-color-bg-1);
14855
14861
  }
14856
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 {
14857
- background-color: var(--semi-color-input-HoverBg);
14863
+ background-color: var(--semi-color-bg-1);
14858
14864
  }
14859
14865
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus {
14860
14866
  border: 1px var(--semi-color-focus-border) solid;
14861
- background-color: var(--semi-color-input-ActiveBg);
14867
+ background-color: var(--semi-color-bg-1);
14862
14868
  }
14863
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 {
14864
14870
  border-right-style: none;
@@ -14868,7 +14874,7 @@ img[src=""], img:not([src]) {
14868
14874
  }
14869
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 {
14870
14876
  box-sizing: border-box;
14871
- background-color: var(--semi-color-input-ActiveBg);
14877
+ background-color: var(--semi-color-bg-1);
14872
14878
  }
14873
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 {
14874
14880
  border: 1px var(--semi-color-focus-border) solid;
@@ -14887,13 +14893,13 @@ img[src=""], img:not([src]) {
14887
14893
  border-radius: 0;
14888
14894
  }
14889
14895
  .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active {
14890
- background-color: var(--semi-color-input-ActiveBg);
14896
+ background-color: var(--semi-color-bg-1);
14891
14897
  }
14892
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 {
14893
- background-color: var(--semi-color-input-ActiveBg);
14899
+ background-color: var(--semi-color-bg-1);
14894
14900
  }
14895
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 {
14896
- background-color: var(--semi-color-bg-transparent);
14902
+ background-color: var(--semi-color-bg-1);
14897
14903
  }
14898
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 {
14899
14905
  border-radius: 0 6px 6px 0;
@@ -15079,7 +15085,7 @@ img[src=""], img:not([src]) {
15079
15085
  height: 100%;
15080
15086
  display: flex;
15081
15087
  align-items: center;
15082
- background-color: var(--semi-color-bg-transparent);
15088
+ background-color: var(--semi-color-bg-1);
15083
15089
  color: var(--semi-color-text-2);
15084
15090
  font-size: 14px;
15085
15091
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -26066,21 +26072,21 @@ p.semi-typography-extended,
26066
26072
  border: 1px var(--semi-color-border) solid;
26067
26073
  border-radius: 6px;
26068
26074
  vertical-align: bottom;
26069
- background-color: var(--semi-color-bg-transparent);
26075
+ background-color: var(--semi-color-bg-1);
26070
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);
26071
26077
  }
26072
26078
  .semi-input-textarea-wrapper:hover {
26073
- background-color: var(--semi-color-input-HoverBg);
26079
+ background-color: var(--semi-color-bg-1);
26074
26080
  }
26075
26081
  .semi-input-textarea-wrapper-focus {
26076
- background-color: var(--semi-color-input-ActiveBg);
26082
+ background-color: var(--semi-color-bg-1);
26077
26083
  border: 1px var(--semi-color-focus-border) solid;
26078
26084
  }
26079
26085
  .semi-input-textarea-wrapper-focus:hover, .semi-input-textarea-wrapper-focus:active {
26080
- background-color: var(--semi-color-input-ActiveBg);
26086
+ background-color: var(--semi-color-bg-1);
26081
26087
  }
26082
26088
  .semi-input-textarea-wrapper:active {
26083
- background-color: var(--semi-color-input-ActiveBg);
26089
+ background-color: var(--semi-color-bg-1);
26084
26090
  }
26085
26091
  .semi-input-textarea-wrapper .semi-input-clearbtn {
26086
26092
  position: absolute;