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

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