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

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 +8 -76
  2. package/dist/color.js +10 -122
  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,88 +1,20 @@
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 UXComponentColor = 'foreground' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'danger' | 'warning' | 'alert' | 'bullish' | 'bearish';
2
+ export type UXForegroundColor = 'default' | 'white' | 'foreground' | 'secondary' | 'tertiary' | 'primary' | 'success' | 'danger' | 'alert' | 'warning' | 'bullish' | 'bearish';
3
+ export type UXBackgroundColor = 'bg-pure' | 'bg-default' | 'bg-300' | 'bg-200' | 'bg-400' | 'divider' | 'transparent' | 'overlay';
3
4
  export type UXColor = UXForegroundColor | UXBackgroundColor;
5
+ export type UpDownColor = 'candleUp' | 'candleDown' | 'candleWickUp' | 'candleWickDown' | 'candleBorderUp' | 'candleBorderDown';
4
6
  export interface DynamicColors {
5
7
  bullish?: string;
6
8
  bearish?: string;
7
9
  }
8
10
  export type ThemeColors = Record<UXColor, string>;
9
11
  export declare const colorMap: Record<'dark' | 'light', Record<UXColor, string>>;
10
- export declare const foregroundColorList: UXForegroundColor[];
12
+ export declare const foregroundColorList: readonly ["foreground", "secondary", "tertiary", "primary", "success", "danger", "warning", "alert", "bullish", "bearish"];
11
13
  export declare const backgroundColorList: UXBackgroundColor[];
12
14
  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
15
  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;
16
+ export type HexColor = `#${string}`;
17
+ export declare function hexColorToHSLValue(hex: HexColor): string;
18
+ export declare function hexColorToHSL(hex: HexColor): string;
87
19
  export declare function hslToHex(hslStr: string): string;
88
20
  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',
@@ -45,19 +45,19 @@ const colorMap = {
45
45
  }
46
46
  };
47
47
  const foregroundColorList = [
48
- 'default',
48
+ 'foreground',
49
49
  'secondary',
50
50
  'tertiary',
51
51
  'primary',
52
52
  'success',
53
53
  'danger',
54
- 'alert',
55
54
  'warning',
56
- 'gold',
55
+ 'alert',
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.2",
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",