@particle-network/ui-shared 0.3.2-beta.5 → 0.4.1-beta.0

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 +68 -19
  2. package/dist/color.js +143 -52
  3. package/dist/theme-data.d.ts +5 -1
  4. package/dist/theme-data.js +19 -19
  5. package/package.json +3 -3
package/dist/color.d.ts CHANGED
@@ -11,25 +11,74 @@ export declare const foregroundColorList: UXForegroundColor[];
11
11
  export declare const backgroundColorList: UXBackgroundColor[];
12
12
  export declare const uxColorList: UXColor[];
13
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";
14
+ foreground: {
15
+ self: string[];
16
+ foreground: string;
17
+ };
18
+ secondary: {
19
+ self: string[];
20
+ foreground: string;
21
+ };
22
+ tertiary: {
23
+ self: string[];
24
+ foreground: string;
25
+ };
26
+ primary: {
27
+ self: string[];
28
+ foreground: string;
29
+ };
30
+ success: {
31
+ self: string[];
32
+ foreground: string;
33
+ };
34
+ danger: {
35
+ self: string[];
36
+ foreground: string;
37
+ };
38
+ alert: {
39
+ self: string[];
40
+ foreground: string;
41
+ };
42
+ warning: {
43
+ self: string[];
44
+ foreground: string;
45
+ };
46
+ gold: {
47
+ self: string[];
48
+ foreground: string;
49
+ };
50
+ bullish: {
51
+ self: string[];
52
+ foreground: string;
53
+ };
54
+ bearish: {
55
+ self: string[];
56
+ foreground: string;
57
+ };
58
+ 'bg-default': {
59
+ self: string[];
60
+ foreground: string;
61
+ };
62
+ 'bg-200': {
63
+ self: string[];
64
+ foreground: string;
65
+ };
66
+ 'bg-300': {
67
+ self: string[];
68
+ foreground: string;
69
+ };
70
+ 'bg-400': {
71
+ self: string[];
72
+ foreground: string;
73
+ };
74
+ overlay: {
75
+ self: string[];
76
+ foreground: string;
77
+ };
78
+ divider: {
79
+ self: string[];
80
+ foreground: string;
81
+ };
33
82
  };
34
83
  export declare const colorToClassName: Record<UXColor, string>;
35
84
  export type ColorString = `#${string}`;
package/dist/color.js CHANGED
@@ -71,25 +71,116 @@ const uxColorList = [
71
71
  ...backgroundColorList
72
72
  ];
73
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'
74
+ foreground: {
75
+ self: [
76
+ '--heroui-foreground'
77
+ ],
78
+ foreground: ''
79
+ },
80
+ secondary: {
81
+ self: [
82
+ '--heroui-secondary',
83
+ '--heroui-foreground-300'
84
+ ],
85
+ foreground: ''
86
+ },
87
+ tertiary: {
88
+ self: [
89
+ '--heroui-tertiary',
90
+ '--heroui-foreground-100'
91
+ ],
92
+ foreground: ''
93
+ },
94
+ primary: {
95
+ self: [
96
+ '--heroui-primary',
97
+ '--heroui-primary-500'
98
+ ],
99
+ foreground: ''
100
+ },
101
+ success: {
102
+ self: [
103
+ '--heroui-success',
104
+ '--heroui-success-500'
105
+ ],
106
+ foreground: ''
107
+ },
108
+ danger: {
109
+ self: [
110
+ '--heroui-danger',
111
+ '--heroui-danger-500'
112
+ ],
113
+ foreground: ''
114
+ },
115
+ alert: {
116
+ self: [
117
+ '--heroui-alert',
118
+ '--heroui-alert-500'
119
+ ],
120
+ foreground: ''
121
+ },
122
+ warning: {
123
+ self: [
124
+ '--heroui-warning',
125
+ '--heroui-warning-500'
126
+ ],
127
+ foreground: ''
128
+ },
129
+ gold: {
130
+ self: [
131
+ '--heroui-gold'
132
+ ],
133
+ foreground: ''
134
+ },
135
+ bullish: {
136
+ self: [
137
+ '--heroui-bullish'
138
+ ],
139
+ foreground: ''
140
+ },
141
+ bearish: {
142
+ self: [
143
+ '--heroui-bearish'
144
+ ],
145
+ foreground: ''
146
+ },
147
+ 'bg-default': {
148
+ self: [
149
+ '--heroui-background'
150
+ ],
151
+ foreground: ''
152
+ },
153
+ 'bg-200': {
154
+ self: [
155
+ '--heroui-background-200'
156
+ ],
157
+ foreground: ''
158
+ },
159
+ 'bg-300': {
160
+ self: [
161
+ '--heroui-background-300'
162
+ ],
163
+ foreground: ''
164
+ },
165
+ 'bg-400': {
166
+ self: [
167
+ '--heroui-background-400'
168
+ ],
169
+ foreground: ''
170
+ },
171
+ overlay: {
172
+ self: [
173
+ '--heroui-overlay',
174
+ '--heroui-content1'
175
+ ],
176
+ foreground: ''
177
+ },
178
+ divider: {
179
+ self: [
180
+ '--heroui-divider'
181
+ ],
182
+ foreground: ''
183
+ }
93
184
  };
94
185
  const colorToClassName = {
95
186
  default: 'text-foreground',
@@ -113,43 +204,43 @@ const colorToClassName = {
113
204
  divider: 'text-divider',
114
205
  transparent: 'text-transparent'
115
206
  };
207
+ function hexToRgb(hex) {
208
+ let r = 0, g = 0, b = 0;
209
+ if (4 === hex.length || 5 === hex.length) {
210
+ r = parseInt(hex[1] + hex[1], 16);
211
+ g = parseInt(hex[2] + hex[2], 16);
212
+ b = parseInt(hex[3] + hex[3], 16);
213
+ } else if (7 === hex.length || 9 === hex.length) {
214
+ r = parseInt(hex.slice(1, 3), 16);
215
+ g = parseInt(hex.slice(3, 5), 16);
216
+ b = parseInt(hex.slice(5, 7), 16);
217
+ } else throw new Error('Invalid hex color format');
218
+ return [
219
+ r,
220
+ g,
221
+ b
222
+ ];
223
+ }
116
224
  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)}%`;
225
+ const [r, g, b] = hexToRgb(hex);
226
+ const normalizedR = r / 255;
227
+ const normalizedG = g / 255;
228
+ const normalizedB = b / 255;
229
+ const max = Math.max(normalizedR, normalizedG, normalizedB);
230
+ const min = Math.min(normalizedR, normalizedG, normalizedB);
231
+ const lightness = (max + min) / 2;
232
+ if (max === min) return `0 0% ${100 * lightness}%`;
233
+ let saturation = 0;
234
+ saturation = lightness < 0.5 ? (max - min) / (max + min) : (max - min) / (2 - max - min);
235
+ let hue;
236
+ hue = max === normalizedR ? (normalizedG - normalizedB) / (max - min) : max === normalizedG ? 2 + (normalizedB - normalizedR) / (max - min) : 4 + (normalizedR - normalizedG) / (max - min);
237
+ hue *= 60;
238
+ if (hue < 0) hue += 360;
239
+ return `${hue.toFixed(2)} ${(100 * saturation).toFixed(2)}% ${(100 * lightness).toFixed(2)}%`;
149
240
  }
150
241
  function hexColorToHSL(hex) {
151
242
  const value = hexColorToHSLValue(hex);
152
- return `hsl(${value})`;
243
+ return `hsl(${value.replaceAll(' ', ', ')})`;
153
244
  }
154
245
  function hslToHex(hslStr) {
155
246
  const hslMatch = hslStr.match(/(\d*\.?\d+)\s+(\d*\.?\d+)%?\s+(\d*\.?\d+)%?/);
package/dist/theme-data.d.ts CHANGED
@@ -1,5 +1,5 @@
1
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';
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' | 'custom';
3
3
  export type ColorScheme = 'dark' | 'light';
4
4
  export interface ThemeItemType {
5
5
  id: ThemeId;
@@ -8,6 +8,10 @@ export interface ThemeItemType {
8
8
  fontName?: string;
9
9
  colorScheme: ColorScheme;
10
10
  colorVariables: Record<Exclude<UXColor, 'transparent' | 'white'>, string>;
11
+ /**
12
+ * 自定义主题的基础主题ID（仅当 id === 'custom' 时使用）
13
+ */
14
+ baseThemeId?: ThemeId;
11
15
  }
12
16
  export declare const DEFAULT_THEME_ID = "ux-green-red-soft-dark";
13
17
  export declare const DEFAULT_MARKET_THEME_ID = "ux-purple-gold-dark";
package/dist/theme-data.js CHANGED
@@ -317,29 +317,29 @@ const themeData = [
317
317
  }
318
318
  },
319
319
  {
320
- id: 'product-test',
321
- zhName: '产品测试',
322
- enName: 'Product Test',
320
+ id: 'custom',
321
+ zhName: '自定义',
322
+ enName: 'Custom',
323
323
  colorScheme: 'dark',
324
324
  colorVariables: {
325
- default: '#F6FEFD',
326
- foreground: '#F6FEFD',
327
- secondary: '#D1D4DC',
328
- tertiary: '#949E9C',
329
- primary: '#50D2C1',
325
+ default: '#FDFDFE',
326
+ foreground: '#FDFDFE',
327
+ secondary: '#BBBBC4',
328
+ tertiary: '#4E4E56',
329
+ primary: '#D745FF',
330
330
  success: '#19AB5E',
331
- danger: '#E84A5A',
332
- alert: '#F57733',
333
- warning: '#FFD13F',
331
+ danger: '#FF5868',
332
+ alert: '#F37A39',
333
+ warning: '#F8BF63',
334
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'
335
+ 'bg-default': '#100E11',
336
+ 'bg-200': '#2A2A30',
337
+ 'bg-300': '#1F2025',
338
+ 'bg-400': '#171517',
339
+ overlay: '#1F2025',
340
+ divider: '#26272D',
341
+ bullish: '#19AB5E',
342
+ bearish: '#FF5868'
343
343
  }
344
344
  }
345
345
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@particle-network/ui-shared",
3
- "version": "0.3.2-beta.5",
3
+ "version": "0.4.1-beta.0",
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",