@particle-network/ui-react 0.4.0-beta.3 → 0.4.0-beta.30

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 (56) hide show
  1. package/dist/components/ProgressWrapper/index.d.ts +1 -1
  2. package/dist/components/ProgressWrapper/index.js +18 -3
  3. package/dist/components/UXAutocomplete/index.d.ts +5 -0
  4. package/dist/components/UXAutocomplete/index.js +72 -0
  5. package/dist/components/UXButton/button-theme.js +15 -23
  6. package/dist/components/UXButton/use-button.js +2 -1
  7. package/dist/components/UXCheckbox/checkbox.extend.js +3 -3
  8. package/dist/components/UXDatePicker/index.js +1 -1
  9. package/dist/components/UXDateRangePicker/index.js +1 -1
  10. package/dist/components/UXDivider/divider.extend.d.ts +2 -2
  11. package/dist/components/UXDrawer/index.d.ts +9 -0
  12. package/dist/components/UXDrawer/index.js +89 -0
  13. package/dist/components/UXDropdown/dropdown-item.js +1 -1
  14. package/dist/components/UXEmpty/index.d.ts +2 -1
  15. package/dist/components/UXEmpty/index.js +8 -2
  16. package/dist/components/UXHint/index.js +1 -1
  17. package/dist/components/UXInput/index.d.ts +33 -33
  18. package/dist/components/UXInput/input.extend.d.ts +33 -33
  19. package/dist/components/UXModal/index.d.ts +1 -1
  20. package/dist/components/UXModal/index.js +7 -6
  21. package/dist/components/UXSelect/index.js +3 -3
  22. package/dist/components/UXSwitch/index.d.ts +22 -22
  23. package/dist/components/UXSwitch/switch.extend.d.ts +22 -22
  24. package/dist/components/UXTable/index.d.ts +19 -19
  25. package/dist/components/UXTable/table.extend.d.ts +19 -19
  26. package/dist/components/UXTabs/tabs.classes.js +7 -7
  27. package/dist/components/UXThemeSwitch/index.d.ts +0 -1
  28. package/dist/components/UXThemeSwitch/index.js +0 -1
  29. package/dist/components/UXThemeSwitch/theme-item.d.ts +1 -1
  30. package/dist/components/UXThemeSwitch/theme-item.js +4 -5
  31. package/dist/components/UXThemeSwitch/theme-switch.d.ts +3 -3
  32. package/dist/components/UXThemeSwitch/theme-switch.js +131 -101
  33. package/dist/components/UXThemeSwitch/use-color-scheme.d.ts +1 -1
  34. package/dist/components/UXThemeSwitch/use-color-scheme.js +3 -3
  35. package/dist/components/UXThemeSwitch/use-theme-color.d.ts +1 -19
  36. package/dist/components/UXThemeSwitch/use-theme-color.js +3 -3
  37. package/dist/components/UXThemeSwitch/use-theme-store.d.ts +5 -20
  38. package/dist/components/UXThemeSwitch/use-theme-store.js +14 -28
  39. package/dist/components/UXThemeSwitch/use-theme.d.ts +7 -12
  40. package/dist/components/UXThemeSwitch/use-theme.js +73 -80
  41. package/dist/components/UXToast/index.d.ts +7 -4
  42. package/dist/components/UXToast/index.js +21 -17
  43. package/dist/components/UXTooltip/tooltip.extend.d.ts +21 -21
  44. package/dist/components/UXTooltip/tooltip.extend.js +2 -1
  45. package/dist/components/index.d.ts +2 -0
  46. package/dist/components/index.js +2 -0
  47. package/dist/hooks/useI18n.d.ts +6 -2
  48. package/dist/hooks/useI18n.js +15 -7
  49. package/dist/utils/detect.js +1 -2
  50. package/dist/utils/variants.js +16 -16
  51. package/package.json +4 -5
  52. package/tailwind-preset.js +192 -93
  53. package/dist/components/UXThemeSwitch/theme-data.d.ts +0 -29
  54. package/dist/components/UXThemeSwitch/theme-data.js +0 -304
  55. package/dist/icons/index.d.ts +0 -14
  56. package/dist/icons/index.js +0 -120
@@ -6,6 +6,9 @@ const plugin = require('tailwindcss/plugin');
6
6
  module.exports = {
7
7
  theme: {
8
8
  extend: {
9
+ colors: {
10
+ brand: '#D745FF',
11
+ },
9
12
  gap: {
10
13
  xs: '0.125rem', // 2px
11
14
  sm: '0.375rem', // 6px
@@ -72,12 +75,12 @@ module.exports = {
72
75
  },
73
76
  },
74
77
  },
75
- darkMode: 'class',
78
+ darkMode: ['selector', '[data-theme="dark"]'],
76
79
  plugins: [
77
80
  heroui({
78
81
  addCommonColors: true,
79
- defaultTheme: 'ux-purple-gold-light',
80
- defaultExtendTheme: 'light',
82
+ defaultTheme: 'ux-purple-gold-dark',
83
+ defaultExtendTheme: 'ux-purple-gold-dark',
81
84
  layout: {
82
85
  radius: {
83
86
  small: '6px', // rounded-small
@@ -100,9 +103,11 @@ module.exports = {
100
103
  colors: {
101
104
  content1: {
102
105
  DEFAULT: '#17171C',
106
+ foreground: '#FFFFFF',
103
107
  },
104
108
  overlay: {
105
109
  DEFAULT: '#17171C',
110
+ foreground: '#FFFFFF',
106
111
  },
107
112
  background: {
108
113
  200: '#1F1F23',
@@ -118,13 +123,19 @@ module.exports = {
118
123
  DEFAULT: '#FFFFFF',
119
124
  },
120
125
  default: {
121
- DEFAULT: '#E8E8EB',
126
+ DEFAULT: '#1F1F23',
122
127
  foreground: '#FFFFFF',
123
128
  },
124
129
  primary: {
125
- 600: '#6A3AB8',
126
- 700: '#4D2A86',
127
- 900: '#362349',
130
+ 100: '#F6EDF7',
131
+ 200: '#EBCCF0',
132
+ 300: '#E2A5EF',
133
+ 400: '#DC78F4',
134
+ 500: '#D745FF',
135
+ 600: '#C10DF9',
136
+ 700: '#900ABE',
137
+ 800: '#5F0A80',
138
+ 900: '#330845',
128
139
  DEFAULT: '#D745FF',
129
140
  foreground: '#FFFFFF',
130
141
  },
@@ -175,9 +186,11 @@ module.exports = {
175
186
  colors: {
176
187
  content1: {
177
188
  DEFAULT: '#FFFFFF',
189
+ foreground: '#000000',
178
190
  },
179
191
  overlay: {
180
192
  DEFAULT: '#FFFFFF',
193
+ foreground: '#000000',
181
194
  },
182
195
  background: {
183
196
  200: '#F0F0F2',
@@ -189,17 +202,23 @@ module.exports = {
189
202
  foreground: {
190
203
  100: '#D8D8DE',
191
204
  300: '#767A80',
192
- 500: '#000000',
193
- DEFAULT: '#000000',
205
+ 500: '#0C0C0F',
206
+ DEFAULT: '#0C0C0F',
194
207
  },
195
208
  default: {
196
209
  DEFAULT: '#E8E8EB',
197
210
  foreground: '#000000',
198
211
  },
199
212
  primary: {
200
- 600: '#6A3AB8',
201
- 700: '#4D2A86',
202
- 900: '#362349',
213
+ 100: '#F6EDF7',
214
+ 200: '#EBCCF0',
215
+ 300: '#E2A5EF',
216
+ 400: '#DC78F4',
217
+ 500: '#D745FF',
218
+ 600: '#C10DF9',
219
+ 700: '#900ABE',
220
+ 800: '#5F0A80',
221
+ 900: '#330845',
203
222
  DEFAULT: '#D745FF',
204
223
  foreground: '#FFFFFF',
205
224
  },
@@ -250,9 +269,11 @@ module.exports = {
250
269
  colors: {
251
270
  content1: {
252
271
  DEFAULT: '#17171C',
272
+ foreground: '#FFFFFF',
253
273
  },
254
274
  overlay: {
255
275
  DEFAULT: '#17171C',
276
+ foreground: '#FFFFFF',
256
277
  },
257
278
  background: {
258
279
  200: '#1F1F23',
@@ -268,13 +289,19 @@ module.exports = {
268
289
  DEFAULT: '#FFFFFF',
269
290
  },
270
291
  default: {
271
- DEFAULT: '#E8E8EB',
292
+ DEFAULT: '#1F1F23',
272
293
  foreground: '#FFFFFF',
273
294
  },
274
295
  primary: {
275
- 600: '#6A3AB8',
276
- 700: '#4D2A86',
277
- 900: '#362349',
296
+ 100: '#F6EDF7',
297
+ 200: '#EBCCF0',
298
+ 300: '#E2A5EF',
299
+ 400: '#DC78F4',
300
+ 500: '#D745FF',
301
+ 600: '#C10DF9',
302
+ 700: '#900ABE',
303
+ 800: '#5F0A80',
304
+ 900: '#330845',
278
305
  DEFAULT: '#D745FF',
279
306
  foreground: '#FFFFFF',
280
307
  },
@@ -325,9 +352,11 @@ module.exports = {
325
352
  colors: {
326
353
  content1: {
327
354
  DEFAULT: '#FFFFFF',
355
+ foreground: '#000000',
328
356
  },
329
357
  overlay: {
330
358
  DEFAULT: '#FFFFFF',
359
+ foreground: '#000000',
331
360
  },
332
361
  background: {
333
362
  200: '#F0F0F2',
@@ -347,9 +376,15 @@ module.exports = {
347
376
  foreground: '#000000',
348
377
  },
349
378
  primary: {
350
- 600: '#6A3AB8',
351
- 700: '#4D2A86',
352
- 900: '#362349',
379
+ 100: '#F6EDF7',
380
+ 200: '#EBCCF0',
381
+ 300: '#E2A5EF',
382
+ 400: '#DC78F4',
383
+ 500: '#D745FF',
384
+ 600: '#C10DF9',
385
+ 700: '#900ABE',
386
+ 800: '#5F0A80',
387
+ 900: '#330845',
353
388
  DEFAULT: '#D745FF',
354
389
  foreground: '#FFFFFF',
355
390
  },
@@ -400,14 +435,16 @@ module.exports = {
400
435
  colors: {
401
436
  content1: {
402
437
  DEFAULT: '#17171C',
438
+ foreground: '#FFFFFF',
403
439
  },
404
440
  overlay: {
405
441
  DEFAULT: '#17171C',
442
+ foreground: '#FFFFFF',
406
443
  },
407
444
  background: {
408
445
  200: '#2A2A30',
409
446
  300: '#17171C',
410
- 400: '#19161B',
447
+ 400: '#171517',
411
448
  500: '#100E11',
412
449
  DEFAULT: '#100E11',
413
450
  },
@@ -418,13 +455,19 @@ module.exports = {
418
455
  DEFAULT: '#FDFDFE',
419
456
  },
420
457
  default: {
421
- DEFAULT: '#E8E8EB',
422
- foreground: '#FDFDFE',
458
+ DEFAULT: '#1F1F23',
459
+ foreground: '#FFFFFF',
423
460
  },
424
461
  primary: {
425
- 600: '#6A3AB8',
426
- 700: '#4D2A86',
427
- 900: '#362349',
462
+ 100: '#F6EDF7',
463
+ 200: '#EBCCF0',
464
+ 300: '#E2A5EF',
465
+ 400: '#DC78F4',
466
+ 500: '#D745FF',
467
+ 600: '#C10DF9',
468
+ 700: '#900ABE',
469
+ 800: '#5F0A80',
470
+ 900: '#330845',
428
471
  DEFAULT: '#D745FF',
429
472
  foreground: '#FFFFFF',
430
473
  },
@@ -475,9 +518,11 @@ module.exports = {
475
518
  colors: {
476
519
  content1: {
477
520
  DEFAULT: '#FFFFFF',
521
+ foreground: '#000000',
478
522
  },
479
523
  overlay: {
480
524
  DEFAULT: '#FFFFFF',
525
+ foreground: '#000000',
481
526
  },
482
527
  background: {
483
528
  200: '#E9E7EE',
@@ -487,28 +532,34 @@ module.exports = {
487
532
  DEFAULT: '#F6F6F6',
488
533
  },
489
534
  foreground: {
490
- 100: '#7B7B85',
491
- 300: '#363538',
492
- 500: '#0C0C0F',
493
- DEFAULT: '#0C0C0F',
535
+ 100: '#CFCFD7',
536
+ 300: '#3D3C3F',
537
+ 500: '#000000',
538
+ DEFAULT: '#000000',
494
539
  },
495
540
  default: {
496
541
  DEFAULT: '#E8E8EB',
497
- foreground: '#0C0C0F',
542
+ foreground: '#000000',
498
543
  },
499
544
  primary: {
500
- 600: '#6A3AB8',
501
- 700: '#4D2A86',
502
- 900: '#362349',
545
+ 100: '#F6EDF7',
546
+ 200: '#EBCCF0',
547
+ 300: '#E2A5EF',
548
+ 400: '#DC78F4',
549
+ 500: '#D745FF',
550
+ 600: '#C10DF9',
551
+ 700: '#900ABE',
552
+ 800: '#5F0A80',
553
+ 900: '#330845',
503
554
  DEFAULT: '#D745FF',
504
555
  foreground: '#FFFFFF',
505
556
  },
506
557
  secondary: {
507
- DEFAULT: '#363538',
558
+ DEFAULT: '#3D3C3F',
508
559
  foreground: '#FFFFFF',
509
560
  },
510
561
  tertiary: {
511
- DEFAULT: '#7B7B85',
562
+ DEFAULT: '#CFCFD7',
512
563
  foreground: '#000000',
513
564
  },
514
565
  success: {
@@ -550,31 +601,39 @@ module.exports = {
550
601
  colors: {
551
602
  content1: {
552
603
  DEFAULT: '#1A1B1F',
604
+ foreground: '#FFFFFF',
553
605
  },
554
606
  overlay: {
555
607
  DEFAULT: '#1A1B1F',
608
+ foreground: '#FFFFFF',
556
609
  },
557
610
  background: {
558
- 200: '#282A2E',
611
+ 200: '#1F2024',
559
612
  300: '#1A1B1F',
560
613
  400: '#111214',
561
614
  500: '#0C0C0F',
562
615
  DEFAULT: '#0C0C0F',
563
616
  },
564
617
  foreground: {
565
- 100: '#757E80',
618
+ 100: '#5D6466',
566
619
  300: '#C4CCCC',
567
620
  500: '#F0F5F5',
568
621
  DEFAULT: '#F0F5F5',
569
622
  },
570
623
  default: {
571
- DEFAULT: '#E8E8EB',
572
- foreground: '#F0F5F5',
624
+ DEFAULT: '#1F1F23',
625
+ foreground: '#FFFFFF',
573
626
  },
574
627
  primary: {
575
- 600: '#6A3AB8',
576
- 700: '#4D2A86',
577
- 900: '#362349',
628
+ 100: '#F0F5F2',
629
+ 200: '#D9EADF',
630
+ 300: '#C0E2CC',
631
+ 400: '#A4DCB6',
632
+ 500: '#86D99F',
633
+ 600: '#55C674',
634
+ 700: '#399D53',
635
+ 800: '#286938',
636
+ 900: '#16361D',
578
637
  DEFAULT: '#86D99F',
579
638
  foreground: '#000000',
580
639
  },
@@ -583,7 +642,7 @@ module.exports = {
583
642
  foreground: '#000000',
584
643
  },
585
644
  tertiary: {
586
- DEFAULT: '#757E80',
645
+ DEFAULT: '#5D6466',
587
646
  foreground: '#FFFFFF',
588
647
  },
589
648
  success: {
@@ -625,31 +684,39 @@ module.exports = {
625
684
  colors: {
626
685
  content1: {
627
686
  DEFAULT: '#18181A',
687
+ foreground: '#FFFFFF',
628
688
  },
629
689
  overlay: {
630
690
  DEFAULT: '#18181A',
691
+ foreground: '#FFFFFF',
631
692
  },
632
693
  background: {
633
- 200: '#333542',
694
+ 200: '#22242D',
634
695
  300: '#18181A',
635
696
  400: '#101114',
636
697
  500: '#0C0C0F',
637
698
  DEFAULT: '#0C0C0F',
638
699
  },
639
700
  foreground: {
640
- 100: '#777A8C',
701
+ 100: '#4A4D5E',
641
702
  300: '#C8C9D1',
642
703
  500: '#FCFCFC',
643
704
  DEFAULT: '#FCFCFC',
644
705
  },
645
706
  default: {
646
- DEFAULT: '#E8E8EB',
647
- foreground: '#FCFCFC',
707
+ DEFAULT: '#1F1F23',
708
+ foreground: '#FFFFFF',
648
709
  },
649
710
  primary: {
650
- 600: '#6A3AB8',
651
- 700: '#4D2A86',
652
- 900: '#362349',
711
+ 100: '#EDEEF7',
712
+ 200: '#CFD2F1',
713
+ 300: '#ABB3F0',
714
+ 400: '#8192F5',
715
+ 500: '#526FFF',
716
+ 600: '#1741F9',
717
+ 700: '#0A31C4',
718
+ 800: '#0B2683',
719
+ 900: '#081745',
653
720
  DEFAULT: '#526FFF',
654
721
  foreground: '#000000',
655
722
  },
@@ -658,7 +725,7 @@ module.exports = {
658
725
  foreground: '#000000',
659
726
  },
660
727
  tertiary: {
661
- DEFAULT: '#777A8C',
728
+ DEFAULT: '#4A4D5E',
662
729
  foreground: '#FFFFFF',
663
730
  },
664
731
  success: {
@@ -674,7 +741,7 @@ module.exports = {
674
741
  foreground: '#000000',
675
742
  },
676
743
  divider: {
677
- DEFAULT: '#333542',
744
+ DEFAULT: '#25272E',
678
745
  foreground: '#FFFFFF',
679
746
  },
680
747
  alert: {
@@ -700,16 +767,18 @@ module.exports = {
700
767
  colors: {
701
768
  content1: {
702
769
  DEFAULT: '#1B2429',
770
+ foreground: '#FFFFFF',
703
771
  },
704
772
  overlay: {
705
773
  DEFAULT: '#1B2429',
774
+ foreground: '#FFFFFF',
706
775
  },
707
776
  background: {
708
- 200: '#273035',
777
+ 200: '#222D33',
709
778
  300: '#1B2429',
710
779
  400: '#0F1A1F',
711
- 500: '#0F1A1F',
712
- DEFAULT: '#0F1A1F',
780
+ 500: '#0A1318',
781
+ DEFAULT: '#0A1318',
713
782
  },
714
783
  foreground: {
715
784
  100: '#949E9C',
@@ -718,13 +787,19 @@ module.exports = {
718
787
  DEFAULT: '#F6FEFD',
719
788
  },
720
789
  default: {
721
- DEFAULT: '#E8E8EB',
722
- foreground: '#F6FEFD',
790
+ DEFAULT: '#1F1F23',
791
+ foreground: '#FFFFFF',
723
792
  },
724
793
  primary: {
725
- 600: '#6A3AB8',
726
- 700: '#4D2A86',
727
- 900: '#362349',
794
+ 100: '#EFF5F5',
795
+ 200: '#CEE6E4',
796
+ 300: '#A8DBD6',
797
+ 400: '#7ED4CB',
798
+ 500: '#50D2C1',
799
+ 600: '#34B9A5',
800
+ 700: '#2B8C7C',
801
+ 800: '#206255',
802
+ 900: '#143831',
728
803
  DEFAULT: '#50D2C1',
729
804
  foreground: '#000000',
730
805
  },
@@ -734,7 +809,7 @@ module.exports = {
734
809
  },
735
810
  tertiary: {
736
811
  DEFAULT: '#949E9C',
737
- foreground: '#FFFFFF',
812
+ foreground: '#000000',
738
813
  },
739
814
  success: {
740
815
  DEFAULT: '#1FA67D',
@@ -749,7 +824,7 @@ module.exports = {
749
824
  foreground: '#000000',
750
825
  },
751
826
  divider: {
752
- DEFAULT: '#444651',
827
+ DEFAULT: '#394145',
753
828
  foreground: '#FFFFFF',
754
829
  },
755
830
  alert: {
@@ -775,31 +850,39 @@ module.exports = {
775
850
  colors: {
776
851
  content1: {
777
852
  DEFAULT: '#272735',
853
+ foreground: '#FFFFFF',
778
854
  },
779
855
  overlay: {
780
856
  DEFAULT: '#272735',
857
+ foreground: '#FFFFFF',
781
858
  },
782
859
  background: {
783
- 200: '#222222',
860
+ 200: '#2C2C38',
784
861
  300: '#272735',
785
862
  400: '#22212A',
786
863
  500: '#13121A',
787
864
  DEFAULT: '#13121A',
788
865
  },
789
866
  foreground: {
790
- 100: '#757E80',
867
+ 100: '#54515E',
791
868
  300: '#999999',
792
869
  500: '#FFFFFF',
793
870
  DEFAULT: '#FFFFFF',
794
871
  },
795
872
  default: {
796
- DEFAULT: '#E8E8EB',
873
+ DEFAULT: '#1F1F23',
797
874
  foreground: '#FFFFFF',
798
875
  },
799
876
  primary: {
800
- 600: '#6A3AB8',
801
- 700: '#4D2A86',
802
- 900: '#362349',
877
+ 100: '#F0EEF6',
878
+ 200: '#E2DEF2',
879
+ 300: '#D2CBEF',
880
+ 400: '#C0B6EF',
881
+ 500: '#AB9FF2',
882
+ 600: '#6C5BE5',
883
+ 700: '#3626C9',
884
+ 800: '#241C82',
885
+ 900: '#120F3E',
803
886
  DEFAULT: '#AB9FF2',
804
887
  foreground: '#000000',
805
888
  },
@@ -808,7 +891,7 @@ module.exports = {
808
891
  foreground: '#000000',
809
892
  },
810
893
  tertiary: {
811
- DEFAULT: '#757E80',
894
+ DEFAULT: '#54515E',
812
895
  foreground: '#FFFFFF',
813
896
  },
814
897
  success: {
@@ -850,31 +933,39 @@ module.exports = {
850
933
  colors: {
851
934
  content1: {
852
935
  DEFAULT: '#202630',
936
+ foreground: '#FFFFFF',
853
937
  },
854
938
  overlay: {
855
939
  DEFAULT: '#202630',
940
+ foreground: '#FFFFFF',
856
941
  },
857
942
  background: {
858
- 200: '#29313D',
943
+ 200: '#252B36',
859
944
  300: '#202630',
860
945
  400: '#181A20',
861
946
  500: '#0B0E11',
862
947
  DEFAULT: '#0B0E11',
863
948
  },
864
949
  foreground: {
865
- 100: '#707A8A',
950
+ 100: '#444A56',
866
951
  300: '#929AA5',
867
952
  500: '#EAECEF',
868
953
  DEFAULT: '#EAECEF',
869
954
  },
870
955
  default: {
871
- DEFAULT: '#E8E8EB',
872
- foreground: '#EAECEF',
956
+ DEFAULT: '#1F1F23',
957
+ foreground: '#FFFFFF',
873
958
  },
874
959
  primary: {
875
- 600: '#6A3AB8',
876
- 700: '#4D2A86',
877
- 900: '#362349',
960
+ 100: '#F7F6ED',
961
+ 200: '#EFEAC9',
962
+ 300: '#EDE09E',
963
+ 400: '#F1DA6D',
964
+ 500: '#FCD535',
965
+ 600: '#EEBD0A',
966
+ 700: '#B38B0C',
967
+ 800: '#7A5D0C',
968
+ 900: '#443309',
878
969
  DEFAULT: '#FCD535',
879
970
  foreground: '#000000',
880
971
  },
@@ -883,7 +974,7 @@ module.exports = {
883
974
  foreground: '#000000',
884
975
  },
885
976
  tertiary: {
886
- DEFAULT: '#707A8A',
977
+ DEFAULT: '#444A56',
887
978
  foreground: '#FFFFFF',
888
979
  },
889
980
  success: {
@@ -924,32 +1015,40 @@ module.exports = {
924
1015
  extend: 'dark',
925
1016
  colors: {
926
1017
  content1: {
927
- DEFAULT: '#0D0D10',
1018
+ DEFAULT: '#15171A',
1019
+ foreground: '#FFFFFF',
928
1020
  },
929
1021
  overlay: {
930
- DEFAULT: '#0D0D10',
1022
+ DEFAULT: '#15171A',
1023
+ foreground: '#FFFFFF',
931
1024
  },
932
1025
  background: {
933
1026
  200: '#1B1D22',
934
- 300: '#0D0D10',
1027
+ 300: '#15171A',
935
1028
  400: '#0F0F0F',
936
1029
  500: '#09090B',
937
1030
  DEFAULT: '#09090B',
938
1031
  },
939
1032
  foreground: {
940
- 100: '#686a6d',
1033
+ 100: '#4B4D51',
941
1034
  300: '#98989B',
942
1035
  500: '#E9E9E9',
943
1036
  DEFAULT: '#E9E9E9',
944
1037
  },
945
1038
  default: {
946
- DEFAULT: '#E8E8EB',
947
- foreground: '#E9E9E9',
1039
+ DEFAULT: '#1F1F23',
1040
+ foreground: '#FFFFFF',
948
1041
  },
949
1042
  primary: {
950
- 600: '#6A3AB8',
951
- 700: '#4D2A86',
952
- 900: '#362349',
1043
+ 100: '#EFF6F3',
1044
+ 200: '#D2E9DE',
1045
+ 300: '#B0E1C9',
1046
+ 400: '#8BDCB3',
1047
+ 500: '#61DC9B',
1048
+ 600: '#34CD79',
1049
+ 700: '#2A9B5A',
1050
+ 800: '#1F693E',
1051
+ 900: '#133A22',
953
1052
  DEFAULT: '#61DC9B',
954
1053
  foreground: '#000000',
955
1054
  },
@@ -958,16 +1057,16 @@ module.exports = {
958
1057
  foreground: '#000000',
959
1058
  },
960
1059
  tertiary: {
961
- DEFAULT: '#686a6d',
1060
+ DEFAULT: '#4B4D51',
962
1061
  foreground: '#FFFFFF',
963
1062
  },
964
1063
  success: {
965
1064
  DEFAULT: '#459C6E',
966
- foreground: '#000000',
1065
+ foreground: '#FFFFFF',
967
1066
  },
968
1067
  danger: {
969
1068
  DEFAULT: '#A13C45',
970
- foreground: '#000000',
1069
+ foreground: '#FFFFFF',
971
1070
  },
972
1071
  warning: {
973
1072
  DEFAULT: '#DCC161',
@@ -987,11 +1086,11 @@ module.exports = {
987
1086
  },
988
1087
  bullish: {
989
1088
  DEFAULT: '#459C6E',
990
- foreground: '#000000',
1089
+ foreground: '#FFFFFF',
991
1090
  },
992
1091
  bearish: {
993
1092
  DEFAULT: '#A13C45',
994
- foreground: '#000000',
1093
+ foreground: '#FFFFFF',
995
1094
  },
996
1095
  },
997
1096
  },
@@ -1014,7 +1113,7 @@ module.exports = {
1014
1113
  addVariant('max-2xh', '@media (max-height: 1300px)');
1015
1114
 
1016
1115
  // light mode variant
1017
- addVariant('light', '&:not(.dark *)');
1116
+ addVariant('light', '&:not([data-theme="dark"] *)');
1018
1117
 
1019
1118
  // button styles
1020
1119
  addComponents({
@@ -1064,7 +1163,7 @@ module.exports = {
1064
1163
  '.shadow-box': {
1065
1164
  boxShadow: '0px 2px 12px 0px rgba(23, 23, 28, 0.15)',
1066
1165
  },
1067
- '.dark .shadow-box': {
1166
+ '[data-theme="dark"] .shadow-box': {
1068
1167
  boxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.5)',
1069
1168
  },
1070
1169
  });
@@ -1,29 +0,0 @@
1
- export type ThemeId = 'ux-purple-gold-dark' | 'ux-purple-gold-light' | 'ux-green-red-dark' | 'ux-green-red-light' | 'ux-green-red-soft-dark' | 'ux-green-red-soft-light' | 'gmgn-dark' | 'axiom-dark' | 'hyperliquid-dark' | 'phantom-dark' | 'binance-dark' | 'bullx-dark';
2
- export type ColorScheme = 'dark' | 'light';
3
- export interface ThemeItemType {
4
- id: ThemeId;
5
- zhName: string;
6
- enName: string;
7
- colorScheme: ColorScheme;
8
- colorVariables: {
9
- foreground: string;
10
- secondary: string;
11
- tertiary: string;
12
- primary: string;
13
- success: string;
14
- danger: string;
15
- alert: string;
16
- warning: string;
17
- gold: string;
18
- background: string;
19
- 'background-200': string;
20
- 'background-300': string;
21
- 'background-400': string;
22
- overlay: string;
23
- divider: string;
24
- bullish: string;
25
- bearish: string;
26
- };
27
- }
28
- export declare const themeData: ThemeItemType[];
29
- export declare const themeKeys: ThemeId[];