kaleido-ui 0.1.2 → 0.1.4
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/css/kaleido-ui.css +339 -72
- package/dist/native/index.cjs +68 -15
- package/dist/native/index.d.cts +68 -16
- package/dist/native/index.d.ts +68 -16
- package/dist/native/index.js +68 -15
- package/dist/tokens/index.cjs +188 -6
- package/dist/tokens/index.d.cts +236 -6
- package/dist/tokens/index.d.ts +236 -6
- package/dist/tokens/index.js +181 -6
- package/dist/web/index.cjs +5074 -343
- package/dist/web/index.d.cts +939 -16
- package/dist/web/index.d.ts +939 -16
- package/dist/web/index.js +4996 -339
- package/package.json +16 -13
- package/dist/tailwind/index.cjs +0 -225
- package/dist/tailwind/index.d.cts +0 -162
- package/dist/tailwind/index.d.ts +0 -162
- package/dist/tailwind/index.js +0 -202
- package/tailwind/index.d.ts +0 -1
- package/tailwind/index.js +0 -1
package/dist/css/kaleido-ui.css
CHANGED
|
@@ -1,84 +1,351 @@
|
|
|
1
|
+
/* AUTO-GENERATED — do not edit by hand.
|
|
2
|
+
* Source: scripts/generate-css.ts ← src/tokens/
|
|
3
|
+
* Regenerate: npm run generate:css
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* ── Material Symbols ──────────────────────────────────────────────────── */
|
|
1
7
|
.material-symbols-outlined {
|
|
2
|
-
font-variation-settings:
|
|
3
|
-
'FILL' 0,
|
|
4
|
-
'wght' 400,
|
|
5
|
-
'GRAD' 0,
|
|
6
|
-
'opsz' 24;
|
|
8
|
+
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
7
9
|
}
|
|
8
|
-
|
|
9
10
|
.material-symbols-outlined.filled {
|
|
10
|
-
font-variation-settings:
|
|
11
|
-
'FILL' 1,
|
|
12
|
-
'wght' 400,
|
|
13
|
-
'GRAD' 0,
|
|
14
|
-
'opsz' 24;
|
|
11
|
+
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
15
12
|
}
|
|
16
13
|
|
|
14
|
+
/* ── Semantic colors (light mode) — from src/tokens/colors.ts ───────────── */
|
|
17
15
|
:root {
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
--
|
|
26
|
-
--
|
|
27
|
-
--chart-4: #ffb900;
|
|
28
|
-
--chart-5: #fe9a00;
|
|
29
|
-
--destructive: #e7000b;
|
|
30
|
-
--destructive-foreground: #fafafa;
|
|
31
|
-
--foreground: #0a0a0a;
|
|
32
|
-
--input: #e5e5e5;
|
|
33
|
-
--muted: #f5f5f5;
|
|
34
|
-
--muted-foreground: #737373;
|
|
35
|
-
--popover: #ffffff;
|
|
36
|
-
--popover-foreground: #0a0a0a;
|
|
37
|
-
--primary: #171717;
|
|
38
|
-
--primary-foreground: #fafafa;
|
|
39
|
-
--ring: #a1a1a1;
|
|
40
|
-
--secondary: #f5f5f5;
|
|
16
|
+
--background: #ffffff;
|
|
17
|
+
--foreground: #0a0a0a;
|
|
18
|
+
--card: #ffffff;
|
|
19
|
+
--card-foreground: #0a0a0a;
|
|
20
|
+
--popover: #ffffff;
|
|
21
|
+
--popover-foreground: #0a0a0a;
|
|
22
|
+
--primary: #171717;
|
|
23
|
+
--primary-foreground: #fafafa;
|
|
24
|
+
--secondary: #f5f5f5;
|
|
41
25
|
--secondary-foreground: #171717;
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
--
|
|
47
|
-
--
|
|
48
|
-
--
|
|
49
|
-
--
|
|
50
|
-
--
|
|
51
|
-
--
|
|
52
|
-
--
|
|
53
|
-
--
|
|
54
|
-
--
|
|
26
|
+
--muted: #f5f5f5;
|
|
27
|
+
--muted-foreground: #737373;
|
|
28
|
+
--accent: #f5f5f5;
|
|
29
|
+
--accent-foreground: #171717;
|
|
30
|
+
--destructive: #e7000b;
|
|
31
|
+
--border: #e5e5e5;
|
|
32
|
+
--input: #e5e5e5;
|
|
33
|
+
--ring: #a1a1a1;
|
|
34
|
+
--chart-1: #2BEE79;
|
|
35
|
+
--chart-2: #F6C343;
|
|
36
|
+
--chart-3: #F7931A;
|
|
37
|
+
--chart-4: #7C3AED;
|
|
38
|
+
--chart-5: #DD352E;
|
|
55
39
|
}
|
|
56
40
|
|
|
41
|
+
/* ── Semantic colors (dark mode) — from src/tokens/colors.ts ───────────── */
|
|
57
42
|
.dark {
|
|
58
|
-
--
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
--
|
|
62
|
-
--
|
|
63
|
-
--
|
|
64
|
-
--
|
|
65
|
-
--
|
|
66
|
-
--
|
|
67
|
-
--chart-4: #7C3AED;
|
|
68
|
-
--chart-5: #DD352E;
|
|
69
|
-
--destructive: hsl(0 62% 50%);
|
|
70
|
-
--destructive-foreground: #ffffff;
|
|
71
|
-
--foreground: #ffffff;
|
|
72
|
-
--input: rgba(255, 255, 255, 0.15);
|
|
73
|
-
--muted: hsl(156 32% 12%);
|
|
74
|
-
--muted-foreground: rgba(255, 255, 255, 0.55);
|
|
75
|
-
--popover: hsl(154 26% 17%);
|
|
76
|
-
--popover-foreground: #ffffff;
|
|
77
|
-
--primary: #2BEE79;
|
|
78
|
-
--primary-foreground: #051B10;
|
|
79
|
-
--ring: #2BEE79;
|
|
80
|
-
--secondary: hsl(154 26% 17%);
|
|
43
|
+
--background: hsl(158 58% 7%);
|
|
44
|
+
--foreground: #ffffff;
|
|
45
|
+
--card: hsl(156 32% 12%);
|
|
46
|
+
--card-foreground: #ffffff;
|
|
47
|
+
--popover: hsl(154 26% 17%);
|
|
48
|
+
--popover-foreground: #ffffff;
|
|
49
|
+
--primary: #2BEE79;
|
|
50
|
+
--primary-foreground: #051B10;
|
|
51
|
+
--secondary: hsl(154 26% 17%);
|
|
81
52
|
--secondary-foreground: #ffffff;
|
|
82
|
-
--
|
|
83
|
-
--
|
|
53
|
+
--muted: hsl(156 32% 12%);
|
|
54
|
+
--muted-foreground: rgba(255, 255, 255, 0.55);
|
|
55
|
+
--accent: hsl(154 26% 17%);
|
|
56
|
+
--accent-foreground: #ffffff;
|
|
57
|
+
--destructive: hsl(0 62% 50%);
|
|
58
|
+
--border: hsl(150 20% 24%);
|
|
59
|
+
--input: rgba(255, 255, 255, 0.15);
|
|
60
|
+
--ring: #2BEE79;
|
|
61
|
+
--chart-1: #2BEE79;
|
|
62
|
+
--chart-2: #F6C343;
|
|
63
|
+
--chart-3: #F7931A;
|
|
64
|
+
--chart-4: #7C3AED;
|
|
65
|
+
--chart-5: #DD352E;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* ─────────────────────────────────────────────────────────────────────────
|
|
69
|
+
Tailwind v4 @theme
|
|
70
|
+
@theme inline — semantic colors: utilities reference CSS vars so dark mode works at runtime.
|
|
71
|
+
@theme — static tokens: Tailwind owns the variable + generates the utility.
|
|
72
|
+
───────────────────────────────────────────────────────────────────────── */
|
|
73
|
+
|
|
74
|
+
@theme inline {
|
|
75
|
+
/* Semantic colors */
|
|
76
|
+
--color-background: var(--background);
|
|
77
|
+
--color-foreground: var(--foreground);
|
|
78
|
+
--color-card: var(--card);
|
|
79
|
+
--color-card-foreground: var(--card-foreground);
|
|
80
|
+
--color-popover: var(--popover);
|
|
81
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
82
|
+
--color-primary: var(--primary);
|
|
83
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
84
|
+
--color-secondary: var(--secondary);
|
|
85
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
86
|
+
--color-muted: var(--muted);
|
|
87
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
88
|
+
--color-accent: var(--accent);
|
|
89
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
90
|
+
--color-destructive: var(--destructive);
|
|
91
|
+
--color-border: var(--border);
|
|
92
|
+
--color-input: var(--input);
|
|
93
|
+
--color-ring: var(--ring);
|
|
94
|
+
--color-chart-1: var(--chart-1);
|
|
95
|
+
--color-chart-2: var(--chart-2);
|
|
96
|
+
--color-chart-3: var(--chart-3);
|
|
97
|
+
--color-chart-4: var(--chart-4);
|
|
98
|
+
--color-chart-5: var(--chart-5);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@theme {
|
|
102
|
+
/* Network colors */
|
|
103
|
+
--color-network-bitcoin: #F7931A;
|
|
104
|
+
--color-network-rgb: #DD352E;
|
|
105
|
+
--color-network-arkade: #7C3AED;
|
|
106
|
+
--color-network-spark: #FF6D00;
|
|
107
|
+
--color-network-lightning: #F6C343;
|
|
108
|
+
--color-network-bitcoin-chip: #A65D0D;
|
|
109
|
+
--color-network-rgb-chip: #7F2623;
|
|
110
|
+
--color-network-arkade-chip: #43208B;
|
|
111
|
+
--color-network-spark-chip: #314238;
|
|
112
|
+
--color-network-lightning-chip: #53611E;
|
|
113
|
+
|
|
114
|
+
/* Asset icon brand colors */
|
|
115
|
+
--color-asset-eth: #627EEA;
|
|
116
|
+
--color-asset-usdt: #26A17B;
|
|
117
|
+
--color-asset-usdc: #2775CA;
|
|
118
|
+
|
|
119
|
+
/* Transaction colors */
|
|
120
|
+
--color-tx-sent: #F94040;
|
|
121
|
+
--color-tx-receive: #2BEE79;
|
|
122
|
+
--color-tx-swap: #4290FF;
|
|
123
|
+
|
|
124
|
+
/* Intent colors */
|
|
125
|
+
--color-success: #2BEE79;
|
|
126
|
+
--color-warning: #FACC15;
|
|
127
|
+
--color-danger: #F94040;
|
|
128
|
+
--color-info: #4290FF;
|
|
129
|
+
|
|
130
|
+
/* Surface elevation (translucent overlays for dark theme) */
|
|
131
|
+
--color-surface-base: rgba(255, 255, 255, 0.03);
|
|
132
|
+
--color-surface-card: rgba(255, 255, 255, 0.05);
|
|
133
|
+
--color-surface-elevated: rgba(255, 255, 255, 0.08);
|
|
134
|
+
--color-surface-overlay: rgba(0, 0, 0, 0.20);
|
|
135
|
+
--color-surface-overlay-strong: rgba(0, 0, 0, 0.35);
|
|
136
|
+
--color-surface-scrim: rgba(0, 0, 0, 0.60);
|
|
137
|
+
|
|
138
|
+
/* Border ladder */
|
|
139
|
+
--color-border-subtle: rgba(255, 255, 255, 0.04);
|
|
140
|
+
--color-border-default: rgba(255, 255, 255, 0.08);
|
|
141
|
+
--color-border-strong: rgba(255, 255, 255, 0.15);
|
|
142
|
+
|
|
143
|
+
/* Text ladder for dark surfaces */
|
|
144
|
+
--color-text-primary: #ffffff;
|
|
145
|
+
--color-text-secondary: rgba(255, 255, 255, 0.65);
|
|
146
|
+
--color-text-muted: rgba(255, 255, 255, 0.45);
|
|
147
|
+
--color-text-dimmed: rgba(255, 255, 255, 0.35);
|
|
148
|
+
--color-text-disabled: rgba(255, 255, 255, 0.25);
|
|
149
|
+
--color-text-on-accent: #051B10;
|
|
150
|
+
|
|
151
|
+
/* Typography */
|
|
152
|
+
--font-sans: 'Satoshi', system-ui, -apple-system, sans-serif;
|
|
153
|
+
--font-display: 'Satoshi', system-ui, -apple-system, sans-serif;
|
|
154
|
+
--font-mono: 'Geist Mono', monospace;
|
|
155
|
+
--text-xxs: 10px;
|
|
156
|
+
--text-xxs--line-height: 14px;
|
|
157
|
+
--text-tiny: 11px;
|
|
158
|
+
--text-tiny--line-height: 16px;
|
|
159
|
+
--text-caption: 13px;
|
|
160
|
+
--text-caption--line-height: 18px;
|
|
161
|
+
--text-body: 15px;
|
|
162
|
+
--text-body--line-height: 22px;
|
|
163
|
+
--text-subhead: 17px;
|
|
164
|
+
--text-subhead--line-height: 24px;
|
|
165
|
+
--text-title: 20px;
|
|
166
|
+
--text-title--line-height: 28px;
|
|
167
|
+
--text-headline: 28px;
|
|
168
|
+
--text-headline--line-height: 34px;
|
|
169
|
+
--text-display: 36px;
|
|
170
|
+
--text-display--line-height: 40px;
|
|
171
|
+
|
|
172
|
+
/* Letter spacing — uppercase eyebrow labels */
|
|
173
|
+
--tracking-eyebrow: 0.18em;
|
|
174
|
+
--tracking-eyebrow-wide: 0.22em;
|
|
175
|
+
|
|
176
|
+
/* Icon-size scale (text-icon-{xxs..5xl}) — for Material Symbols glyphs */
|
|
177
|
+
--text-icon-xxs: 11px;
|
|
178
|
+
--text-icon-xxs--line-height: 1;
|
|
179
|
+
--text-icon-xs: 13px;
|
|
180
|
+
--text-icon-xs--line-height: 1;
|
|
181
|
+
--text-icon-sm: 14px;
|
|
182
|
+
--text-icon-sm--line-height: 1;
|
|
183
|
+
--text-icon-md: 16px;
|
|
184
|
+
--text-icon-md--line-height: 1;
|
|
185
|
+
--text-icon-lg: 18px;
|
|
186
|
+
--text-icon-lg--line-height: 1;
|
|
187
|
+
--text-icon-xl: 20px;
|
|
188
|
+
--text-icon-xl--line-height: 1;
|
|
189
|
+
--text-icon-2xl: 24px;
|
|
190
|
+
--text-icon-2xl--line-height: 1;
|
|
191
|
+
--text-icon-3xl: 28px;
|
|
192
|
+
--text-icon-3xl--line-height: 1;
|
|
193
|
+
--text-icon-4xl: 32px;
|
|
194
|
+
--text-icon-4xl--line-height: 1;
|
|
195
|
+
--text-icon-5xl: 40px;
|
|
196
|
+
--text-icon-5xl--line-height: 1;
|
|
197
|
+
--text-icon-6xl: 64px;
|
|
198
|
+
--text-icon-6xl--line-height: 1;
|
|
199
|
+
|
|
200
|
+
/* Icon box-size scale (size-icon-{sm,md,lg,nav,control}) — for SVG icons */
|
|
201
|
+
--spacing-icon-sm: 14px;
|
|
202
|
+
--spacing-icon-md: 16px;
|
|
203
|
+
--spacing-icon-lg: 18px;
|
|
204
|
+
--spacing-icon-nav: 22px;
|
|
205
|
+
--spacing-icon-control: 34px;
|
|
206
|
+
|
|
207
|
+
/* Border radius */
|
|
208
|
+
--radius-none: 0px;
|
|
209
|
+
--radius-xs: 2px;
|
|
210
|
+
--radius-sm: 4px;
|
|
211
|
+
--radius-md: 6px;
|
|
212
|
+
--radius-lg: 8px;
|
|
213
|
+
--radius-xl: 12px;
|
|
214
|
+
--radius-2xl: 16px;
|
|
215
|
+
--radius-3xl: 24px;
|
|
216
|
+
--radius-4xl: 32px;
|
|
217
|
+
--radius-full: 9999px;
|
|
218
|
+
--radius-card: 16px;
|
|
219
|
+
--radius-panel: 24px;
|
|
220
|
+
--radius-nav: 32px;
|
|
221
|
+
--radius-pill: 9999px;
|
|
222
|
+
|
|
223
|
+
/* Shadows */
|
|
224
|
+
--shadow-glow: 0 0 20px rgba(10, 10, 10, 0.15);
|
|
225
|
+
--shadow-glow-strong: 0 0 30px rgba(10, 10, 10, 0.25);
|
|
226
|
+
--shadow-glow-subtle: 0 0 15px rgba(10, 10, 10, 0.12);
|
|
227
|
+
--shadow-glow-accent: 0 4px 30px rgba(10, 10, 10, 0.18);
|
|
228
|
+
--shadow-glow-primary-soft: 0 0 8px rgba(43, 238, 121, 0.5);
|
|
229
|
+
--shadow-glow-primary: 0 0 30px rgba(43, 238, 121, 0.45);
|
|
230
|
+
--shadow-glow-primary-strong: 0 0 40px rgba(43, 238, 121, 0.5);
|
|
231
|
+
--shadow-popover: 0 18px 55px rgba(0, 0, 0, 0.65);
|
|
232
|
+
--shadow-toast: 0 0 30px rgba(0, 0, 0, 0.3);
|
|
233
|
+
|
|
234
|
+
/* Drop-shadows (Tailwind v4 emits drop-shadow-* utilities from --drop-shadow-*) */
|
|
235
|
+
--drop-shadow-glow-primary-soft: 0 0 8px rgba(43, 238, 121, 0.5);
|
|
236
|
+
--drop-shadow-glow-primary: 0 0 30px rgba(43, 238, 121, 0.45);
|
|
237
|
+
|
|
238
|
+
/* Gradients (use as background-image: var(--gradient-page)) */
|
|
239
|
+
--gradient-page: radial-gradient(ellipse at 60% 10%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), radial-gradient(ellipse at 30% 85%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
|
|
240
|
+
--gradient-card-sheen: linear-gradient(to bottom right, rgba(255, 255, 255, 0.01), rgba(43, 238, 121, 0.04));
|
|
241
|
+
--gradient-headline: linear-gradient(to right, #ffffff, #ffffff, rgba(255, 255, 255, 0.45));
|
|
242
|
+
|
|
243
|
+
/* Transitions */
|
|
244
|
+
--transition-fast: 150ms ease-out;
|
|
245
|
+
--transition-default: 200ms ease-out;
|
|
246
|
+
--transition-slow: 300ms ease-out;
|
|
247
|
+
|
|
248
|
+
/* Animations */
|
|
249
|
+
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
250
|
+
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
251
|
+
--animate-fade-in: fade-in 0.3s ease-out;
|
|
252
|
+
--animate-slide-up: slide-up 0.3s ease-out;
|
|
253
|
+
--animate-slide-in-from-bottom: slide-in-from-bottom 0.4s ease-out;
|
|
254
|
+
--animate-stagger-up: stagger-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
|
|
255
|
+
--animate-shimmer: shimmer 2s linear infinite;
|
|
256
|
+
--animate-bounce-slight: bounce-slight 2s infinite;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/* ── Keyframes — from src/tokens/animations.ts ──────────────────────────── */
|
|
260
|
+
@keyframes accordion-down {
|
|
261
|
+
from {
|
|
262
|
+
height: 0;
|
|
263
|
+
}
|
|
264
|
+
to {
|
|
265
|
+
height: var(--radix-accordion-content-height);
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
@keyframes accordion-up {
|
|
270
|
+
from {
|
|
271
|
+
height: var(--radix-accordion-content-height);
|
|
272
|
+
}
|
|
273
|
+
to {
|
|
274
|
+
height: 0;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
@keyframes fade-in {
|
|
279
|
+
from {
|
|
280
|
+
opacity: 0;
|
|
281
|
+
}
|
|
282
|
+
to {
|
|
283
|
+
opacity: 1;
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
@keyframes slide-up {
|
|
288
|
+
from {
|
|
289
|
+
opacity: 0;
|
|
290
|
+
transform: translateY(10px);
|
|
291
|
+
}
|
|
292
|
+
to {
|
|
293
|
+
opacity: 1;
|
|
294
|
+
transform: translateY(0);
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
@keyframes slide-in-from-bottom {
|
|
299
|
+
from {
|
|
300
|
+
opacity: 0;
|
|
301
|
+
transform: translateY(20px);
|
|
302
|
+
}
|
|
303
|
+
to {
|
|
304
|
+
opacity: 1;
|
|
305
|
+
transform: translateY(0);
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
@keyframes shimmer {
|
|
310
|
+
0% {
|
|
311
|
+
background-position: -200% 0;
|
|
312
|
+
}
|
|
313
|
+
100% {
|
|
314
|
+
background-position: 200% 0;
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
@keyframes stagger-up {
|
|
319
|
+
0% {
|
|
320
|
+
opacity: 0;
|
|
321
|
+
transform: translateY(15px);
|
|
322
|
+
}
|
|
323
|
+
100% {
|
|
324
|
+
opacity: 1;
|
|
325
|
+
transform: translateY(0);
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
@keyframes bounce-slight {
|
|
330
|
+
0%, 100% {
|
|
331
|
+
transform: translateY(-5%);
|
|
332
|
+
}
|
|
333
|
+
50% {
|
|
334
|
+
transform: translateY(0);
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
/* ── Reusable utilities backed by tokens ───────────────────────────────── */
|
|
339
|
+
/* Page-shell radial wash. Usage: <div className="bg-page-radial"> */
|
|
340
|
+
.bg-page-radial {
|
|
341
|
+
background-image: var(--gradient-page);
|
|
342
|
+
}
|
|
343
|
+
/* Receive-panel sheen used by SwapInputCard. */
|
|
344
|
+
.bg-card-sheen {
|
|
345
|
+
background-image: var(--gradient-card-sheen);
|
|
346
|
+
}
|
|
347
|
+
/* Brand headline gradient. Pair with bg-clip-text + text-transparent
|
|
348
|
+
on the consuming element (the HeadlineGradient component does this). */
|
|
349
|
+
.bg-gradient-headline {
|
|
350
|
+
background-image: var(--gradient-headline);
|
|
84
351
|
}
|
package/dist/native/index.cjs
CHANGED
|
@@ -85,11 +85,37 @@ var colors = {
|
|
|
85
85
|
textSecondary: darkSemanticColors.mutedFg,
|
|
86
86
|
textMuted: darkSemanticColors.border,
|
|
87
87
|
textDimmed: darkSemanticColors.ring,
|
|
88
|
-
/** Semantic */
|
|
88
|
+
/** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
|
|
89
89
|
success: darkSemanticColors.primary,
|
|
90
|
-
warning:
|
|
90
|
+
warning: "#FACC15",
|
|
91
|
+
danger: "#F94040",
|
|
92
|
+
info: "#4290FF",
|
|
93
|
+
/** @deprecated alias for `danger` — kept for back-compat. */
|
|
91
94
|
error: darkSemanticColors.destructive,
|
|
92
|
-
|
|
95
|
+
/** Surface elevation — translucent overlays applied over the page background */
|
|
96
|
+
surface: {
|
|
97
|
+
base: "rgba(255, 255, 255, 0.03)",
|
|
98
|
+
card: "rgba(255, 255, 255, 0.05)",
|
|
99
|
+
elevated: "rgba(255, 255, 255, 0.08)",
|
|
100
|
+
overlay: "rgba(0, 0, 0, 0.20)",
|
|
101
|
+
overlayStrong: "rgba(0, 0, 0, 0.35)",
|
|
102
|
+
scrim: "rgba(0, 0, 0, 0.60)"
|
|
103
|
+
},
|
|
104
|
+
/** Border ladder — translucent edges on dark surfaces */
|
|
105
|
+
borderToken: {
|
|
106
|
+
subtle: "rgba(255, 255, 255, 0.04)",
|
|
107
|
+
default: "rgba(255, 255, 255, 0.08)",
|
|
108
|
+
strong: "rgba(255, 255, 255, 0.15)"
|
|
109
|
+
},
|
|
110
|
+
/** Text ladder for dark surfaces */
|
|
111
|
+
text: {
|
|
112
|
+
primary: "#ffffff",
|
|
113
|
+
secondary: "rgba(255, 255, 255, 0.65)",
|
|
114
|
+
muted: "rgba(255, 255, 255, 0.45)",
|
|
115
|
+
dimmed: "rgba(255, 255, 255, 0.35)",
|
|
116
|
+
disabled: "rgba(255, 255, 255, 0.25)",
|
|
117
|
+
onAccent: "#051B10"
|
|
118
|
+
},
|
|
93
119
|
/** Network / Layer */
|
|
94
120
|
network: {
|
|
95
121
|
bitcoin: "#F7931A",
|
|
@@ -98,6 +124,19 @@ var colors = {
|
|
|
98
124
|
spark: "#FF6D00",
|
|
99
125
|
lightning: "#F6C343"
|
|
100
126
|
},
|
|
127
|
+
networkChip: {
|
|
128
|
+
bitcoin: "#A65D0D",
|
|
129
|
+
rgb: "#7F2623",
|
|
130
|
+
arkade: "#43208B",
|
|
131
|
+
spark: "#314238",
|
|
132
|
+
lightning: "#53611E"
|
|
133
|
+
},
|
|
134
|
+
/** Asset icon brand colors — used as solid backgrounds behind glyphs */
|
|
135
|
+
assetIcon: {
|
|
136
|
+
eth: "#627EEA",
|
|
137
|
+
usdt: "#26A17B",
|
|
138
|
+
usdc: "#2775CA"
|
|
139
|
+
},
|
|
101
140
|
/** Transaction direction */
|
|
102
141
|
tx: {
|
|
103
142
|
sent: "#F94040",
|
|
@@ -156,9 +195,9 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
|
156
195
|
var statusConfig = {
|
|
157
196
|
success: { color: colors.primary, bg: `${colors.primary}1A`, borderColor: `${colors.primary}33`, label: "Success" },
|
|
158
197
|
completed: { color: colors.primary, bg: `${colors.primary}1A`, borderColor: `${colors.primary}33`, label: "Completed" },
|
|
159
|
-
pending: { color:
|
|
160
|
-
failed: { color:
|
|
161
|
-
error: { color:
|
|
198
|
+
pending: { color: colors.warning, bg: `${colors.warning}1A`, borderColor: `${colors.warning}33`, label: "Pending" },
|
|
199
|
+
failed: { color: colors.danger, bg: `${colors.danger}1A`, borderColor: `${colors.danger}33`, label: "Failed" },
|
|
200
|
+
error: { color: colors.danger, bg: `${colors.danger}1A`, borderColor: `${colors.danger}33`, label: "Error" }
|
|
162
201
|
};
|
|
163
202
|
function StatusBadge({ status, style }) {
|
|
164
203
|
const config = statusConfig[status];
|
|
@@ -216,10 +255,10 @@ var styles2 = import_react_native2.StyleSheet.create({
|
|
|
216
255
|
var import_react_native3 = require("react-native");
|
|
217
256
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
218
257
|
var variantConfig = {
|
|
219
|
-
error: { bg:
|
|
220
|
-
warning: { bg:
|
|
221
|
-
info: { bg:
|
|
222
|
-
success: { bg: `${colors.
|
|
258
|
+
error: { bg: `${colors.danger}1A`, borderColor: `${colors.danger}33`, iconColor: colors.danger },
|
|
259
|
+
warning: { bg: `${colors.warning}1A`, borderColor: `${colors.warning}33`, iconColor: colors.warning },
|
|
260
|
+
info: { bg: `${colors.info}1A`, borderColor: `${colors.info}33`, iconColor: colors.info },
|
|
261
|
+
success: { bg: `${colors.success}1A`, borderColor: `${colors.success}33`, iconColor: colors.success }
|
|
223
262
|
};
|
|
224
263
|
function AlertBanner({ variant = "info", children, style }) {
|
|
225
264
|
const config = variantConfig[variant];
|
|
@@ -236,7 +275,7 @@ var styles3 = import_react_native3.StyleSheet.create({
|
|
|
236
275
|
},
|
|
237
276
|
text: {
|
|
238
277
|
fontSize: 14,
|
|
239
|
-
color:
|
|
278
|
+
color: colors.text.primary,
|
|
240
279
|
flex: 1
|
|
241
280
|
}
|
|
242
281
|
});
|
|
@@ -252,7 +291,7 @@ var styles4 = import_react_native4.StyleSheet.create({
|
|
|
252
291
|
fontSize: 10,
|
|
253
292
|
fontWeight: "900",
|
|
254
293
|
letterSpacing: 2.2,
|
|
255
|
-
color:
|
|
294
|
+
color: colors.text.dimmed
|
|
256
295
|
}
|
|
257
296
|
});
|
|
258
297
|
|
|
@@ -280,15 +319,21 @@ var fontWeight = {
|
|
|
280
319
|
|
|
281
320
|
// src/tokens/radius.ts
|
|
282
321
|
var radius = {
|
|
322
|
+
none: "0px",
|
|
323
|
+
xs: "2px",
|
|
283
324
|
sm: "4px",
|
|
284
325
|
md: "6px",
|
|
285
326
|
lg: "8px",
|
|
286
327
|
xl: "12px",
|
|
328
|
+
"2xl": "16px",
|
|
329
|
+
"3xl": "24px",
|
|
330
|
+
"4xl": "32px",
|
|
331
|
+
full: "9999px",
|
|
332
|
+
// Semantic aliases
|
|
287
333
|
card: "16px",
|
|
288
334
|
panel: "24px",
|
|
289
|
-
pill: "9999px",
|
|
290
335
|
nav: "32px",
|
|
291
|
-
|
|
336
|
+
pill: "9999px"
|
|
292
337
|
};
|
|
293
338
|
|
|
294
339
|
// src/tokens/shadows.ts
|
|
@@ -296,7 +341,15 @@ var shadow = {
|
|
|
296
341
|
glow: "0 0 20px rgba(10, 10, 10, 0.15)",
|
|
297
342
|
glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)",
|
|
298
343
|
glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)",
|
|
299
|
-
glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)"
|
|
344
|
+
glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)",
|
|
345
|
+
/** Brand green glow — drives all primary CTA / focus halos. */
|
|
346
|
+
glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)",
|
|
347
|
+
glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)",
|
|
348
|
+
glowPrimaryStrong: "0 0 40px rgba(43, 238, 121, 0.5)",
|
|
349
|
+
/** Floating popover / modal elevation on dark surfaces. */
|
|
350
|
+
popover: "0 18px 55px rgba(0, 0, 0, 0.65)",
|
|
351
|
+
/** Toast / inline-notification elevation. */
|
|
352
|
+
toast: "0 0 30px rgba(0, 0, 0, 0.3)"
|
|
300
353
|
};
|
|
301
354
|
|
|
302
355
|
// src/tokens/transitions.ts
|