@particle-network/ui-react 0.4.0-beta.14 → 0.4.0-beta.16

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.
@@ -43,7 +43,7 @@ export declare const UXInput: React.ForwardRefExoticComponent<Omit<Omit<{
43
43
  vocab?: string | undefined;
44
44
  autoCorrect?: string | undefined;
45
45
  autoSave?: string | undefined;
46
- color?: "default" | "secondary" | "primary" | "success" | "danger" | "warning" | "bullish" | "bearish" | undefined;
46
+ color?: "default" | "success" | "secondary" | "primary" | "danger" | "warning" | "bullish" | "bearish" | undefined;
47
47
  itemProp?: string | undefined;
48
48
  itemScope?: boolean | undefined;
49
49
  itemType?: string | undefined;
@@ -40,7 +40,7 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<Omit<{
40
40
  vocab?: string | undefined;
41
41
  autoCorrect?: string | undefined;
42
42
  autoSave?: string | undefined;
43
- color?: "default" | "secondary" | "primary" | "success" | "danger" | "warning" | "bullish" | "bearish" | undefined;
43
+ color?: "default" | "success" | "secondary" | "primary" | "danger" | "warning" | "bullish" | "bearish" | undefined;
44
44
  itemProp?: string | undefined;
45
45
  itemScope?: boolean | undefined;
46
46
  itemType?: string | undefined;
@@ -42,7 +42,7 @@ export declare const UXSwitch: React.ForwardRefExoticComponent<Omit<Omit<{
42
42
  vocab?: string | undefined;
43
43
  autoCorrect?: string | undefined;
44
44
  autoSave?: string | undefined;
45
- color?: "default" | "secondary" | "primary" | "success" | "danger" | "warning" | "bullish" | "bearish" | "contrast" | undefined;
45
+ color?: "default" | "success" | "secondary" | "primary" | "danger" | "warning" | "bullish" | "bearish" | "contrast" | undefined;
46
46
  itemProp?: string | undefined;
47
47
  itemScope?: boolean | undefined;
48
48
  itemType?: string | undefined;
@@ -39,7 +39,7 @@ declare const ExtendedSwitch: import("react").ForwardRefExoticComponent<Omit<{
39
39
  vocab?: string | undefined;
40
40
  autoCorrect?: string | undefined;
41
41
  autoSave?: string | undefined;
42
- color?: "default" | "secondary" | "primary" | "success" | "danger" | "warning" | "bullish" | "bearish" | "contrast" | undefined;
42
+ color?: "default" | "success" | "secondary" | "primary" | "danger" | "warning" | "bullish" | "bearish" | "contrast" | undefined;
43
43
  itemProp?: string | undefined;
44
44
  itemScope?: boolean | undefined;
45
45
  itemType?: string | undefined;
@@ -43,7 +43,7 @@ export declare const UXTable: import("@heroui/system-rsc").InternalForwardRefRen
43
43
  vocab?: string | undefined;
44
44
  autoCorrect?: string | undefined;
45
45
  autoSave?: string | undefined;
46
- color?: "default" | "secondary" | "primary" | "success" | "danger" | "warning" | undefined;
46
+ color?: "default" | "success" | "secondary" | "primary" | "danger" | "warning" | undefined;
47
47
  itemProp?: string | undefined;
48
48
  itemScope?: boolean | undefined;
49
49
  itemType?: string | undefined;
@@ -40,7 +40,7 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<Omit<{
40
40
  vocab?: string | undefined;
41
41
  autoCorrect?: string | undefined;
42
42
  autoSave?: string | undefined;
43
- color?: "default" | "secondary" | "primary" | "success" | "danger" | "warning" | undefined;
43
+ color?: "default" | "success" | "secondary" | "primary" | "danger" | "warning" | undefined;
44
44
  itemProp?: string | undefined;
45
45
  itemScope?: boolean | undefined;
46
46
  itemType?: string | undefined;
@@ -1,4 +1,3 @@
1
- export * from './theme-data';
2
1
  export * from './theme-switch';
3
2
  export * from './use-color-scheme';
4
3
  export * from './use-theme';
@@ -1,4 +1,3 @@
1
- export * from "./theme-data.js";
2
1
  export * from "./theme-switch.js";
3
2
  export * from "./use-color-scheme.js";
4
3
  export * from "./use-theme.js";
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { ThemeItemType } from './theme-data';
2
+ import type { ThemeItemType } from '@particle-network/ui-shared';
3
3
  export interface ThemeItemProps extends ThemeItemType {
4
4
  isSelected: boolean;
5
5
  onClick: () => void;
@@ -3,6 +3,7 @@ import "react";
3
3
  import { Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader } from "@heroui/drawer";
4
4
  import { useDisclosure } from "@heroui/use-disclosure";
5
5
  import { ChartColorSwitchIcon } from "@particle-network/icons/web";
6
+ import { themeData } from "@particle-network/ui-shared";
6
7
  import { useI18n } from "../../hooks/index.js";
7
8
  import { Flex, HStack, VStack } from "../layout/index.js";
8
9
  import { Text } from "../typography/Text.js";
@@ -10,7 +11,6 @@ import { UXButton } from "../UXButton/index.js";
10
11
  import { UXDivider } from "../UXDivider/index.js";
11
12
  import { UXInput } from "../UXInput/index.js";
12
13
  import { UXSpinner } from "../UXSpinner/index.js";
13
- import { themeData } from "./theme-data.js";
14
14
  import { ThemeItem } from "./theme-item.js";
15
15
  import { useTheme } from "./use-theme.js";
16
16
  const UXThemeSwitchDrawer = ({ isOpen, onClose, onOpenChange, ...props })=>{
@@ -1,5 +1,5 @@
1
1
  export declare const useColorScheme: () => {
2
- colorScheme: import("./theme-data").ColorScheme;
2
+ colorScheme: import("@particle-network/ui-shared").ColorScheme;
3
3
  isDark: boolean;
4
4
  isLight: boolean;
5
5
  };
@@ -1,4 +1,4 @@
1
- import { type ThemeItemType } from './theme-data';
1
+ import { type ThemeItemType } from '@particle-network/ui-shared';
2
2
  export type FontLoadStatus = 'idle' | 'loading' | 'success' | 'error';
3
3
  interface State {
4
4
  /**
@@ -1,6 +1,6 @@
1
+ import { themeData } from "@particle-network/ui-shared";
1
2
  import { create } from "zustand";
2
3
  import { createJSONStorage, persist } from "zustand/middleware";
3
- import { themeData } from "./theme-data.js";
4
4
  const useThemeStore = create()(persist((set)=>({
5
5
  selectedTheme: themeData["0"],
6
6
  savedTheme: themeData["0"],
@@ -1,4 +1,4 @@
1
- import { type ThemeItemType } from './theme-data';
1
+ import { type ThemeItemType } from '@particle-network/ui-shared';
2
2
  import { type FontLoadStatus } from './use-theme-store';
3
3
  /**
4
4
  * UX 主题管理 Hook
@@ -1,6 +1,6 @@
1
1
  import { useEffect } from "react";
2
+ import { themeKeys } from "@particle-network/ui-shared";
2
3
  import { useDebounceFn } from "ahooks";
3
- import { themeKeys } from "./theme-data.js";
4
4
  import { useThemeStore } from "./use-theme-store.js";
5
5
  const DEFAULT_FONT_FAMILY = 'ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji';
6
6
  const applyTheme = (theme)=>{
@@ -1,13 +1,15 @@
1
+ import type { ReactNode } from 'react';
1
2
  import type { ToastProps } from '@heroui/toast';
2
- export type UXToastType = 'success' | 'error' | 'loading';
3
+ export type UXToastType = 'success' | 'error' | 'loading' | 'info';
3
4
  export type UXToastProps = Partial<ToastProps> & {
4
5
  type: UXToastType;
5
6
  };
6
7
  export declare const UXToastProvider: () => import("react/jsx-runtime").JSX.Element;
7
8
  export declare const toast: {
8
- success: (message: string, props?: Partial<ToastProps>) => string | null;
9
- error: (message: string, props?: Partial<ToastProps>) => string | null;
10
- loading: (message: string, props?: Partial<ToastProps>) => string | null;
9
+ info: (message: ReactNode, props?: Partial<ToastProps>) => string | null;
10
+ success: (message: ReactNode, props?: Partial<ToastProps>) => string | null;
11
+ error: (message: ReactNode, props?: Partial<ToastProps>) => string | null;
12
+ loading: (message: ReactNode, props?: Partial<ToastProps>) => string | null;
11
13
  show: (props?: Partial<ToastProps> & {
12
14
  type: UXToastType;
13
15
  }) => string | null;
@@ -9,33 +9,35 @@ const UXToastProvider = ()=>/*#__PURE__*/ jsx(ToastProvider, {
9
9
  disableAnimation: true,
10
10
  placement: "top-center",
11
11
  maxVisibleToasts: 4,
12
- toastOffset: 40,
13
12
  toastProps: {
14
13
  timeout: 4000
15
14
  },
16
15
  regionProps: {
17
- className: 'items-center py-10'
16
+ className: 'items-center mt-12 p-0 gap-2'
18
17
  }
19
18
  });
20
19
  const getIcon = (type)=>{
21
20
  if ('success' === type) return /*#__PURE__*/ jsx(CircleCheckIcon, {
22
- size: 18
21
+ size: 18,
22
+ color: "success"
23
23
  });
24
24
  if ('error' === type) return /*#__PURE__*/ jsx(CircleCloseIcon, {
25
- size: 18
25
+ size: 18,
26
+ color: "danger"
26
27
  });
27
28
  if ('loading' === type) return /*#__PURE__*/ jsx(UXSpinner, {
29
+ color: "primary",
28
30
  size: 18
29
31
  });
30
32
  return null;
31
33
  };
32
34
  const show = (props)=>{
33
- const { type, hideCloseButton, variant, classNames, description, ...toastProps } = props ?? {};
34
- const { base, description: descriptionClassName, icon, loadingComponent, content, closeButton, ...restClassNames } = classNames ?? {};
35
+ const { type, hideCloseButton, icon, variant, classNames, description, ...toastProps } = props ?? {};
36
+ const { base, description: descriptionClassName, icon: iconClassName, loadingComponent, content, closeButton, ...restClassNames } = classNames ?? {};
35
37
  return addToast({
36
38
  classNames: {
37
39
  base: [
38
- 'bg-tertiary rounded-xl px-3.5 py-3 shadow-none border-none !w-fit max-w-[90vw] md:max-w-[400px]',
40
+ 'bg-tertiary rounded-xl px-3.5 py-3 shadow-none border-none !w-fit max-w-[90vw] md:max-w-[400px] m-0',
39
41
  !hideCloseButton && 'pr-12',
40
42
  'flat' === variant && 'success' === type && 'bg-[#0E3728]',
41
43
  'flat' === variant && 'error' === type && 'bg-[#501D1D]',
@@ -48,11 +50,8 @@ const show = (props)=>{
48
50
  descriptionClassName
49
51
  ],
50
52
  icon: [
51
- 'shrink-0 h-5 w-5',
52
- 'success' === type && 'text-success',
53
- 'error' === type && 'text-danger',
54
- 'loading' === type && 'text-primary',
55
- icon
53
+ 'h-fit w-fit shrink-0',
54
+ iconClassName
56
55
  ],
57
56
  loadingComponent: [
58
57
  'text-primary h-5 w-5',
@@ -70,18 +69,24 @@ const show = (props)=>{
70
69
  ...restClassNames
71
70
  },
72
71
  description,
73
- icon: getIcon(type),
72
+ icon: icon ?? getIcon(type),
73
+ hideIcon: !icon && !getIcon(type),
74
74
  closeIcon: /*#__PURE__*/ jsx(CloseIcon, {
75
75
  className: 'flat' === variant ? 'text-white' : 'text-foreground'
76
76
  }),
77
77
  loadingComponent: /*#__PURE__*/ jsx(UXSpinner, {
78
78
  size: 18
79
79
  }),
80
- timeout: 'loading' === type ? 1 / 0 : 3000,
80
+ timeout: 'loading' === type ? 1 / 0 : 4000,
81
81
  ...toastProps
82
82
  });
83
83
  };
84
84
  const toast = {
85
+ info: (message, props)=>show({
86
+ type: 'info',
87
+ description: message,
88
+ ...props
89
+ }),
85
90
  success: (message, props)=>show({
86
91
  type: 'success',
87
92
  description: message,
@@ -95,7 +100,6 @@ const toast = {
95
100
  loading: (message, props)=>show({
96
101
  type: 'loading',
97
102
  description: message,
98
- timeout: 1 / 0,
99
103
  ...props
100
104
  }),
101
105
  show,
@@ -39,7 +39,7 @@ declare const ExtendedTooltip: import("react").ForwardRefExoticComponent<Omit<{
39
39
  vocab?: string | undefined;
40
40
  autoCorrect?: string | undefined;
41
41
  autoSave?: string | undefined;
42
- color?: "default" | "foreground" | "secondary" | "primary" | "success" | "danger" | "warning" | undefined;
42
+ color?: "default" | "success" | "foreground" | "secondary" | "primary" | "danger" | "warning" | undefined;
43
43
  itemProp?: string | undefined;
44
44
  itemScope?: boolean | undefined;
45
45
  itemType?: string | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@particle-network/ui-react",
3
- "version": "0.4.0-beta.14",
3
+ "version": "0.4.0-beta.16",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {
@@ -39,8 +39,8 @@
39
39
  "@types/react": "^19.1.10",
40
40
  "react": "^19.1.0",
41
41
  "typescript": "^5.8.3",
42
- "@particle-network/lintstaged-config": "0.1.0",
43
- "@particle-network/eslint-config": "0.3.0"
42
+ "@particle-network/eslint-config": "0.3.0",
43
+ "@particle-network/lintstaged-config": "0.1.0"
44
44
  },
45
45
  "peerDependencies": {
46
46
  "react": ">=16.9.0",
@@ -50,8 +50,8 @@
50
50
  "ahooks": "^3.9.4",
51
51
  "copy-to-clipboard": "^3.3.3",
52
52
  "zustand": "^5.0.8",
53
- "@particle-network/icons": "0.4.0-beta.7",
54
- "@particle-network/ui-shared": "0.3.0-beta.2"
53
+ "@particle-network/icons": "0.4.0-beta.9",
54
+ "@particle-network/ui-shared": "0.3.0-beta.3"
55
55
  },
56
56
  "scripts": {
57
57
  "build": "rslib build",
@@ -127,9 +127,15 @@ module.exports = {
127
127
  foreground: '#FFFFFF',
128
128
  },
129
129
  primary: {
130
- 600: '#6A3AB8',
131
- 700: '#4D2A86',
132
- 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',
133
139
  DEFAULT: '#D745FF',
134
140
  foreground: '#FFFFFF',
135
141
  },
@@ -204,9 +210,15 @@ module.exports = {
204
210
  foreground: '#000000',
205
211
  },
206
212
  primary: {
207
- 600: '#6A3AB8',
208
- 700: '#4D2A86',
209
- 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',
210
222
  DEFAULT: '#D745FF',
211
223
  foreground: '#FFFFFF',
212
224
  },
@@ -281,9 +293,15 @@ module.exports = {
281
293
  foreground: '#FFFFFF',
282
294
  },
283
295
  primary: {
284
- 600: '#6A3AB8',
285
- 700: '#4D2A86',
286
- 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',
287
305
  DEFAULT: '#D745FF',
288
306
  foreground: '#FFFFFF',
289
307
  },
@@ -358,9 +376,15 @@ module.exports = {
358
376
  foreground: '#000000',
359
377
  },
360
378
  primary: {
361
- 600: '#6A3AB8',
362
- 700: '#4D2A86',
363
- 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',
364
388
  DEFAULT: '#D745FF',
365
389
  foreground: '#FFFFFF',
366
390
  },
@@ -435,9 +459,15 @@ module.exports = {
435
459
  foreground: '#FDFDFE',
436
460
  },
437
461
  primary: {
438
- 600: '#6A3AB8',
439
- 700: '#4D2A86',
440
- 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',
441
471
  DEFAULT: '#D745FF',
442
472
  foreground: '#FFFFFF',
443
473
  },
@@ -512,9 +542,15 @@ module.exports = {
512
542
  foreground: '#0C0C0F',
513
543
  },
514
544
  primary: {
515
- 600: '#6A3AB8',
516
- 700: '#4D2A86',
517
- 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',
518
554
  DEFAULT: '#D745FF',
519
555
  foreground: '#FFFFFF',
520
556
  },
@@ -589,9 +625,15 @@ module.exports = {
589
625
  foreground: '#F0F5F5',
590
626
  },
591
627
  primary: {
592
- 600: '#6A3AB8',
593
- 700: '#4D2A86',
594
- 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',
595
637
  DEFAULT: '#86D99F',
596
638
  foreground: '#000000',
597
639
  },
@@ -666,9 +708,15 @@ module.exports = {
666
708
  foreground: '#FCFCFC',
667
709
  },
668
710
  primary: {
669
- 600: '#6A3AB8',
670
- 700: '#4D2A86',
671
- 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',
672
720
  DEFAULT: '#526FFF',
673
721
  foreground: '#000000',
674
722
  },
@@ -743,9 +791,15 @@ module.exports = {
743
791
  foreground: '#F6FEFD',
744
792
  },
745
793
  primary: {
746
- 600: '#6A3AB8',
747
- 700: '#4D2A86',
748
- 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',
749
803
  DEFAULT: '#50D2C1',
750
804
  foreground: '#000000',
751
805
  },
@@ -820,9 +874,15 @@ module.exports = {
820
874
  foreground: '#FFFFFF',
821
875
  },
822
876
  primary: {
823
- 600: '#6A3AB8',
824
- 700: '#4D2A86',
825
- 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',
826
886
  DEFAULT: '#AB9FF2',
827
887
  foreground: '#000000',
828
888
  },
@@ -897,9 +957,15 @@ module.exports = {
897
957
  foreground: '#EAECEF',
898
958
  },
899
959
  primary: {
900
- 600: '#6A3AB8',
901
- 700: '#4D2A86',
902
- 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',
903
969
  DEFAULT: '#FCD535',
904
970
  foreground: '#000000',
905
971
  },
@@ -974,9 +1040,15 @@ module.exports = {
974
1040
  foreground: '#E9E9E9',
975
1041
  },
976
1042
  primary: {
977
- 600: '#6A3AB8',
978
- 700: '#4D2A86',
979
- 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',
980
1052
  DEFAULT: '#61DC9B',
981
1053
  foreground: '#000000',
982
1054
  },
@@ -1,12 +0,0 @@
1
- import type { UXColor } from '@particle-network/ui-shared';
2
- 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';
3
- export type ColorScheme = 'dark' | 'light';
4
- export interface ThemeItemType {
5
- id: ThemeId;
6
- zhName: string;
7
- enName: string;
8
- colorScheme: ColorScheme;
9
- colorVariables: Record<UXColor, string>;
10
- }
11
- export declare const themeData: ThemeItemType[];
12
- export declare const themeKeys: ThemeId[];
@@ -1,340 +0,0 @@
1
- const themeData = [
2
- {
3
- id: 'ux-purple-gold-dark',
4
- zhName: 'UX 紫金 Dark',
5
- enName: 'UX Purple/Gold Dark',
6
- colorScheme: 'dark',
7
- colorVariables: {
8
- default: '#FFFFFF',
9
- white: '#FFFFFF',
10
- transparent: 'transparent',
11
- foreground: '#FFFFFF',
12
- secondary: '#A1A1AA',
13
- tertiary: '#4E4E56',
14
- primary: '#D745FF',
15
- success: '#45B167',
16
- danger: '#E84A5A',
17
- alert: '#F57733',
18
- warning: '#FF9821',
19
- gold: '#FFB800',
20
- 'bg-default': '#000000',
21
- 'bg-200': '#1F1F23',
22
- 'bg-300': '#17171C',
23
- 'bg-400': '#0F0F0F',
24
- overlay: '#17171C',
25
- divider: '#282828',
26
- bullish: '#D745FF',
27
- bearish: '#FFAC34'
28
- }
29
- },
30
- {
31
- id: 'ux-purple-gold-light',
32
- zhName: 'UX 紫金 Light',
33
- enName: 'UX Purple/Gold Light',
34
- colorScheme: 'light',
35
- colorVariables: {
36
- default: '#000000',
37
- white: '#FFFFFF',
38
- transparent: 'transparent',
39
- foreground: '#000000',
40
- secondary: '#767A80',
41
- tertiary: '#D8D8DE',
42
- primary: '#D745FF',
43
- success: '#2E9F4A',
44
- danger: '#DE4A40',
45
- alert: '#E65E16',
46
- warning: '#FF9821',
47
- gold: '#F38300',
48
- 'bg-default': '#F8F8FA',
49
- 'bg-200': '#F0F0F2',
50
- 'bg-300': '#F8F8FA',
51
- 'bg-400': '#FFFFFF',
52
- overlay: '#FFFFFF',
53
- divider: '#E8E8ED',
54
- bullish: '#D745FF',
55
- bearish: '#F9A01E'
56
- }
57
- },
58
- {
59
- id: 'ux-green-red-dark',
60
- zhName: 'UX 绿红 Dark',
61
- enName: 'UX Green/Red Dark',
62
- colorScheme: 'dark',
63
- colorVariables: {
64
- default: '#FFFFFF',
65
- white: '#FFFFFF',
66
- transparent: 'transparent',
67
- foreground: '#FFFFFF',
68
- secondary: '#A1A1AA',
69
- tertiary: '#4E4E56',
70
- primary: '#D745FF',
71
- success: '#45B167',
72
- danger: '#E84A5A',
73
- alert: '#F57733',
74
- warning: '#FF9821',
75
- gold: '#FFB800',
76
- 'bg-default': '#000000',
77
- 'bg-200': '#1F1F23',
78
- 'bg-300': '#17171C',
79
- 'bg-400': '#0F0F0F',
80
- overlay: '#17171C',
81
- divider: '#282828',
82
- bullish: '#45B167',
83
- bearish: '#E84A5A'
84
- }
85
- },
86
- {
87
- id: 'ux-green-red-light',
88
- zhName: 'UX 绿红 Light',
89
- enName: 'UX Green/Red Light',
90
- colorScheme: 'light',
91
- colorVariables: {
92
- default: '#000000',
93
- white: '#FFFFFF',
94
- transparent: 'transparent',
95
- foreground: '#000000',
96
- secondary: '#767A80',
97
- tertiary: '#D8D8DE',
98
- primary: '#D745FF',
99
- success: '#2E9F4A',
100
- danger: '#DE4A40',
101
- alert: '#E65E16',
102
- warning: '#FF9821',
103
- gold: '#F38300',
104
- 'bg-default': '#F8F8FA',
105
- 'bg-200': '#F0F0F2',
106
- 'bg-300': '#F8F8FA',
107
- 'bg-400': '#FFFFFF',
108
- overlay: '#FFFFFF',
109
- divider: '#E8E8ED',
110
- bullish: '#45B167',
111
- bearish: '#E84A5A'
112
- }
113
- },
114
- {
115
- id: 'ux-green-red-soft-dark',
116
- zhName: 'UX 柔和 Dark',
117
- enName: 'UX Soft Dark',
118
- colorScheme: 'dark',
119
- colorVariables: {
120
- default: '#FDFDFE',
121
- white: '#FFFFFF',
122
- transparent: 'transparent',
123
- foreground: '#FDFDFE',
124
- secondary: '#BBBBC4',
125
- tertiary: '#70707C',
126
- primary: '#D745FF',
127
- success: '#73D090',
128
- danger: '#F46271',
129
- alert: '#F37A39',
130
- warning: '#F8BF63',
131
- gold: '#FFB800',
132
- 'bg-default': '#100E11',
133
- 'bg-200': '#2A2A30',
134
- 'bg-300': '#17171C',
135
- 'bg-400': '#19161B',
136
- overlay: '#17171C',
137
- divider: '#282828',
138
- bullish: '#73D090',
139
- bearish: '#F46271'
140
- }
141
- },
142
- {
143
- id: 'ux-green-red-soft-light',
144
- zhName: 'UX 柔和 Light',
145
- enName: 'UX Soft Light',
146
- colorScheme: 'light',
147
- colorVariables: {
148
- default: '#0C0C0F',
149
- white: '#FFFFFF',
150
- transparent: 'transparent',
151
- foreground: '#0C0C0F',
152
- secondary: '#363538',
153
- tertiary: '#7B7B85',
154
- primary: '#D745FF',
155
- success: '#19AB5E',
156
- danger: '#FF5868',
157
- alert: '#F07939',
158
- warning: '#F6932B',
159
- gold: '#FFB800',
160
- 'bg-default': '#F6F6F6',
161
- 'bg-200': '#E9E7EE',
162
- 'bg-300': '#F6F6F6',
163
- 'bg-400': '#FFFFFF',
164
- overlay: '#FFFFFF',
165
- divider: '#DAD7E0',
166
- bullish: '#19AB5E',
167
- bearish: '#FF5868'
168
- }
169
- },
170
- {
171
- id: 'gmgn-dark',
172
- zhName: 'GMGN',
173
- enName: 'GMGN',
174
- colorScheme: 'dark',
175
- colorVariables: {
176
- default: '#F0F5F5',
177
- white: '#FFFFFF',
178
- transparent: 'transparent',
179
- foreground: '#F0F5F5',
180
- secondary: '#C4CCCC',
181
- tertiary: '#757E80',
182
- primary: '#86D99F',
183
- success: '#86D99F',
184
- danger: '#F26682',
185
- alert: '#F55832',
186
- warning: '#EDB951',
187
- gold: '#F5DA54',
188
- 'bg-default': '#0C0C0F',
189
- 'bg-200': '#282A2E',
190
- 'bg-300': '#1A1B1F',
191
- 'bg-400': '#111214',
192
- overlay: '#1A1B1F',
193
- divider: '#282828',
194
- bullish: '#1DB069',
195
- bearish: '#DE4E52'
196
- }
197
- },
198
- {
199
- id: 'axiom-dark',
200
- zhName: 'AXIOM',
201
- enName: 'AXIOM',
202
- colorScheme: 'dark',
203
- colorVariables: {
204
- default: '#FCFCFC',
205
- white: '#FFFFFF',
206
- transparent: 'transparent',
207
- foreground: '#FCFCFC',
208
- secondary: '#C8C9D1',
209
- tertiary: '#777A8C',
210
- primary: '#526FFF',
211
- success: '#2FE3AC',
212
- danger: '#EC397A',
213
- alert: '#F57733',
214
- warning: '#F7931A',
215
- gold: '#F7931A',
216
- 'bg-default': '#0C0C0F',
217
- 'bg-200': '#333542',
218
- 'bg-300': '#18181A',
219
- 'bg-400': '#101114',
220
- overlay: '#18181A',
221
- divider: '#333542',
222
- bullish: '#0B9981',
223
- bearish: '#F23646'
224
- }
225
- },
226
- {
227
- id: 'hyperliquid-dark',
228
- zhName: 'Hyperliquid',
229
- enName: 'Hyperliquid',
230
- colorScheme: 'dark',
231
- colorVariables: {
232
- default: '#F6FEFD',
233
- white: '#FFFFFF',
234
- transparent: 'transparent',
235
- foreground: '#F6FEFD',
236
- secondary: '#D1D4DC',
237
- tertiary: '#949E9C',
238
- primary: '#50D2C1',
239
- success: '#1FA67D',
240
- danger: '#ED7088',
241
- alert: '#EF8F50',
242
- warning: '#FFB648',
243
- gold: '#FFB648',
244
- 'bg-default': '#0F1A1F',
245
- 'bg-200': '#273035',
246
- 'bg-300': '#1B2429',
247
- 'bg-400': '#0F1A1F',
248
- overlay: '#1B2429',
249
- divider: '#444651',
250
- bullish: '#51D2C1',
251
- bearish: '#D45B71'
252
- }
253
- },
254
- {
255
- id: 'phantom-dark',
256
- zhName: 'Phantom',
257
- enName: 'Phantom',
258
- colorScheme: 'dark',
259
- colorVariables: {
260
- default: '#FFFFFF',
261
- white: '#FFFFFF',
262
- transparent: 'transparent',
263
- foreground: '#FFFFFF',
264
- secondary: '#999999',
265
- tertiary: '#757E80',
266
- primary: '#AB9FF2',
267
- success: '#2EC08B',
268
- danger: '#F7525F',
269
- alert: '#FF9C3F',
270
- warning: '#FFD13F',
271
- gold: '#FFD13F',
272
- 'bg-default': '#13121A',
273
- 'bg-200': '#222222',
274
- 'bg-300': '#272735',
275
- 'bg-400': '#22212A',
276
- overlay: '#272735',
277
- divider: '#323232',
278
- bullish: '#2EC08B',
279
- bearish: '#FF7243'
280
- }
281
- },
282
- {
283
- id: 'binance-dark',
284
- zhName: 'Binance',
285
- enName: 'Binance',
286
- colorScheme: 'dark',
287
- colorVariables: {
288
- default: '#EAECEF',
289
- white: '#FFFFFF',
290
- transparent: 'transparent',
291
- foreground: '#EAECEF',
292
- secondary: '#929AA5',
293
- tertiary: '#707A8A',
294
- primary: '#FCD535',
295
- success: '#2EBD85',
296
- danger: '#F6465D',
297
- alert: '#FF693D',
298
- warning: '#F0B90B',
299
- gold: '#2DBD85',
300
- 'bg-default': '#0B0E11',
301
- 'bg-200': '#29313D',
302
- 'bg-300': '#202630',
303
- 'bg-400': '#181A20',
304
- overlay: '#202630',
305
- divider: '#343B47',
306
- bullish: '#2EBD85',
307
- bearish: '#F6465D'
308
- }
309
- },
310
- {
311
- id: 'bullx-dark',
312
- zhName: "Bullx's",
313
- enName: "Bullx's",
314
- colorScheme: 'dark',
315
- colorVariables: {
316
- default: '#E9E9E9',
317
- white: '#FFFFFF',
318
- transparent: 'transparent',
319
- foreground: '#E9E9E9',
320
- secondary: '#98989B',
321
- tertiary: '#686a6d',
322
- primary: '#61DC9B',
323
- success: '#459C6E',
324
- danger: '#A13C45',
325
- alert: '#E9BF52',
326
- warning: '#DCC161',
327
- gold: '#E9BF52',
328
- 'bg-default': '#09090B',
329
- 'bg-200': '#1B1D22',
330
- 'bg-300': '#0D0D10',
331
- 'bg-400': '#0F0F0F',
332
- overlay: '#0D0D10',
333
- divider: '#1E2025',
334
- bullish: '#459C6E',
335
- bearish: '#A13C45'
336
- }
337
- }
338
- ];
339
- const themeKeys = themeData.map((theme)=>theme.id);
340
- export { themeData, themeKeys };