@particle-network/ui-shared 0.2.0 → 0.3.0-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.
- package/dist/color.d.ts +17 -5
- package/dist/color.js +18 -5
- package/package.json +3 -3
package/dist/color.d.ts
CHANGED
|
@@ -11,17 +11,23 @@ export declare const foregroundColorList: readonly ["default", "secondary", "ter
|
|
|
11
11
|
export declare const colorToCSSVariable: {
|
|
12
12
|
readonly default: "--heroui-foreground";
|
|
13
13
|
readonly foreground: "--heroui-foreground";
|
|
14
|
-
readonly secondary: "--heroui-
|
|
14
|
+
readonly secondary: "--heroui-secondary";
|
|
15
15
|
readonly white: "--color-white";
|
|
16
|
-
readonly tertiary: "--heroui-
|
|
16
|
+
readonly tertiary: "--heroui-tertiary";
|
|
17
17
|
readonly primary: "--heroui-primary";
|
|
18
18
|
readonly success: "--heroui-success";
|
|
19
19
|
readonly danger: "--heroui-danger";
|
|
20
20
|
readonly alert: "--heroui-alert";
|
|
21
21
|
readonly warning: "--heroui-warning";
|
|
22
22
|
readonly gold: "--heroui-gold";
|
|
23
|
-
readonly bullish: "--bullish
|
|
24
|
-
readonly bearish: "--bearish
|
|
23
|
+
readonly bullish: "--heroui-bullish";
|
|
24
|
+
readonly bearish: "--heroui-bearish";
|
|
25
|
+
readonly 'bg-default': "--heroui-background";
|
|
26
|
+
readonly 'bg-200': "--heroui-background-200";
|
|
27
|
+
readonly 'bg-300': "--heroui-background-300";
|
|
28
|
+
readonly 'bg-400': "--heroui-background-400";
|
|
29
|
+
readonly overlay: "--heroui-overlay";
|
|
30
|
+
readonly divider: "--heroui-divider";
|
|
25
31
|
};
|
|
26
32
|
export declare const colorToClassName: {
|
|
27
33
|
readonly default: "text-foreground";
|
|
@@ -37,10 +43,16 @@ export declare const colorToClassName: {
|
|
|
37
43
|
readonly gold: "text-gold";
|
|
38
44
|
readonly bullish: "text-bullish";
|
|
39
45
|
readonly bearish: "text-bearish";
|
|
46
|
+
readonly 'bg-default': "text-background";
|
|
47
|
+
readonly 'bg-200': "text-background-200";
|
|
48
|
+
readonly 'bg-300': "text-background-300";
|
|
49
|
+
readonly 'bg-400': "text-background-400";
|
|
50
|
+
readonly overlay: "text-background-overlay";
|
|
51
|
+
readonly divider: "text-background-divider";
|
|
40
52
|
};
|
|
41
53
|
export type ColorString = `#${string}`;
|
|
42
54
|
export declare function hexColorToHSLValue(hex: ColorString): string;
|
|
43
55
|
export declare function hexColorToHSL(hex: ColorString): string;
|
|
44
56
|
export declare function hslToHex(hslStr: string): string;
|
|
45
|
-
export declare const getHexColorFromCSSVariable: (color:
|
|
57
|
+
export declare const getHexColorFromCSSVariable: (color: UXColor) => string;
|
|
46
58
|
export declare const setColorWithOpacity: (color: string, opacity: number) => string;
|
package/dist/color.js
CHANGED
|
@@ -60,17 +60,23 @@ const foregroundColorList = [
|
|
|
60
60
|
const colorToCSSVariable = {
|
|
61
61
|
default: '--heroui-foreground',
|
|
62
62
|
foreground: '--heroui-foreground',
|
|
63
|
-
secondary: '--heroui-
|
|
63
|
+
secondary: '--heroui-secondary',
|
|
64
64
|
white: '--color-white',
|
|
65
|
-
tertiary: '--heroui-
|
|
65
|
+
tertiary: '--heroui-tertiary',
|
|
66
66
|
primary: '--heroui-primary',
|
|
67
67
|
success: '--heroui-success',
|
|
68
68
|
danger: '--heroui-danger',
|
|
69
69
|
alert: '--heroui-alert',
|
|
70
70
|
warning: '--heroui-warning',
|
|
71
71
|
gold: '--heroui-gold',
|
|
72
|
-
bullish: '--bullish
|
|
73
|
-
bearish: '--bearish
|
|
72
|
+
bullish: '--heroui-bullish',
|
|
73
|
+
bearish: '--heroui-bearish',
|
|
74
|
+
'bg-default': '--heroui-background',
|
|
75
|
+
'bg-200': '--heroui-background-200',
|
|
76
|
+
'bg-300': '--heroui-background-300',
|
|
77
|
+
'bg-400': '--heroui-background-400',
|
|
78
|
+
overlay: '--heroui-overlay',
|
|
79
|
+
divider: '--heroui-divider'
|
|
74
80
|
};
|
|
75
81
|
const colorToClassName = {
|
|
76
82
|
default: 'text-foreground',
|
|
@@ -85,7 +91,13 @@ const colorToClassName = {
|
|
|
85
91
|
warning: 'text-warning',
|
|
86
92
|
gold: 'text-gold',
|
|
87
93
|
bullish: 'text-bullish',
|
|
88
|
-
bearish: 'text-bearish'
|
|
94
|
+
bearish: 'text-bearish',
|
|
95
|
+
'bg-default': 'text-background',
|
|
96
|
+
'bg-200': 'text-background-200',
|
|
97
|
+
'bg-300': 'text-background-300',
|
|
98
|
+
'bg-400': 'text-background-400',
|
|
99
|
+
overlay: 'text-background-overlay',
|
|
100
|
+
divider: 'text-background-divider'
|
|
89
101
|
};
|
|
90
102
|
function hexColorToHSLValue(hex) {
|
|
91
103
|
const hexWithoutHash = hex.replace('#', '');
|
|
@@ -172,6 +184,7 @@ function hslToHex(hslStr) {
|
|
|
172
184
|
return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
|
|
173
185
|
}
|
|
174
186
|
const getHexColorFromCSSVariable = (color)=>{
|
|
187
|
+
if ('transparent' === color) return 'transparent';
|
|
175
188
|
const rootStyles = getComputedStyle(document.documentElement);
|
|
176
189
|
const value = rootStyles.getPropertyValue(colorToCSSVariable[color]).trim();
|
|
177
190
|
if (!value) return '#000000';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@particle-network/ui-shared",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0-beta.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"react-native": "./dist/index.js",
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"@types/react": "^19.1.10",
|
|
47
47
|
"react": "^19.1.0",
|
|
48
48
|
"typescript": "^5.8.3",
|
|
49
|
-
"@particle-network/
|
|
50
|
-
"@particle-network/
|
|
49
|
+
"@particle-network/lintstaged-config": "0.1.0",
|
|
50
|
+
"@particle-network/eslint-config": "0.3.0"
|
|
51
51
|
},
|
|
52
52
|
"scripts": {
|
|
53
53
|
"build": "rslib build",
|