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

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 (4) hide show
  1. package/dist/color.d.ts +3 -3
  2. package/dist/color.js +12 -5
  3. package/dist/theme-data.js +60 -84
  4. 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 = 'bg-pure' | 'bg-default' | 'bg-300' | 'bg-200' | 'bg-400' | '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,12 +4,14 @@ 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
17
  'bg-pure': '#000000',
@@ -26,12 +28,14 @@ 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
41
  'bg-pure': '#FFFFFF',
@@ -44,7 +48,7 @@ const colorMap = {
44
48
  transparent: 'transparent'
45
49
  }
46
50
  };
47
- const foregroundColorList = [
51
+ const componentColorList = [
48
52
  'foreground',
49
53
  'secondary',
50
54
  'tertiary',
@@ -62,12 +66,13 @@ const backgroundColorList = [
62
66
  'bg-200',
63
67
  'bg-300',
64
68
  'bg-400',
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,11 +81,13 @@ 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
93
  'bg-pure': 'text-background-pure',
@@ -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.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,7 +20,8 @@ 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',
@@ -22,12 +35,8 @@ const UXDarkTheme = {
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,7 +47,8 @@ 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',
@@ -52,12 +62,8 @@ const UXLightTheme = {
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,7 +74,8 @@ 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',
@@ -82,12 +89,8 @@ const UXClassicDarkTheme = {
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,7 +101,8 @@ 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',
@@ -112,12 +116,8 @@ const UXClassicLightTheme = {
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,7 +128,8 @@ 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',
@@ -142,12 +143,8 @@ const UXGreenRedDarkTheme = {
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,7 +155,8 @@ 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',
@@ -172,12 +170,8 @@ const UXGreenRedLightTheme = {
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,7 +183,8 @@ 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',
@@ -203,12 +198,8 @@ const GMGNTheme = {
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,7 +211,8 @@ 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',
@@ -234,12 +226,8 @@ const AxiomTheme = {
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,7 +238,8 @@ 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',
@@ -264,12 +253,8 @@ const HyperliquidTheme = {
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,7 +265,8 @@ 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',
@@ -294,12 +280,8 @@ const PhantomTheme = {
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,7 +292,8 @@ 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',
@@ -324,12 +307,8 @@ const BinanceTheme = {
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,7 +320,8 @@ 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',
@@ -355,12 +335,8 @@ const BullXTheme = {
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 = {
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.3",
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",