@txnlab/use-wallet-ui-react 0.3.1 → 0.4.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/README.md +80 -1
- package/dist/cjs/index.cjs +59 -7
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/index.js +3937 -3857
- package/dist/esm/index.js.map +1 -1
- package/dist/style.css +176 -231
- package/dist/types/index.d.cts +31 -1
- package/dist/types/index.d.ts +31 -1
- package/package.json +3 -1
- package/src/theme.css +76 -0
package/src/theme.css
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/* Theme CSS custom properties for wallet UI components */
|
|
2
|
+
/* Import this file in Tailwind projects to enable theming */
|
|
3
|
+
|
|
4
|
+
/* Light mode (default) */
|
|
5
|
+
[data-wallet-ui] {
|
|
6
|
+
--wui-color-primary: #2d2df1;
|
|
7
|
+
--wui-color-primary-hover: #2929d9;
|
|
8
|
+
--wui-color-primary-text: #ffffff;
|
|
9
|
+
--wui-color-bg: #ffffff;
|
|
10
|
+
--wui-color-bg-secondary: #f9fafb;
|
|
11
|
+
--wui-color-bg-tertiary: #f3f4f6;
|
|
12
|
+
--wui-color-bg-hover: #e9e9fd;
|
|
13
|
+
--wui-color-text: #1f2937;
|
|
14
|
+
--wui-color-text-secondary: #6b7280;
|
|
15
|
+
--wui-color-text-tertiary: #9ca3af;
|
|
16
|
+
--wui-color-border: #e5e7eb;
|
|
17
|
+
--wui-color-link: rgba(45, 45, 241, 0.8);
|
|
18
|
+
--wui-color-link-hover: #2d2df1;
|
|
19
|
+
--wui-color-overlay: rgba(0, 0, 0, 0.3);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* Dark mode via data-theme attribute (explicit) */
|
|
23
|
+
[data-wallet-ui][data-theme='dark'] {
|
|
24
|
+
--wui-color-primary: #bfbff9;
|
|
25
|
+
--wui-color-primary-hover: #d4d4fa;
|
|
26
|
+
--wui-color-primary-text: #001324;
|
|
27
|
+
--wui-color-bg: #001324;
|
|
28
|
+
--wui-color-bg-secondary: #101b29;
|
|
29
|
+
--wui-color-bg-tertiary: #192a39;
|
|
30
|
+
--wui-color-bg-hover: #192a39;
|
|
31
|
+
--wui-color-text: #e9e9fd;
|
|
32
|
+
--wui-color-text-secondary: #99a1a7;
|
|
33
|
+
--wui-color-text-tertiary: #6b7280;
|
|
34
|
+
--wui-color-border: #192a39;
|
|
35
|
+
--wui-color-link: #6c6cf1;
|
|
36
|
+
--wui-color-link-hover: #8080f3;
|
|
37
|
+
--wui-color-overlay: rgba(0, 0, 0, 0.5);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Dark mode via .dark class on ancestor (Tailwind convention) */
|
|
41
|
+
.dark [data-wallet-ui]:not([data-theme='light']) {
|
|
42
|
+
--wui-color-primary: #bfbff9;
|
|
43
|
+
--wui-color-primary-hover: #d4d4fa;
|
|
44
|
+
--wui-color-primary-text: #001324;
|
|
45
|
+
--wui-color-bg: #001324;
|
|
46
|
+
--wui-color-bg-secondary: #101b29;
|
|
47
|
+
--wui-color-bg-tertiary: #192a39;
|
|
48
|
+
--wui-color-bg-hover: #192a39;
|
|
49
|
+
--wui-color-text: #e9e9fd;
|
|
50
|
+
--wui-color-text-secondary: #99a1a7;
|
|
51
|
+
--wui-color-text-tertiary: #6b7280;
|
|
52
|
+
--wui-color-border: #192a39;
|
|
53
|
+
--wui-color-link: #6c6cf1;
|
|
54
|
+
--wui-color-link-hover: #8080f3;
|
|
55
|
+
--wui-color-overlay: rgba(0, 0, 0, 0.5);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Dark mode via system preference (when theme="system" or no explicit theme) */
|
|
59
|
+
@media (prefers-color-scheme: dark) {
|
|
60
|
+
[data-wallet-ui]:not([data-theme='light']):not([data-theme='dark']) {
|
|
61
|
+
--wui-color-primary: #bfbff9;
|
|
62
|
+
--wui-color-primary-hover: #d4d4fa;
|
|
63
|
+
--wui-color-primary-text: #001324;
|
|
64
|
+
--wui-color-bg: #001324;
|
|
65
|
+
--wui-color-bg-secondary: #101b29;
|
|
66
|
+
--wui-color-bg-tertiary: #192a39;
|
|
67
|
+
--wui-color-bg-hover: #192a39;
|
|
68
|
+
--wui-color-text: #e9e9fd;
|
|
69
|
+
--wui-color-text-secondary: #99a1a7;
|
|
70
|
+
--wui-color-text-tertiary: #6b7280;
|
|
71
|
+
--wui-color-border: #192a39;
|
|
72
|
+
--wui-color-link: #6c6cf1;
|
|
73
|
+
--wui-color-link-hover: #8080f3;
|
|
74
|
+
--wui-color-overlay: rgba(0, 0, 0, 0.5);
|
|
75
|
+
}
|
|
76
|
+
}
|