@particle-network/ui-shared 0.3.0-beta.5 → 0.3.0-beta.7

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 +0 -1
  2. package/dist/color.js +3 -10
  3. package/dist/theme-data.d.ts +1 -0
  4. package/dist/theme-data.js +98 -97
  5. package/package.json +3 -3
package/dist/color.d.ts CHANGED
@@ -36,5 +36,4 @@ export type ColorString = `#${string}`;
36
36
  export declare function hexColorToHSLValue(hex: ColorString): string;
37
37
  export declare function hexColorToHSL(hex: ColorString): string;
38
38
  export declare function hslToHex(hslStr: string): string;
39
- export declare const getHexColorFromCSSVariable: (color: UXColor) => string;
40
39
  export declare const setColorWithOpacity: (color: string, opacity: number) => string;
package/dist/color.js CHANGED
@@ -11,14 +11,14 @@ const colorMap = {
11
11
  alert: '#F57733',
12
12
  warning: '#FF9821',
13
13
  gold: '#FFB800',
14
- bullish: '#FFAC34',
14
+ bullish: '#FFB800',
15
15
  bearish: '#E84A5A',
16
16
  'bg-default': '#000000',
17
17
  'bg-200': '#1F1F23',
18
18
  'bg-300': '#17171C',
19
19
  'bg-400': '#0F0F0F',
20
20
  overlay: '#17171C',
21
- divider: '#282828',
21
+ divider: '#26272D',
22
22
  transparent: 'transparent'
23
23
  },
24
24
  light: {
@@ -197,13 +197,6 @@ function hslToHex(hslStr) {
197
197
  const toHex = (n)=>Math.round((n + m) * 255).toString(16).padStart(2, '0');
198
198
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
199
199
  }
200
- const getHexColorFromCSSVariable = (color)=>{
201
- if ('transparent' === color) return 'transparent';
202
- const rootStyles = getComputedStyle(document.documentElement);
203
- const value = rootStyles.getPropertyValue(colorToCSSVariable[color]).trim();
204
- if (!value) return '#000000';
205
- return value.startsWith('#') ? value : hslToHex(value);
206
- };
207
200
  const setColorWithOpacity = (color, opacity)=>{
208
201
  let r, g, b;
209
202
  if (color.startsWith('#')) {
@@ -222,4 +215,4 @@ const setColorWithOpacity = (color, opacity)=>{
222
215
  }
223
216
  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
224
217
  };
225
- export { backgroundColorList, colorMap, colorToCSSVariable, colorToClassName, foregroundColorList, getHexColorFromCSSVariable, hexColorToHSL, hexColorToHSLValue, hslToHex, setColorWithOpacity, uxColorList };
218
+ export { backgroundColorList, colorMap, colorToCSSVariable, colorToClassName, foregroundColorList, hexColorToHSL, hexColorToHSLValue, hslToHex, setColorWithOpacity, uxColorList };
package/dist/theme-data.d.ts CHANGED
@@ -9,5 +9,6 @@ export interface ThemeItemType {
9
9
  colorScheme: ColorScheme;
10
10
  colorVariables: Record<UXColor, string>;
11
11
  }
12
+ export declare const DEFAULT_THEME_ID = "ux-green-red-soft-dark";
12
13
  export declare const themeData: ThemeItemType[];
13
14
  export declare const themeKeys: ThemeId[];
package/dist/theme-data.js CHANGED
@@ -1,8 +1,65 @@
1
+ const DEFAULT_THEME_ID = 'ux-green-red-soft-dark';
1
2
  const themeData = [
3
+ {
4
+ id: 'ux-green-red-soft-dark',
5
+ zhName: 'UX Dark',
6
+ enName: 'UX Dark',
7
+ colorScheme: 'dark',
8
+ colorVariables: {
9
+ default: '#FDFDFE',
10
+ white: '#FFFFFF',
11
+ transparent: 'transparent',
12
+ foreground: '#FDFDFE',
13
+ secondary: '#BBBBC4',
14
+ tertiary: '#70707C',
15
+ primary: '#D745FF',
16
+ success: '#73D090',
17
+ danger: '#F46271',
18
+ alert: '#F37A39',
19
+ warning: '#F8BF63',
20
+ gold: '#FFB800',
21
+ 'bg-default': '#100E11',
22
+ 'bg-200': '#2A2A30',
23
+ 'bg-300': '#17171C',
24
+ 'bg-400': '#171517',
25
+ overlay: '#17171C',
26
+ divider: '#26272D',
27
+ bullish: '#73D090',
28
+ bearish: '#F46271'
29
+ }
30
+ },
31
+ {
32
+ id: 'ux-green-red-soft-light',
33
+ zhName: 'UX Light',
34
+ enName: 'UX Light',
35
+ colorScheme: 'light',
36
+ colorVariables: {
37
+ default: '#000000',
38
+ white: '#FFFFFF',
39
+ transparent: 'transparent',
40
+ foreground: '#000000',
41
+ secondary: '#3D3C3F',
42
+ tertiary: '#CFCFD7',
43
+ primary: '#D745FF',
44
+ success: '#19AB5E',
45
+ danger: '#FF5868',
46
+ alert: '#F07939',
47
+ warning: '#F6932B',
48
+ gold: '#FFB800',
49
+ 'bg-default': '#F6F6F6',
50
+ 'bg-200': '#E9E7EE',
51
+ 'bg-300': '#F6F6F6',
52
+ 'bg-400': '#FFFFFF',
53
+ overlay: '#FFFFFF',
54
+ divider: '#DAD7E0',
55
+ bullish: '#19AB5E',
56
+ bearish: '#FF5868'
57
+ }
58
+ },
2
59
  {
3
60
  id: 'ux-purple-gold-dark',
4
- zhName: 'UX 紫金 Dark',
5
- enName: 'UX Purple/Gold Dark',
61
+ zhName: 'UX 经典 Dark',
62
+ enName: 'UX Classic Dark',
6
63
  colorScheme: 'dark',
7
64
  colorVariables: {
8
65
  default: '#FFFFFF',
@@ -22,21 +79,21 @@ const themeData = [
22
79
  'bg-300': '#17171C',
23
80
  'bg-400': '#0F0F0F',
24
81
  overlay: '#17171C',
25
- divider: '#282828',
82
+ divider: '#26272D',
26
83
  bullish: '#D745FF',
27
- bearish: '#FFAC34'
84
+ bearish: '#FFB800'
28
85
  }
29
86
  },
30
87
  {
31
88
  id: 'ux-purple-gold-light',
32
- zhName: 'UX 紫金 Light',
33
- enName: 'UX Purple/Gold Light',
89
+ zhName: 'UX 经典 Light',
90
+ enName: 'UX Classic Light',
34
91
  colorScheme: 'light',
35
92
  colorVariables: {
36
- default: '#000000',
93
+ default: '#0C0C0F',
37
94
  white: '#FFFFFF',
38
95
  transparent: 'transparent',
39
- foreground: '#000000',
96
+ foreground: '#0C0C0F',
40
97
  secondary: '#767A80',
41
98
  tertiary: '#D8D8DE',
42
99
  primary: '#D745FF',
@@ -52,7 +109,7 @@ const themeData = [
52
109
  overlay: '#FFFFFF',
53
110
  divider: '#E8E8ED',
54
111
  bullish: '#D745FF',
55
- bearish: '#F9A01E'
112
+ bearish: '#F38300'
56
113
  }
57
114
  },
58
115
  {
@@ -78,7 +135,7 @@ const themeData = [
78
135
  'bg-300': '#17171C',
79
136
  'bg-400': '#0F0F0F',
80
137
  overlay: '#17171C',
81
- divider: '#282828',
138
+ divider: '#26272D',
82
139
  bullish: '#45B167',
83
140
  bearish: '#E84A5A'
84
141
  }
@@ -107,64 +164,8 @@ const themeData = [
107
164
  'bg-400': '#FFFFFF',
108
165
  overlay: '#FFFFFF',
109
166
  divider: '#E8E8ED',
110
- bullish: '#45B167',
111
- bearish: '#E84A5A'
112
- }
113
- },
114
- {
115
- id: 'ux-green-red-soft-dark',
116
- zhName: 'UX 柔和 Dark',
117
- enName: 'UX Soft Dark',
118
- colorScheme: 'dark',
119
- colorVariables: {
120
- default: '#FDFDFE',
121
- white: '#FFFFFF',
122
- transparent: 'transparent',
123
- foreground: '#FDFDFE',
124
- secondary: '#BBBBC4',
125
- tertiary: '#70707C',
126
- primary: '#D745FF',
127
- success: '#73D090',
128
- danger: '#F46271',
129
- alert: '#F37A39',
130
- warning: '#F8BF63',
131
- gold: '#FFB800',
132
- 'bg-default': '#100E11',
133
- 'bg-200': '#2A2A30',
134
- 'bg-300': '#17171C',
135
- 'bg-400': '#19161B',
136
- overlay: '#17171C',
137
- divider: '#282828',
138
- bullish: '#73D090',
139
- bearish: '#F46271'
140
- }
141
- },
142
- {
143
- id: 'ux-green-red-soft-light',
144
- zhName: 'UX 柔和 Light',
145
- enName: 'UX Soft Light',
146
- colorScheme: 'light',
147
- colorVariables: {
148
- default: '#0C0C0F',
149
- white: '#FFFFFF',
150
- transparent: 'transparent',
151
- foreground: '#0C0C0F',
152
- secondary: '#363538',
153
- tertiary: '#7B7B85',
154
- primary: '#D745FF',
155
- success: '#19AB5E',
156
- danger: '#FF5868',
157
- alert: '#F07939',
158
- warning: '#F6932B',
159
- gold: '#FFB800',
160
- 'bg-default': '#F6F6F6',
161
- 'bg-200': '#E9E7EE',
162
- 'bg-300': '#F6F6F6',
163
- 'bg-400': '#FFFFFF',
164
- overlay: '#FFFFFF',
165
- divider: '#DAD7E0',
166
- bullish: '#19AB5E',
167
- bearish: '#FF5868'
167
+ bullish: '#2E9F4A',
168
+ bearish: '#DE4A40'
168
169
  }
169
170
  },
170
171
  {
@@ -179,27 +180,27 @@ const themeData = [
179
180
  transparent: 'transparent',
180
181
  foreground: '#F0F5F5',
181
182
  secondary: '#C4CCCC',
182
- tertiary: '#757E80',
183
+ tertiary: '#5D6466',
183
184
  primary: '#86D99F',
184
185
  success: '#86D99F',
185
186
  danger: '#F26682',
186
187
  alert: '#F55832',
187
- warning: '#EDB951',
188
+ warning: '#F2C366',
188
189
  gold: '#F5DA54',
189
190
  'bg-default': '#0C0C0F',
190
- 'bg-200': '#282A2E',
191
+ 'bg-200': '#1F2024',
191
192
  'bg-300': '#1A1B1F',
192
193
  'bg-400': '#111214',
193
194
  overlay: '#1A1B1F',
194
- divider: '#282828',
195
- bullish: '#1DB069',
196
- bearish: '#DE4E52'
195
+ divider: '#26272D',
196
+ bullish: '#86D99F',
197
+ bearish: '#F26682'
197
198
  }
198
199
  },
199
200
  {
200
201
  id: 'axiom-dark',
201
- zhName: 'AXIOM',
202
- enName: 'AXIOM',
202
+ zhName: 'Axiom',
203
+ enName: 'Axiom',
203
204
  fontName: 'Geist',
204
205
  colorScheme: 'dark',
205
206
  colorVariables: {
@@ -208,7 +209,7 @@ const themeData = [
208
209
  transparent: 'transparent',
209
210
  foreground: '#FCFCFC',
210
211
  secondary: '#C8C9D1',
211
- tertiary: '#777A8C',
212
+ tertiary: '#4A4D5E',
212
213
  primary: '#526FFF',
213
214
  success: '#2FE3AC',
214
215
  danger: '#EC397A',
@@ -216,13 +217,13 @@ const themeData = [
216
217
  warning: '#F7931A',
217
218
  gold: '#F7931A',
218
219
  'bg-default': '#0C0C0F',
219
- 'bg-200': '#333542',
220
+ 'bg-200': '#22242D',
220
221
  'bg-300': '#18181A',
221
222
  'bg-400': '#101114',
222
223
  overlay: '#18181A',
223
- divider: '#333542',
224
- bullish: '#0B9981',
225
- bearish: '#F23646'
224
+ divider: '#25272E',
225
+ bullish: '#2FE3AC',
226
+ bearish: '#EC397A'
226
227
  }
227
228
  },
228
229
  {
@@ -243,14 +244,14 @@ const themeData = [
243
244
  alert: '#EF8F50',
244
245
  warning: '#FFB648',
245
246
  gold: '#FFB648',
246
- 'bg-default': '#0F1A1F',
247
- 'bg-200': '#273035',
247
+ 'bg-default': '#0A1318',
248
+ 'bg-200': '#222D33',
248
249
  'bg-300': '#1B2429',
249
250
  'bg-400': '#0F1A1F',
250
251
  overlay: '#1B2429',
251
- divider: '#444651',
252
- bullish: '#51D2C1',
253
- bearish: '#D45B71'
252
+ divider: '#394145',
253
+ bullish: '#50D2C1',
254
+ bearish: '#ED7088'
254
255
  }
255
256
  },
256
257
  {
@@ -264,15 +265,15 @@ const themeData = [
264
265
  transparent: 'transparent',
265
266
  foreground: '#FFFFFF',
266
267
  secondary: '#999999',
267
- tertiary: '#757E80',
268
+ tertiary: '#54515E',
268
269
  primary: '#AB9FF2',
269
270
  success: '#2EC08B',
270
271
  danger: '#F7525F',
271
272
  alert: '#FF9C3F',
272
- warning: '#FFD13F',
273
+ warning: '#FFE629',
273
274
  gold: '#FFD13F',
274
275
  'bg-default': '#13121A',
275
- 'bg-200': '#222222',
276
+ 'bg-200': '#2C2C38',
276
277
  'bg-300': '#272735',
277
278
  'bg-400': '#22212A',
278
279
  overlay: '#272735',
@@ -292,7 +293,7 @@ const themeData = [
292
293
  transparent: 'transparent',
293
294
  foreground: '#EAECEF',
294
295
  secondary: '#929AA5',
295
- tertiary: '#707A8A',
296
+ tertiary: '#444A56',
296
297
  primary: '#FCD535',
297
298
  success: '#2EBD85',
298
299
  danger: '#F6465D',
@@ -300,7 +301,7 @@ const themeData = [
300
301
  warning: '#F0B90B',
301
302
  gold: '#2DBD85',
302
303
  'bg-default': '#0B0E11',
303
- 'bg-200': '#29313D',
304
+ 'bg-200': '#252B36',
304
305
  'bg-300': '#202630',
305
306
  'bg-400': '#181A20',
306
307
  overlay: '#202630',
@@ -311,8 +312,8 @@ const themeData = [
311
312
  },
312
313
  {
313
314
  id: 'bullx-dark',
314
- zhName: "Bullx's",
315
- enName: "Bullx's",
315
+ zhName: 'BullX',
316
+ enName: 'BullX',
316
317
  fontName: 'IBM Plex Sans',
317
318
  colorScheme: 'dark',
318
319
  colorVariables: {
@@ -321,7 +322,7 @@ const themeData = [
321
322
  transparent: 'transparent',
322
323
  foreground: '#E9E9E9',
323
324
  secondary: '#98989B',
324
- tertiary: '#686a6d',
325
+ tertiary: '#4B4D51',
325
326
  primary: '#61DC9B',
326
327
  success: '#459C6E',
327
328
  danger: '#A13C45',
@@ -330,9 +331,9 @@ const themeData = [
330
331
  gold: '#E9BF52',
331
332
  'bg-default': '#09090B',
332
333
  'bg-200': '#1B1D22',
333
- 'bg-300': '#0D0D10',
334
+ 'bg-300': '#15171A',
334
335
  'bg-400': '#0F0F0F',
335
- overlay: '#0D0D10',
336
+ overlay: '#15171A',
336
337
  divider: '#1E2025',
337
338
  bullish: '#459C6E',
338
339
  bearish: '#A13C45'
@@ -340,4 +341,4 @@ const themeData = [
340
341
  }
341
342
  ];
342
343
  const themeKeys = themeData.map((theme)=>theme.id);
343
- export { themeData, themeKeys };
344
+ export { DEFAULT_THEME_ID, themeData, themeKeys };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@particle-network/ui-shared",
3
- "version": "0.3.0-beta.5",
3
+ "version": "0.3.0-beta.7",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "react-native": "./dist/index.js",
@@ -45,8 +45,8 @@
45
45
  "@rslib/core": "^0.12.3",
46
46
  "@types/react": "^19.1.10",
47
47
  "react": "^19.1.0",
48
- "@particle-network/lintstaged-config": "0.1.0",
49
- "@particle-network/eslint-config": "0.3.0"
48
+ "@particle-network/eslint-config": "0.3.0",
49
+ "@particle-network/lintstaged-config": "0.1.0"
50
50
  },
51
51
  "scripts": {
52
52
  "build": "rslib build",