@particle-network/ui-shared 0.4.1-beta.0 → 0.4.1-beta.1

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 (5) hide show
  1. package/dist/color.d.ts +6 -75
  2. package/dist/color.js +8 -120
  3. package/dist/theme-data.d.ts +19 -5
  4. package/dist/theme-data.js +385 -344
  5. package/package.json +3 -3
package/dist/color.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- export type UXForegroundColor = 'default' | 'white' | 'foreground' | 'secondary' | 'tertiary' | 'primary' | 'success' | 'danger' | 'alert' | 'warning' | 'gold' | 'bullish' | 'bearish';
2
- export type UXBackgroundColor = 'bg-default' | 'bg-300' | 'bg-200' | 'bg-400' | 'divider' | 'transparent' | 'overlay';
1
+ export type UXForegroundColor = 'default' | 'white' | 'foreground' | 'secondary' | 'tertiary' | 'primary' | 'success' | 'danger' | 'alert' | 'warning' | 'bullish' | 'bearish';
2
+ export type UXBackgroundColor = 'bg-pure' | 'bg-default' | 'bg-300' | 'bg-200' | 'bg-400' | 'divider' | 'transparent' | 'overlay';
3
3
  export type UXColor = UXForegroundColor | UXBackgroundColor;
4
+ export type UpDownColor = 'candleUp' | 'candleDown' | 'candleWickUp' | 'candleWickDown' | 'candleBorderUp' | 'candleBorderDown';
4
5
  export interface DynamicColors {
5
6
  bullish?: string;
6
7
  bearish?: string;
@@ -10,79 +11,9 @@ export declare const colorMap: Record<'dark' | 'light', Record<UXColor, string>>
10
11
  export declare const foregroundColorList: UXForegroundColor[];
11
12
  export declare const backgroundColorList: UXBackgroundColor[];
12
13
  export declare const uxColorList: UXColor[];
13
- export declare const colorToCSSVariable: {
14
- foreground: {
15
- self: string[];
16
- foreground: string;
17
- };
18
- secondary: {
19
- self: string[];
20
- foreground: string;
21
- };
22
- tertiary: {
23
- self: string[];
24
- foreground: string;
25
- };
26
- primary: {
27
- self: string[];
28
- foreground: string;
29
- };
30
- success: {
31
- self: string[];
32
- foreground: string;
33
- };
34
- danger: {
35
- self: string[];
36
- foreground: string;
37
- };
38
- alert: {
39
- self: string[];
40
- foreground: string;
41
- };
42
- warning: {
43
- self: string[];
44
- foreground: string;
45
- };
46
- gold: {
47
- self: string[];
48
- foreground: string;
49
- };
50
- bullish: {
51
- self: string[];
52
- foreground: string;
53
- };
54
- bearish: {
55
- self: string[];
56
- foreground: string;
57
- };
58
- 'bg-default': {
59
- self: string[];
60
- foreground: string;
61
- };
62
- 'bg-200': {
63
- self: string[];
64
- foreground: string;
65
- };
66
- 'bg-300': {
67
- self: string[];
68
- foreground: string;
69
- };
70
- 'bg-400': {
71
- self: string[];
72
- foreground: string;
73
- };
74
- overlay: {
75
- self: string[];
76
- foreground: string;
77
- };
78
- divider: {
79
- self: string[];
80
- foreground: string;
81
- };
82
- };
83
14
  export declare const colorToClassName: Record<UXColor, string>;
84
- export type ColorString = `#${string}`;
85
- export declare function hexColorToHSLValue(hex: ColorString): string;
86
- export declare function hexColorToHSL(hex: ColorString): string;
15
+ export type HexColor = `#${string}`;
16
+ export declare function hexColorToHSLValue(hex: HexColor): string;
17
+ export declare function hexColorToHSL(hex: HexColor): string;
87
18
  export declare function hslToHex(hslStr: string): string;
88
19
  export declare const setColorWithOpacity: (color: string, opacity: number) => string;
package/dist/color.js CHANGED
@@ -8,11 +8,11 @@ const colorMap = {
8
8
  primary: '#D745FF',
9
9
  success: '#45B167',
10
10
  danger: '#E84A5A',
11
+ warning: '#FFB800',
11
12
  alert: '#F57733',
12
- warning: '#FF9821',
13
- gold: '#FFB800',
14
13
  bullish: '#FFB800',
15
14
  bearish: '#E84A5A',
15
+ 'bg-pure': '#000000',
16
16
  'bg-default': '#000000',
17
17
  'bg-200': '#1F1F23',
18
18
  'bg-300': '#17171C',
@@ -30,11 +30,11 @@ const colorMap = {
30
30
  primary: '#D745FF',
31
31
  success: '#2E9F4A',
32
32
  danger: '#DE4A40',
33
+ warning: '#F38300',
33
34
  alert: '#E65E16',
34
- warning: '#FF9821',
35
- gold: '#F38300',
36
35
  bullish: '#FFAC34',
37
36
  bearish: '#E84A5A',
37
+ 'bg-pure': '#FFFFFF',
38
38
  'bg-default': '#F8F8FA',
39
39
  'bg-200': '#F0F0F2',
40
40
  'bg-300': '#F8F8FA',
@@ -53,11 +53,11 @@ const foregroundColorList = [
53
53
  'danger',
54
54
  'alert',
55
55
  'warning',
56
- 'gold',
57
56
  'bullish',
58
57
  'bearish'
59
58
  ];
60
59
  const backgroundColorList = [
60
+ 'bg-pure',
61
61
  'bg-default',
62
62
  'bg-200',
63
63
  'bg-300',
@@ -70,118 +70,6 @@ const uxColorList = [
70
70
  ...foregroundColorList,
71
71
  ...backgroundColorList
72
72
  ];
73
- const colorToCSSVariable = {
74
- foreground: {
75
- self: [
76
- '--heroui-foreground'
77
- ],
78
- foreground: ''
79
- },
80
- secondary: {
81
- self: [
82
- '--heroui-secondary',
83
- '--heroui-foreground-300'
84
- ],
85
- foreground: ''
86
- },
87
- tertiary: {
88
- self: [
89
- '--heroui-tertiary',
90
- '--heroui-foreground-100'
91
- ],
92
- foreground: ''
93
- },
94
- primary: {
95
- self: [
96
- '--heroui-primary',
97
- '--heroui-primary-500'
98
- ],
99
- foreground: ''
100
- },
101
- success: {
102
- self: [
103
- '--heroui-success',
104
- '--heroui-success-500'
105
- ],
106
- foreground: ''
107
- },
108
- danger: {
109
- self: [
110
- '--heroui-danger',
111
- '--heroui-danger-500'
112
- ],
113
- foreground: ''
114
- },
115
- alert: {
116
- self: [
117
- '--heroui-alert',
118
- '--heroui-alert-500'
119
- ],
120
- foreground: ''
121
- },
122
- warning: {
123
- self: [
124
- '--heroui-warning',
125
- '--heroui-warning-500'
126
- ],
127
- foreground: ''
128
- },
129
- gold: {
130
- self: [
131
- '--heroui-gold'
132
- ],
133
- foreground: ''
134
- },
135
- bullish: {
136
- self: [
137
- '--heroui-bullish'
138
- ],
139
- foreground: ''
140
- },
141
- bearish: {
142
- self: [
143
- '--heroui-bearish'
144
- ],
145
- foreground: ''
146
- },
147
- 'bg-default': {
148
- self: [
149
- '--heroui-background'
150
- ],
151
- foreground: ''
152
- },
153
- 'bg-200': {
154
- self: [
155
- '--heroui-background-200'
156
- ],
157
- foreground: ''
158
- },
159
- 'bg-300': {
160
- self: [
161
- '--heroui-background-300'
162
- ],
163
- foreground: ''
164
- },
165
- 'bg-400': {
166
- self: [
167
- '--heroui-background-400'
168
- ],
169
- foreground: ''
170
- },
171
- overlay: {
172
- self: [
173
- '--heroui-overlay',
174
- '--heroui-content1'
175
- ],
176
- foreground: ''
177
- },
178
- divider: {
179
- self: [
180
- '--heroui-divider'
181
- ],
182
- foreground: ''
183
- }
184
- };
185
73
  const colorToClassName = {
186
74
  default: 'text-foreground',
187
75
  white: 'text-white',
@@ -191,11 +79,11 @@ const colorToClassName = {
191
79
  primary: 'text-primary',
192
80
  success: 'text-success',
193
81
  danger: 'text-danger',
194
- alert: 'text-alert',
195
82
  warning: 'text-warning',
196
- gold: 'text-gold',
83
+ alert: 'text-alert',
197
84
  bullish: 'text-bullish',
198
85
  bearish: 'text-bearish',
86
+ 'bg-pure': 'text-background-pure',
199
87
  'bg-default': 'text-background',
200
88
  'bg-200': 'text-background-200',
201
89
  'bg-300': 'text-background-300',
@@ -306,4 +194,4 @@ const setColorWithOpacity = (color, opacity)=>{
306
194
  }
307
195
  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
308
196
  };
309
- export { backgroundColorList, colorMap, colorToCSSVariable, colorToClassName, foregroundColorList, hexColorToHSL, hexColorToHSLValue, hslToHex, setColorWithOpacity, uxColorList };
197
+ export { backgroundColorList, colorMap, colorToClassName, foregroundColorList, hexColorToHSL, hexColorToHSLValue, hslToHex, setColorWithOpacity, uxColorList };
package/dist/theme-data.d.ts CHANGED
@@ -1,19 +1,33 @@
1
- import { type UXColor } from './color';
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' | 'custom';
1
+ import type { UpDownColor, UXColor } from './color';
2
+ export type ThemeId = 'ux-classic-dark' | 'ux-classic-light' | 'ux-green-red-dark' | 'ux-green-red-light' | 'ux-dark' | 'ux-light' | 'gmgn-dark' | 'axiom-dark' | 'hyperliquid-dark' | 'phantom-dark' | 'binance-dark' | 'bullx-dark' | 'custom';
3
3
  export type ColorScheme = 'dark' | 'light';
4
+ export type ThemeColorVariable = UpDownColor | Exclude<UXColor, 'transparent' | 'white' | 'bg-pure' | 'default'>;
4
5
  export interface ThemeItemType {
5
6
  id: ThemeId;
6
7
  zhName: string;
7
8
  enName: string;
8
9
  fontName?: string;
9
10
  colorScheme: ColorScheme;
10
- colorVariables: Record<Exclude<UXColor, 'transparent' | 'white'>, string>;
11
+ colorVariables: Record<ThemeColorVariable, string>;
11
12
  /**
12
13
  * 自定义主题的基础主题ID（仅当 id === 'custom' 时使用）
13
14
  */
14
15
  baseThemeId?: ThemeId;
15
16
  }
16
- export declare const DEFAULT_THEME_ID = "ux-green-red-soft-dark";
17
- export declare const DEFAULT_MARKET_THEME_ID = "ux-purple-gold-dark";
17
+ export declare const DEFAULT_THEME_ID = "ux-dark";
18
+ export declare const DEFAULT_MARKET_THEME_ID = "ux-classic-dark";
19
+ export declare const UXDarkTheme: ThemeItemType;
20
+ export declare const UXLightTheme: ThemeItemType;
21
+ export declare const UXClassicDarkTheme: ThemeItemType;
22
+ export declare const UXClassicLightTheme: ThemeItemType;
23
+ export declare const UXGreenRedDarkTheme: ThemeItemType;
24
+ export declare const UXGreenRedLightTheme: ThemeItemType;
25
+ export declare const GMGNTheme: ThemeItemType;
26
+ export declare const AxiomTheme: ThemeItemType;
27
+ export declare const HyperliquidTheme: ThemeItemType;
28
+ export declare const PhantomTheme: ThemeItemType;
29
+ export declare const BinanceTheme: ThemeItemType;
30
+ export declare const BullXTheme: ThemeItemType;
31
+ export declare const CustomTheme: ThemeItemType;
18
32
  export declare const themeData: ThemeItemType[];
19
33
  export declare const themeKeys: ThemeId[];
package/dist/theme-data.js CHANGED
@@ -1,347 +1,388 @@
1
- const DEFAULT_THEME_ID = 'ux-green-red-soft-dark';
2
- const DEFAULT_MARKET_THEME_ID = 'ux-purple-gold-dark';
3
- const themeData = [
4
- {
5
- id: 'ux-green-red-soft-dark',
6
- zhName: 'UX Dark',
7
- enName: 'UX Dark',
8
- colorScheme: 'dark',
9
- colorVariables: {
10
- default: '#FDFDFE',
11
- foreground: '#FDFDFE',
12
- secondary: '#BBBBC4',
13
- tertiary: '#4E4E56',
14
- primary: '#D745FF',
15
- success: '#19AB5E',
16
- danger: '#FF5868',
17
- alert: '#F37A39',
18
- warning: '#F8BF63',
19
- gold: '#FFB800',
20
- 'bg-default': '#100E11',
21
- 'bg-200': '#2A2A30',
22
- 'bg-300': '#1F2025',
23
- 'bg-400': '#171517',
24
- overlay: '#1F2025',
25
- divider: '#26272D',
26
- bullish: '#19AB5E',
27
- bearish: '#FF5868'
28
- }
29
- },
30
- {
31
- id: 'ux-green-red-soft-light',
32
- zhName: 'UX Light',
33
- enName: 'UX Light',
34
- colorScheme: 'light',
35
- colorVariables: {
36
- default: '#000000',
37
- foreground: '#000000',
38
- secondary: '#55585C',
39
- tertiary: '#CFCFD7',
40
- primary: '#D745FF',
41
- success: '#19AB5E',
42
- danger: '#FF5868',
43
- alert: '#F07939',
44
- warning: '#F6932B',
45
- gold: '#FFB800',
46
- 'bg-default': '#F6F6F6',
47
- 'bg-200': '#E9E7EE',
48
- 'bg-300': '#F6F6F6',
49
- 'bg-400': '#FFFFFF',
50
- overlay: '#FFFFFF',
51
- divider: '#DAD7E0',
52
- bullish: '#19AB5E',
53
- bearish: '#FF5868'
54
- }
55
- },
56
- {
57
- id: 'ux-purple-gold-dark',
58
- zhName: 'UX 经典 Dark',
59
- enName: 'UX Classic Dark',
60
- colorScheme: 'dark',
61
- colorVariables: {
62
- default: '#FFFFFF',
63
- foreground: '#FFFFFF',
64
- secondary: '#A1A1AA',
65
- tertiary: '#4E4E56',
66
- primary: '#D745FF',
67
- success: '#45B167',
68
- danger: '#E84A5A',
69
- alert: '#F57733',
70
- warning: '#FF9821',
71
- gold: '#FFB800',
72
- 'bg-default': '#000000',
73
- 'bg-200': '#1F1F23',
74
- 'bg-300': '#17171C',
75
- 'bg-400': '#0F0F0F',
76
- overlay: '#17171C',
77
- divider: '#26272D',
78
- bullish: '#D745FF',
79
- bearish: '#FFB800'
80
- }
81
- },
82
- {
83
- id: 'ux-purple-gold-light',
84
- zhName: 'UX 经典 Light',
85
- enName: 'UX Classic Light',
86
- colorScheme: 'light',
87
- colorVariables: {
88
- default: '#0C0C0F',
89
- foreground: '#0C0C0F',
90
- secondary: '#61656B',
91
- tertiary: '#D8D8DE',
92
- primary: '#D745FF',
93
- success: '#2E9F4A',
94
- danger: '#DE4A40',
95
- alert: '#E65E16',
96
- warning: '#FF9821',
97
- gold: '#F38300',
98
- 'bg-default': '#F8F8FA',
99
- 'bg-200': '#F0F0F2',
100
- 'bg-300': '#F8F8FA',
101
- 'bg-400': '#FFFFFF',
102
- overlay: '#FFFFFF',
103
- divider: '#E8E8ED',
104
- bullish: '#D745FF',
105
- bearish: '#F38300'
106
- }
107
- },
108
- {
109
- id: 'ux-green-red-dark',
110
- zhName: 'UX 绿红 Dark',
111
- enName: 'UX Green/Red Dark',
112
- colorScheme: 'dark',
113
- colorVariables: {
114
- default: '#FFFFFF',
115
- foreground: '#FFFFFF',
116
- secondary: '#A1A1AA',
117
- tertiary: '#4E4E56',
118
- primary: '#D745FF',
119
- success: '#45B167',
120
- danger: '#E84A5A',
121
- alert: '#F57733',
122
- warning: '#FF9821',
123
- gold: '#FFB800',
124
- 'bg-default': '#000000',
125
- 'bg-200': '#1F1F23',
126
- 'bg-300': '#17171C',
127
- 'bg-400': '#0F0F0F',
128
- overlay: '#17171C',
129
- divider: '#26272D',
130
- bullish: '#45B167',
131
- bearish: '#E84A5A'
132
- }
133
- },
134
- {
135
- id: 'ux-green-red-light',
136
- zhName: 'UX 绿红 Light',
137
- enName: 'UX Green/Red Light',
138
- colorScheme: 'light',
139
- colorVariables: {
140
- default: '#000000',
141
- foreground: '#000000',
142
- secondary: '#767A80',
143
- tertiary: '#D8D8DE',
144
- primary: '#D745FF',
145
- success: '#2E9F4A',
146
- danger: '#DE4A40',
147
- alert: '#E65E16',
148
- warning: '#FF9821',
149
- gold: '#F38300',
150
- 'bg-default': '#F8F8FA',
151
- 'bg-200': '#F0F0F2',
152
- 'bg-300': '#F8F8FA',
153
- 'bg-400': '#FFFFFF',
154
- overlay: '#FFFFFF',
155
- divider: '#E8E8ED',
156
- bullish: '#2E9F4A',
157
- bearish: '#DE4A40'
158
- }
159
- },
160
- {
161
- id: 'gmgn-dark',
162
- zhName: 'GMGN',
163
- enName: 'GMGN',
164
- fontName: 'Geist',
165
- colorScheme: 'dark',
166
- colorVariables: {
167
- default: '#F0F5F5',
168
- foreground: '#F0F5F5',
169
- secondary: '#C4CCCC',
170
- tertiary: '#5D6466',
171
- primary: '#86D99F',
172
- success: '#86D99F',
173
- danger: '#F26682',
174
- alert: '#F55832',
175
- warning: '#F2C366',
176
- gold: '#F5DA54',
177
- 'bg-default': '#0C0C0F',
178
- 'bg-200': '#1F2024',
179
- 'bg-300': '#1A1B1F',
180
- 'bg-400': '#111214',
181
- overlay: '#1A1B1F',
182
- divider: '#26272D',
183
- bullish: '#86D99F',
184
- bearish: '#F26682'
185
- }
186
- },
187
- {
188
- id: 'axiom-dark',
189
- zhName: 'Axiom',
190
- enName: 'Axiom',
191
- fontName: 'Geist',
192
- colorScheme: 'dark',
193
- colorVariables: {
194
- default: '#FCFCFC',
195
- foreground: '#FCFCFC',
196
- secondary: '#C8C9D1',
197
- tertiary: '#4A4D5E',
198
- primary: '#526FFF',
199
- success: '#2FE3AC',
200
- danger: '#EC397A',
201
- alert: '#F57733',
202
- warning: '#F7931A',
203
- gold: '#F7931A',
204
- 'bg-default': '#0C0C0F',
205
- 'bg-200': '#22242D',
206
- 'bg-300': '#18181A',
207
- 'bg-400': '#101114',
208
- overlay: '#18181A',
209
- divider: '#25272E',
210
- bullish: '#2FE3AC',
211
- bearish: '#EC397A'
212
- }
213
- },
214
- {
215
- id: 'hyperliquid-dark',
216
- zhName: 'Hyperliquid',
217
- enName: 'Hyperliquid',
218
- colorScheme: 'dark',
219
- colorVariables: {
220
- default: '#F6FEFD',
221
- foreground: '#F6FEFD',
222
- secondary: '#D1D4DC',
223
- tertiary: '#5D6466',
224
- primary: '#50D2C1',
225
- success: '#1FA67D',
226
- danger: '#ED7088',
227
- alert: '#EF8F50',
228
- warning: '#FFB648',
229
- gold: '#FFB648',
230
- 'bg-default': '#0A1318',
231
- 'bg-200': '#222D33',
232
- 'bg-300': '#1B2429',
233
- 'bg-400': '#0F1A1F',
234
- overlay: '#1B2429',
235
- divider: '#394145',
236
- bullish: '#50D2C1',
237
- bearish: '#ED7088'
238
- }
239
- },
240
- {
241
- id: 'phantom-dark',
242
- zhName: 'Phantom',
243
- enName: 'Phantom',
244
- colorScheme: 'dark',
245
- colorVariables: {
246
- default: '#FFFFFF',
247
- foreground: '#FFFFFF',
248
- secondary: '#999999',
249
- tertiary: '#54515E',
250
- primary: '#AB9FF2',
251
- success: '#2EC08B',
252
- danger: '#F7525F',
253
- alert: '#FF9C3F',
254
- warning: '#FFE629',
255
- gold: '#FFD13F',
256
- 'bg-default': '#13121A',
257
- 'bg-200': '#2C2C38',
258
- 'bg-300': '#272735',
259
- 'bg-400': '#22212A',
260
- overlay: '#272735',
261
- divider: '#323232',
262
- bullish: '#2EC08B',
263
- bearish: '#FF7243'
264
- }
265
- },
266
- {
267
- id: 'binance-dark',
268
- zhName: 'Binance',
269
- enName: 'Binance',
270
- colorScheme: 'dark',
271
- colorVariables: {
272
- default: '#EAECEF',
273
- foreground: '#EAECEF',
274
- secondary: '#929AA5',
275
- tertiary: '#444A56',
276
- primary: '#FCD535',
277
- success: '#2EBD85',
278
- danger: '#F6465D',
279
- alert: '#FF693D',
280
- warning: '#F0B90B',
281
- gold: '#2DBD85',
282
- 'bg-default': '#0B0E11',
283
- 'bg-200': '#252B36',
284
- 'bg-300': '#202630',
285
- 'bg-400': '#181A20',
286
- overlay: '#202630',
287
- divider: '#343B47',
288
- bullish: '#2EBD85',
289
- bearish: '#F6465D'
290
- }
291
- },
292
- {
293
- id: 'bullx-dark',
294
- zhName: 'BullX',
295
- enName: 'BullX',
296
- fontName: 'IBM Plex Sans',
297
- colorScheme: 'dark',
298
- colorVariables: {
299
- default: '#E9E9E9',
300
- foreground: '#E9E9E9',
301
- secondary: '#98989B',
302
- tertiary: '#4B4D51',
303
- primary: '#459C6E',
304
- success: '#459C6E',
305
- danger: '#A13C45',
306
- alert: '#E9BF52',
307
- warning: '#DCC161',
308
- gold: '#E9BF52',
309
- 'bg-default': '#09090B',
310
- 'bg-200': '#1B1D22',
311
- 'bg-300': '#15171A',
312
- 'bg-400': '#0F0F0F',
313
- overlay: '#15171A',
314
- divider: '#1E2025',
315
- bullish: '#459C6E',
316
- bearish: '#A13C45'
317
- }
318
- },
319
- {
320
- id: 'custom',
321
- zhName: '自定义',
322
- enName: 'Custom',
323
- colorScheme: 'dark',
324
- colorVariables: {
325
- default: '#FDFDFE',
326
- foreground: '#FDFDFE',
327
- secondary: '#BBBBC4',
328
- tertiary: '#4E4E56',
329
- primary: '#D745FF',
330
- success: '#19AB5E',
331
- danger: '#FF5868',
332
- alert: '#F37A39',
333
- warning: '#F8BF63',
334
- gold: '#FFB800',
335
- 'bg-default': '#100E11',
336
- 'bg-200': '#2A2A30',
337
- 'bg-300': '#1F2025',
338
- 'bg-400': '#171517',
339
- overlay: '#1F2025',
340
- divider: '#26272D',
341
- bullish: '#19AB5E',
342
- bearish: '#FF5868'
343
- }
1
+ const DEFAULT_THEME_ID = 'ux-dark';
2
+ const DEFAULT_MARKET_THEME_ID = 'ux-classic-dark';
3
+ const UXDarkTheme = {
4
+ id: 'ux-dark',
5
+ zhName: 'UX Dark',
6
+ enName: 'UX Dark',
7
+ colorScheme: 'dark',
8
+ colorVariables: {
9
+ foreground: '#FDFDFE',
10
+ secondary: '#BBBBC4',
11
+ tertiary: '#4E4E56',
12
+ primary: '#D745FF',
13
+ success: '#19AB5E',
14
+ danger: '#FF5868',
15
+ alert: '#F37A39',
16
+ warning: '#FFB800',
17
+ 'bg-default': '#100E11',
18
+ 'bg-200': '#282930',
19
+ 'bg-300': '#1F2025',
20
+ 'bg-400': '#151517',
21
+ overlay: '#1F2025',
22
+ divider: '#26272D',
23
+ bullish: '#19AB5E',
24
+ bearish: '#FF5868',
25
+ candleUp: '#19AB5E',
26
+ candleDown: '#FF5868',
27
+ candleWickUp: '#19AB5E',
28
+ candleWickDown: '#FF5868',
29
+ candleBorderUp: '#19AB5E',
30
+ candleBorderDown: '#FF5868'
31
+ }
32
+ };
33
+ const UXLightTheme = {
34
+ id: 'ux-light',
35
+ zhName: 'UX Light',
36
+ enName: 'UX Light',
37
+ colorScheme: 'light',
38
+ colorVariables: {
39
+ foreground: '#000000',
40
+ secondary: '#55585C',
41
+ tertiary: '#CFCFD7',
42
+ primary: '#D745FF',
43
+ success: '#19AB5E',
44
+ danger: '#FF5868',
45
+ alert: '#E65E16',
46
+ warning: '#F38300',
47
+ 'bg-default': '#F6F6F6',
48
+ 'bg-200': '#EFEDF5',
49
+ 'bg-300': '#F6F6F6',
50
+ 'bg-400': '#FFFFFF',
51
+ overlay: '#FFFFFF',
52
+ divider: '#DAD7E0',
53
+ bullish: '#19AB5E',
54
+ bearish: '#FF5868',
55
+ candleUp: '#19AB5E',
56
+ candleDown: '#FF5868',
57
+ candleWickUp: '#19AB5E',
58
+ candleWickDown: '#FF5868',
59
+ candleBorderUp: '#19AB5E',
60
+ candleBorderDown: '#FF5868'
61
+ }
62
+ };
63
+ const UXClassicDarkTheme = {
64
+ id: 'ux-classic-dark',
65
+ zhName: 'UX 经典 Dark',
66
+ enName: 'UX Classic Dark',
67
+ colorScheme: 'dark',
68
+ colorVariables: {
69
+ foreground: '#FFFFFF',
70
+ secondary: '#A1A1AA',
71
+ tertiary: '#4E4E56',
72
+ primary: '#D745FF',
73
+ success: '#45B167',
74
+ danger: '#E84A5A',
75
+ alert: '#F57733',
76
+ warning: '#FFB800',
77
+ 'bg-default': '#000000',
78
+ 'bg-200': '#1F1F23',
79
+ 'bg-300': '#17171C',
80
+ 'bg-400': '#0F0F0F',
81
+ overlay: '#17171C',
82
+ divider: '#26272D',
83
+ bullish: '#D745FF',
84
+ bearish: '#FFB800',
85
+ candleUp: '#D745FF',
86
+ candleDown: '#FFAC34',
87
+ candleWickUp: '#D745FF',
88
+ candleWickDown: '#FFAC34',
89
+ candleBorderUp: '#D745FF',
90
+ candleBorderDown: '#FFAC34'
91
+ }
92
+ };
93
+ const UXClassicLightTheme = {
94
+ id: 'ux-classic-light',
95
+ zhName: 'UX 经典 Light',
96
+ enName: 'UX Classic Light',
97
+ colorScheme: 'light',
98
+ colorVariables: {
99
+ foreground: '#0C0C0F',
100
+ secondary: '#61656B',
101
+ tertiary: '#D8D8DE',
102
+ primary: '#D745FF',
103
+ success: '#2E9F4A',
104
+ danger: '#DE4A40',
105
+ alert: '#E65E16',
106
+ warning: '#F38300',
107
+ 'bg-default': '#F8F8FA',
108
+ 'bg-200': '#F0F0F2',
109
+ 'bg-300': '#F8F8FA',
110
+ 'bg-400': '#FFFFFF',
111
+ overlay: '#FFFFFF',
112
+ divider: '#E8E8ED',
113
+ bullish: '#D745FF',
114
+ bearish: '#F38300',
115
+ candleUp: '#D745FF',
116
+ candleDown: '#F9A01E',
117
+ candleWickUp: '#D745FF',
118
+ candleWickDown: '#F9A01E',
119
+ candleBorderUp: '#D745FF',
120
+ candleBorderDown: '#F9A01E'
121
+ }
122
+ };
123
+ const UXGreenRedDarkTheme = {
124
+ id: 'ux-green-red-dark',
125
+ zhName: 'UX 绿红 Dark',
126
+ enName: 'UX Green/Red Dark',
127
+ colorScheme: 'dark',
128
+ colorVariables: {
129
+ foreground: '#FFFFFF',
130
+ secondary: '#A1A1AA',
131
+ tertiary: '#4E4E56',
132
+ primary: '#D745FF',
133
+ success: '#45B167',
134
+ danger: '#E84A5A',
135
+ alert: '#F57733',
136
+ warning: '#FFB800',
137
+ 'bg-default': '#000000',
138
+ 'bg-200': '#1F1F23',
139
+ 'bg-300': '#17171C',
140
+ 'bg-400': '#0F0F0F',
141
+ overlay: '#17171C',
142
+ divider: '#26272D',
143
+ bullish: '#45B167',
144
+ bearish: '#E84A5A',
145
+ candleUp: '#45B167',
146
+ candleDown: '#E84A5A',
147
+ candleWickUp: '#45B167',
148
+ candleWickDown: '#E84A5A',
149
+ candleBorderUp: '#45B167',
150
+ candleBorderDown: '#E84A5A'
151
+ }
152
+ };
153
+ const UXGreenRedLightTheme = {
154
+ id: 'ux-green-red-light',
155
+ zhName: 'UX 绿红 Light',
156
+ enName: 'UX Green/Red Light',
157
+ colorScheme: 'light',
158
+ colorVariables: {
159
+ foreground: '#000000',
160
+ secondary: '#61656B',
161
+ tertiary: '#D8D8DE',
162
+ primary: '#D745FF',
163
+ success: '#2E9F4A',
164
+ danger: '#DE4A40',
165
+ alert: '#E65E16',
166
+ warning: '#F38300',
167
+ 'bg-default': '#F8F8FA',
168
+ 'bg-200': '#F0F0F2',
169
+ 'bg-300': '#F8F8FA',
170
+ 'bg-400': '#FFFFFF',
171
+ overlay: '#FFFFFF',
172
+ divider: '#E8E8ED',
173
+ bullish: '#2E9F4A',
174
+ bearish: '#DE4A40',
175
+ candleUp: '#2E9F4A',
176
+ candleDown: '#DE4A40',
177
+ candleWickUp: '#2E9F4A',
178
+ candleWickDown: '#DE4A40',
179
+ candleBorderUp: '#2E9F4A',
180
+ candleBorderDown: '#DE4A40'
181
+ }
182
+ };
183
+ const GMGNTheme = {
184
+ id: 'gmgn-dark',
185
+ zhName: 'GMGN',
186
+ enName: 'GMGN',
187
+ fontName: 'Geist',
188
+ colorScheme: 'dark',
189
+ colorVariables: {
190
+ foreground: '#F0F5F5',
191
+ secondary: '#C4CCCC',
192
+ tertiary: '#5D6466',
193
+ primary: '#86D99F',
194
+ success: '#86D99F',
195
+ danger: '#F26682',
196
+ alert: '#F55832',
197
+ warning: '#F5DA54',
198
+ 'bg-default': '#0C0C0F',
199
+ 'bg-200': '#1F2024',
200
+ 'bg-300': '#1A1B1F',
201
+ 'bg-400': '#111214',
202
+ overlay: '#1A1B1F',
203
+ divider: '#26272D',
204
+ bullish: '#86D99F',
205
+ bearish: '#F26682',
206
+ candleUp: '#1DB069',
207
+ candleDown: '#DE4E52',
208
+ candleWickUp: '#1DB069',
209
+ candleWickDown: '#DE4E52',
210
+ candleBorderUp: '#1DB069',
211
+ candleBorderDown: '#DE4E52'
344
212
  }
213
+ };
214
+ const AxiomTheme = {
215
+ id: 'axiom-dark',
216
+ zhName: 'Axiom',
217
+ enName: 'Axiom',
218
+ fontName: 'Geist',
219
+ colorScheme: 'dark',
220
+ colorVariables: {
221
+ foreground: '#FCFCFC',
222
+ secondary: '#C8C9D1',
223
+ tertiary: '#4A4D5E',
224
+ primary: '#526FFF',
225
+ success: '#2FE3AC',
226
+ danger: '#EC397A',
227
+ alert: '#F57733',
228
+ warning: '#F7931A',
229
+ 'bg-default': '#0C0C0F',
230
+ 'bg-200': '#22242D',
231
+ 'bg-300': '#18181A',
232
+ 'bg-400': '#101114',
233
+ overlay: '#18181A',
234
+ divider: '#25272E',
235
+ bullish: '#2FE3AC',
236
+ bearish: '#EC397A',
237
+ candleUp: '#0B9981',
238
+ candleDown: '#F23646',
239
+ candleWickUp: '#0B9981',
240
+ candleWickDown: '#F23646',
241
+ candleBorderUp: '#0B9981',
242
+ candleBorderDown: '#F23646'
243
+ }
244
+ };
245
+ const HyperliquidTheme = {
246
+ id: 'hyperliquid-dark',
247
+ zhName: 'Hyperliquid',
248
+ enName: 'Hyperliquid',
249
+ colorScheme: 'dark',
250
+ colorVariables: {
251
+ foreground: '#F6FEFD',
252
+ secondary: '#D1D4DC',
253
+ tertiary: '#5D6466',
254
+ primary: '#50D2C1',
255
+ success: '#1FA67D',
256
+ danger: '#ED7088',
257
+ alert: '#EF8F50',
258
+ warning: '#FFB648',
259
+ 'bg-default': '#0A1318',
260
+ 'bg-200': '#222D33',
261
+ 'bg-300': '#1B2429',
262
+ 'bg-400': '#0F1A1F',
263
+ overlay: '#1B2429',
264
+ divider: '#394145',
265
+ bullish: '#50D2C1',
266
+ bearish: '#ED7088',
267
+ candleUp: '#26A69A',
268
+ candleDown: '#EF5350',
269
+ candleWickUp: '#26A69A',
270
+ candleWickDown: '#EF5350',
271
+ candleBorderUp: '#26A69A',
272
+ candleBorderDown: '#EF5350'
273
+ }
274
+ };
275
+ const PhantomTheme = {
276
+ id: 'phantom-dark',
277
+ zhName: 'Phantom',
278
+ enName: 'Phantom',
279
+ colorScheme: 'dark',
280
+ colorVariables: {
281
+ foreground: '#FFFFFF',
282
+ secondary: '#999999',
283
+ tertiary: '#54515E',
284
+ primary: '#AB9FF2',
285
+ success: '#2EC08B',
286
+ danger: '#F7525F',
287
+ alert: '#FF9C3F',
288
+ warning: '#FFD13F',
289
+ 'bg-default': '#13121A',
290
+ 'bg-200': '#2C2C38',
291
+ 'bg-300': '#272735',
292
+ 'bg-400': '#22212A',
293
+ overlay: '#272735',
294
+ divider: '#323232',
295
+ bullish: '#2EC08B',
296
+ bearish: '#FF7243',
297
+ candleUp: '#2EC08B',
298
+ candleDown: '#FF7243',
299
+ candleWickUp: '#2EC08B',
300
+ candleWickDown: '#FF7243',
301
+ candleBorderUp: '#2EC08B',
302
+ candleBorderDown: '#FF7243'
303
+ }
304
+ };
305
+ const BinanceTheme = {
306
+ id: 'binance-dark',
307
+ zhName: 'Binance',
308
+ enName: 'Binance',
309
+ colorScheme: 'dark',
310
+ colorVariables: {
311
+ foreground: '#EAECEF',
312
+ secondary: '#929AA5',
313
+ tertiary: '#444A56',
314
+ primary: '#FCD535',
315
+ success: '#2EBD85',
316
+ danger: '#F6465D',
317
+ alert: '#FF693D',
318
+ warning: '#F0B90B',
319
+ 'bg-default': '#0B0E11',
320
+ 'bg-200': '#252B36',
321
+ 'bg-300': '#202630',
322
+ 'bg-400': '#181A20',
323
+ overlay: '#202630',
324
+ divider: '#343B47',
325
+ bullish: '#2EBD85',
326
+ bearish: '#F6465D',
327
+ candleUp: '#2EBD85',
328
+ candleDown: '#F6465D',
329
+ candleWickUp: '#2EBD85',
330
+ candleWickDown: '#F6465D',
331
+ candleBorderUp: '#2EBD85',
332
+ candleBorderDown: '#F6465D'
333
+ }
334
+ };
335
+ const BullXTheme = {
336
+ id: 'bullx-dark',
337
+ zhName: 'BullX',
338
+ enName: 'BullX',
339
+ fontName: 'IBM Plex Sans',
340
+ colorScheme: 'dark',
341
+ colorVariables: {
342
+ foreground: '#E9E9E9',
343
+ secondary: '#98989B',
344
+ tertiary: '#4B4D51',
345
+ primary: '#459C6E',
346
+ success: '#459C6E',
347
+ danger: '#A13C45',
348
+ alert: '#E9BF52',
349
+ warning: '#E9BF52',
350
+ 'bg-default': '#09090B',
351
+ 'bg-200': '#1B1D22',
352
+ 'bg-300': '#15171A',
353
+ 'bg-400': '#0F0F0F',
354
+ overlay: '#15171A',
355
+ divider: '#1E2025',
356
+ bullish: '#459C6E',
357
+ bearish: '#A13C45',
358
+ candleUp: '#459C6E',
359
+ candleDown: '#A13C45',
360
+ candleWickUp: '#459C6E',
361
+ candleWickDown: '#A13C45',
362
+ candleBorderUp: '#459C6E',
363
+ candleBorderDown: '#A13C45'
364
+ }
365
+ };
366
+ const CustomTheme = {
367
+ ...UXDarkTheme,
368
+ id: 'custom',
369
+ zhName: '自定义',
370
+ enName: 'Custom'
371
+ };
372
+ const themeData = [
373
+ UXDarkTheme,
374
+ UXLightTheme,
375
+ UXGreenRedDarkTheme,
376
+ UXClassicDarkTheme,
377
+ UXClassicLightTheme,
378
+ UXGreenRedLightTheme,
379
+ GMGNTheme,
380
+ AxiomTheme,
381
+ HyperliquidTheme,
382
+ PhantomTheme,
383
+ BinanceTheme,
384
+ BullXTheme,
385
+ CustomTheme
345
386
  ];
346
387
  const themeKeys = themeData.map((theme)=>theme.id);
347
- export { DEFAULT_MARKET_THEME_ID, DEFAULT_THEME_ID, themeData, themeKeys };
388
+ export { AxiomTheme, BinanceTheme, BullXTheme, CustomTheme, DEFAULT_MARKET_THEME_ID, DEFAULT_THEME_ID, GMGNTheme, HyperliquidTheme, PhantomTheme, UXClassicDarkTheme, UXClassicLightTheme, UXDarkTheme, UXGreenRedDarkTheme, UXGreenRedLightTheme, UXLightTheme, themeData, themeKeys };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@particle-network/ui-shared",
3
- "version": "0.4.1-beta.0",
3
+ "version": "0.4.1-beta.1",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "react-native": "./dist/index.js",
@@ -44,8 +44,8 @@
44
44
  "@rsbuild/plugin-react": "^1.3.5",
45
45
  "@rslib/core": "^0.12.3",
46
46
  "@types/react": "^19.1.10",
47
- "@particle-network/eslint-config": "0.3.0",
48
- "@particle-network/lintstaged-config": "0.1.0"
47
+ "@particle-network/lintstaged-config": "0.1.0",
48
+ "@particle-network/eslint-config": "0.3.0"
49
49
  },
50
50
  "scripts": {
51
51
  "build": "rslib build",