@particle-network/ui-shared 0.3.0-beta.6 → 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.
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 };
@@ -9,6 +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-purple-gold-dark";
12
+ export declare const DEFAULT_THEME_ID = "ux-green-red-soft-dark";
13
13
  export declare const themeData: ThemeItemType[];
14
14
  export declare const themeKeys: ThemeId[];
@@ -1,9 +1,65 @@
1
- const DEFAULT_THEME_ID = 'ux-purple-gold-dark';
1
+ const DEFAULT_THEME_ID = 'ux-green-red-soft-dark';
2
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
+ },
3
59
  {
4
60
  id: 'ux-purple-gold-dark',
5
- zhName: 'UX 紫金 Dark',
6
- enName: 'UX Purple/Gold Dark',
61
+ zhName: 'UX 经典 Dark',
62
+ enName: 'UX Classic Dark',
7
63
  colorScheme: 'dark',
8
64
  colorVariables: {
9
65
  default: '#FFFFFF',
@@ -23,15 +79,15 @@ const themeData = [
23
79
  'bg-300': '#17171C',
24
80
  'bg-400': '#0F0F0F',
25
81
  overlay: '#17171C',
26
- divider: '#282828',
82
+ divider: '#26272D',
27
83
  bullish: '#D745FF',
28
- bearish: '#FFAC34'
84
+ bearish: '#FFB800'
29
85
  }
30
86
  },
31
87
  {
32
88
  id: 'ux-purple-gold-light',
33
- zhName: 'UX 紫金 Light',
34
- enName: 'UX Purple/Gold Light',
89
+ zhName: 'UX 经典 Light',
90
+ enName: 'UX Classic Light',
35
91
  colorScheme: 'light',
36
92
  colorVariables: {
37
93
  default: '#0C0C0F',
@@ -53,7 +109,7 @@ const themeData = [
53
109
  overlay: '#FFFFFF',
54
110
  divider: '#E8E8ED',
55
111
  bullish: '#D745FF',
56
- bearish: '#F9A01E'
112
+ bearish: '#F38300'
57
113
  }
58
114
  },
59
115
  {
@@ -79,7 +135,7 @@ const themeData = [
79
135
  'bg-300': '#17171C',
80
136
  'bg-400': '#0F0F0F',
81
137
  overlay: '#17171C',
82
- divider: '#282828',
138
+ divider: '#26272D',
83
139
  bullish: '#45B167',
84
140
  bearish: '#E84A5A'
85
141
  }
@@ -108,64 +164,8 @@ const themeData = [
108
164
  'bg-400': '#FFFFFF',
109
165
  overlay: '#FFFFFF',
110
166
  divider: '#E8E8ED',
111
- bullish: '#45B167',
112
- bearish: '#E84A5A'
113
- }
114
- },
115
- {
116
- id: 'ux-green-red-soft-dark',
117
- zhName: 'UX 柔和 Dark',
118
- enName: 'UX Soft Dark',
119
- colorScheme: 'dark',
120
- colorVariables: {
121
- default: '#FDFDFE',
122
- white: '#FFFFFF',
123
- transparent: 'transparent',
124
- foreground: '#FDFDFE',
125
- secondary: '#BBBBC4',
126
- tertiary: '#70707C',
127
- primary: '#D745FF',
128
- success: '#73D090',
129
- danger: '#F46271',
130
- alert: '#F37A39',
131
- warning: '#F8BF63',
132
- gold: '#FFB800',
133
- 'bg-default': '#100E11',
134
- 'bg-200': '#2A2A30',
135
- 'bg-300': '#17171C',
136
- 'bg-400': '#171517',
137
- overlay: '#17171C',
138
- divider: '#282828',
139
- bullish: '#73D090',
140
- bearish: '#F46271'
141
- }
142
- },
143
- {
144
- id: 'ux-green-red-soft-light',
145
- zhName: 'UX 柔和 Light',
146
- enName: 'UX Soft Light',
147
- colorScheme: 'light',
148
- colorVariables: {
149
- default: '#000000',
150
- white: '#FFFFFF',
151
- transparent: 'transparent',
152
- foreground: '#000000',
153
- secondary: '#3D3C3F',
154
- tertiary: '#CFCFD7',
155
- primary: '#D745FF',
156
- success: '#19AB5E',
157
- danger: '#FF5868',
158
- alert: '#F07939',
159
- warning: '#F6932B',
160
- gold: '#FFB800',
161
- 'bg-default': '#F6F6F6',
162
- 'bg-200': '#E9E7EE',
163
- 'bg-300': '#F6F6F6',
164
- 'bg-400': '#FFFFFF',
165
- overlay: '#FFFFFF',
166
- divider: '#DAD7E0',
167
- bullish: '#19AB5E',
168
- bearish: '#FF5868'
167
+ bullish: '#2E9F4A',
168
+ bearish: '#DE4A40'
169
169
  }
170
170
  },
171
171
  {
@@ -185,22 +185,22 @@ const themeData = [
185
185
  success: '#86D99F',
186
186
  danger: '#F26682',
187
187
  alert: '#F55832',
188
- warning: '#EDB951',
188
+ warning: '#F2C366',
189
189
  gold: '#F5DA54',
190
190
  'bg-default': '#0C0C0F',
191
191
  'bg-200': '#1F2024',
192
192
  'bg-300': '#1A1B1F',
193
193
  'bg-400': '#111214',
194
194
  overlay: '#1A1B1F',
195
- divider: '#282828',
196
- bullish: '#1DB069',
197
- bearish: '#DE4E52'
195
+ divider: '#26272D',
196
+ bullish: '#86D99F',
197
+ bearish: '#F26682'
198
198
  }
199
199
  },
200
200
  {
201
201
  id: 'axiom-dark',
202
- zhName: 'AXIOM',
203
- enName: 'AXIOM',
202
+ zhName: 'Axiom',
203
+ enName: 'Axiom',
204
204
  fontName: 'Geist',
205
205
  colorScheme: 'dark',
206
206
  colorVariables: {
@@ -222,8 +222,8 @@ const themeData = [
222
222
  'bg-400': '#101114',
223
223
  overlay: '#18181A',
224
224
  divider: '#25272E',
225
- bullish: '#0B9981',
226
- bearish: '#F23646'
225
+ bullish: '#2FE3AC',
226
+ bearish: '#EC397A'
227
227
  }
228
228
  },
229
229
  {
@@ -250,8 +250,8 @@ const themeData = [
250
250
  'bg-400': '#0F1A1F',
251
251
  overlay: '#1B2429',
252
252
  divider: '#394145',
253
- bullish: '#51D2C1',
254
- bearish: '#D45B71'
253
+ bullish: '#50D2C1',
254
+ bearish: '#ED7088'
255
255
  }
256
256
  },
257
257
  {
@@ -270,7 +270,7 @@ const themeData = [
270
270
  success: '#2EC08B',
271
271
  danger: '#F7525F',
272
272
  alert: '#FF9C3F',
273
- warning: '#FFD13F',
273
+ warning: '#FFE629',
274
274
  gold: '#FFD13F',
275
275
  'bg-default': '#13121A',
276
276
  'bg-200': '#2C2C38',
@@ -312,8 +312,8 @@ const themeData = [
312
312
  },
313
313
  {
314
314
  id: 'bullx-dark',
315
- zhName: "Bullx's",
316
- enName: "Bullx's",
315
+ zhName: 'BullX',
316
+ enName: 'BullX',
317
317
  fontName: 'IBM Plex Sans',
318
318
  colorScheme: 'dark',
319
319
  colorVariables: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@particle-network/ui-shared",
3
- "version": "0.3.0-beta.6",
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",