@particle-network/ui-shared 0.4.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 -26
  2. package/dist/color.js +41 -62
  3. package/dist/theme-data.d.ts +23 -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,30 +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
- readonly default: "--heroui-foreground";
15
- readonly foreground: "--heroui-foreground";
16
- readonly secondary: "--heroui-secondary";
17
- readonly white: "--color-white";
18
- readonly tertiary: "--heroui-tertiary";
19
- readonly primary: "--heroui-primary";
20
- readonly success: "--heroui-success";
21
- readonly danger: "--heroui-danger";
22
- readonly alert: "--heroui-alert";
23
- readonly warning: "--heroui-warning";
24
- readonly gold: "--heroui-gold";
25
- readonly bullish: "--heroui-bullish";
26
- readonly bearish: "--heroui-bearish";
27
- readonly 'bg-default': "--heroui-background";
28
- readonly 'bg-200': "--heroui-background-200";
29
- readonly 'bg-300': "--heroui-background-300";
30
- readonly 'bg-400': "--heroui-background-400";
31
- readonly overlay: "--heroui-overlay";
32
- readonly divider: "--heroui-divider";
33
- };
34
14
  export declare const colorToClassName: Record<UXColor, string>;
35
- export type ColorString = `#${string}`;
36
- export declare function hexColorToHSLValue(hex: ColorString): string;
37
- 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;
38
18
  export declare function hslToHex(hslStr: string): string;
39
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,27 +70,6 @@ const uxColorList = [
70
70
  ...foregroundColorList,
71
71
  ...backgroundColorList
72
72
  ];
73
- const colorToCSSVariable = {
74
- default: '--heroui-foreground',
75
- foreground: '--heroui-foreground',
76
- secondary: '--heroui-secondary',
77
- white: '--color-white',
78
- tertiary: '--heroui-tertiary',
79
- primary: '--heroui-primary',
80
- success: '--heroui-success',
81
- danger: '--heroui-danger',
82
- alert: '--heroui-alert',
83
- warning: '--heroui-warning',
84
- gold: '--heroui-gold',
85
- bullish: '--heroui-bullish',
86
- bearish: '--heroui-bearish',
87
- 'bg-default': '--heroui-background',
88
- 'bg-200': '--heroui-background-200',
89
- 'bg-300': '--heroui-background-300',
90
- 'bg-400': '--heroui-background-400',
91
- overlay: '--heroui-overlay',
92
- divider: '--heroui-divider'
93
- };
94
73
  const colorToClassName = {
95
74
  default: 'text-foreground',
96
75
  white: 'text-white',
@@ -100,11 +79,11 @@ const colorToClassName = {
100
79
  primary: 'text-primary',
101
80
  success: 'text-success',
102
81
  danger: 'text-danger',
103
- alert: 'text-alert',
104
82
  warning: 'text-warning',
105
- gold: 'text-gold',
83
+ alert: 'text-alert',
106
84
  bullish: 'text-bullish',
107
85
  bearish: 'text-bearish',
86
+ 'bg-pure': 'text-background-pure',
108
87
  'bg-default': 'text-background',
109
88
  'bg-200': 'text-background-200',
110
89
  'bg-300': 'text-background-300',
@@ -113,43 +92,43 @@ const colorToClassName = {
113
92
  divider: 'text-divider',
114
93
  transparent: 'text-transparent'
115
94
  };
95
+ function hexToRgb(hex) {
96
+ let r = 0, g = 0, b = 0;
97
+ if (4 === hex.length || 5 === hex.length) {
98
+ r = parseInt(hex[1] + hex[1], 16);
99
+ g = parseInt(hex[2] + hex[2], 16);
100
+ b = parseInt(hex[3] + hex[3], 16);
101
+ } else if (7 === hex.length || 9 === hex.length) {
102
+ r = parseInt(hex.slice(1, 3), 16);
103
+ g = parseInt(hex.slice(3, 5), 16);
104
+ b = parseInt(hex.slice(5, 7), 16);
105
+ } else throw new Error('Invalid hex color format');
106
+ return [
107
+ r,
108
+ g,
109
+ b
110
+ ];
111
+ }
116
112
  function hexColorToHSLValue(hex) {
117
- const hexWithoutHash = hex.replace('#', '');
118
- const r = parseInt(hexWithoutHash.substring(0, 2), 16) / 255;
119
- const g = parseInt(hexWithoutHash.substring(2, 4), 16) / 255;
120
- const b = parseInt(hexWithoutHash.substring(4, 6), 16) / 255;
121
- const max = Math.max(r, g, b);
122
- const min = Math.min(r, g, b);
123
- let h = 0;
124
- let s = 0;
125
- const l = (max + min) / 2;
126
- if (max === min) {
127
- h = 0;
128
- s = 0;
129
- } else {
130
- const d = max - min;
131
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
132
- switch(max){
133
- case r:
134
- h = (g - b) / d + (g < b ? 6 : 0);
135
- break;
136
- case g:
137
- h = (b - r) / d + 2;
138
- break;
139
- case b:
140
- h = (r - g) / d + 4;
141
- break;
142
- default:
143
- h = 0;
144
- break;
145
- }
146
- h /= 6;
147
- }
148
- return `${Math.round(360 * h)}, ${Math.round(100 * s)}%, ${Math.round(100 * l)}%`;
113
+ const [r, g, b] = hexToRgb(hex);
114
+ const normalizedR = r / 255;
115
+ const normalizedG = g / 255;
116
+ const normalizedB = b / 255;
117
+ const max = Math.max(normalizedR, normalizedG, normalizedB);
118
+ const min = Math.min(normalizedR, normalizedG, normalizedB);
119
+ const lightness = (max + min) / 2;
120
+ if (max === min) return `0 0% ${100 * lightness}%`;
121
+ let saturation = 0;
122
+ saturation = lightness < 0.5 ? (max - min) / (max + min) : (max - min) / (2 - max - min);
123
+ let hue;
124
+ hue = max === normalizedR ? (normalizedG - normalizedB) / (max - min) : max === normalizedG ? 2 + (normalizedB - normalizedR) / (max - min) : 4 + (normalizedR - normalizedG) / (max - min);
125
+ hue *= 60;
126
+ if (hue < 0) hue += 360;
127
+ return `${hue.toFixed(2)} ${(100 * saturation).toFixed(2)}% ${(100 * lightness).toFixed(2)}%`;
149
128
  }
150
129
  function hexColorToHSL(hex) {
151
130
  const value = hexColorToHSLValue(hex);
152
- return `hsl(${value})`;
131
+ return `hsl(${value.replaceAll(' ', ', ')})`;
153
132
  }
154
133
  function hslToHex(hslStr) {
155
134
  const hslMatch = hslStr.match(/(\d*\.?\d+)\s+(\d*\.?\d+)%?\s+(\d*\.?\d+)%?/);
@@ -215,4 +194,4 @@ const setColorWithOpacity = (color, opacity)=>{
215
194
  }
216
195
  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
217
196
  };
218
- 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,15 +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' | 'product-test';
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>;
12
+ /**
13
+ * 自定义主题的基础主题ID（仅当 id === 'custom' 时使用）
14
+ */
15
+ baseThemeId?: ThemeId;
11
16
  }
12
- export declare const DEFAULT_THEME_ID = "ux-green-red-soft-dark";
13
- 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;
14
32
  export declare const themeData: ThemeItemType[];
15
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: 'product-test',
321
- zhName: '产品测试',
322
- enName: 'Product Test',
323
- colorScheme: 'dark',
324
- colorVariables: {
325
- default: '#F6FEFD',
326
- foreground: '#F6FEFD',
327
- secondary: '#D1D4DC',
328
- tertiary: '#949E9C',
329
- primary: '#50D2C1',
330
- success: '#19AB5E',
331
- danger: '#E84A5A',
332
- alert: '#F57733',
333
- warning: '#FFD13F',
334
- gold: '#FFB800',
335
- 'bg-default': '#0A1318',
336
- 'bg-200': '#222D33',
337
- 'bg-300': '#1B2429',
338
- 'bg-400': '#0F1A1F',
339
- overlay: '#1B2429',
340
- divider: '#394145',
341
- bullish: '#D745FF',
342
- bearish: '#F38300'
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.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",