kaleido-ui 0.1.3 → 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 +105 -4
- package/dist/native/index.cjs +60 -13
- package/dist/native/index.d.cts +61 -14
- package/dist/native/index.d.ts +61 -14
- package/dist/native/index.js +60 -13
- package/dist/tokens/index.cjs +103 -4
- package/dist/tokens/index.d.cts +113 -4
- package/dist/tokens/index.d.ts +113 -4
- package/dist/tokens/index.js +99 -4
- package/dist/web/index.cjs +5023 -301
- package/dist/web/index.d.cts +932 -13
- package/dist/web/index.d.ts +932 -13
- package/dist/web/index.js +4949 -301
- package/package.json +12 -5
package/dist/css/kaleido-ui.css
CHANGED
|
@@ -105,12 +105,49 @@
|
|
|
105
105
|
--color-network-arkade: #7C3AED;
|
|
106
106
|
--color-network-spark: #FF6D00;
|
|
107
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;
|
|
108
118
|
|
|
109
119
|
/* Transaction colors */
|
|
110
120
|
--color-tx-sent: #F94040;
|
|
111
121
|
--color-tx-receive: #2BEE79;
|
|
112
122
|
--color-tx-swap: #4290FF;
|
|
113
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
|
+
|
|
114
151
|
/* Typography */
|
|
115
152
|
--font-sans: 'Satoshi', system-ui, -apple-system, sans-serif;
|
|
116
153
|
--font-display: 'Satoshi', system-ui, -apple-system, sans-serif;
|
|
@@ -132,6 +169,41 @@
|
|
|
132
169
|
--text-display: 36px;
|
|
133
170
|
--text-display--line-height: 40px;
|
|
134
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
|
+
|
|
135
207
|
/* Border radius */
|
|
136
208
|
--radius-none: 0px;
|
|
137
209
|
--radius-xs: 2px;
|
|
@@ -149,10 +221,24 @@
|
|
|
149
221
|
--radius-pill: 9999px;
|
|
150
222
|
|
|
151
223
|
/* Shadows */
|
|
152
|
-
--shadow-glow:
|
|
153
|
-
--shadow-glow-strong:
|
|
154
|
-
--shadow-glow-subtle:
|
|
155
|
-
--shadow-glow-accent:
|
|
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));
|
|
156
242
|
|
|
157
243
|
/* Transitions */
|
|
158
244
|
--transition-fast: 150ms ease-out;
|
|
@@ -248,3 +334,18 @@
|
|
|
248
334
|
transform: translateY(0);
|
|
249
335
|
}
|
|
250
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);
|
|
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
|
|
|
@@ -302,7 +341,15 @@ var shadow = {
|
|
|
302
341
|
glow: "0 0 20px rgba(10, 10, 10, 0.15)",
|
|
303
342
|
glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)",
|
|
304
343
|
glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)",
|
|
305
|
-
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)"
|
|
306
353
|
};
|
|
307
354
|
|
|
308
355
|
// src/tokens/transitions.ts
|
package/dist/native/index.d.cts
CHANGED
|
@@ -26,9 +26,9 @@ declare const kaleidoswapTokens: {
|
|
|
26
26
|
readonly textPrimary: "#ffffff";
|
|
27
27
|
readonly textSecondary: "rgba(255, 255, 255, 0.55)";
|
|
28
28
|
readonly success: "#2BEE79";
|
|
29
|
-
readonly warning: "#
|
|
29
|
+
readonly warning: "#FACC15";
|
|
30
30
|
readonly error: "hsl(0 62% 50%)";
|
|
31
|
-
readonly info: "#
|
|
31
|
+
readonly info: "#4290FF";
|
|
32
32
|
readonly network: {
|
|
33
33
|
readonly bitcoin: "#F7931A";
|
|
34
34
|
readonly rgb: "#DD352E";
|
|
@@ -69,19 +69,19 @@ declare function NetworkBadge({ network, style }: NetworkBadgeProps): react_jsx_
|
|
|
69
69
|
|
|
70
70
|
declare const variantConfig: {
|
|
71
71
|
readonly error: {
|
|
72
|
-
readonly bg: "#
|
|
73
|
-
readonly borderColor: "#
|
|
74
|
-
readonly iconColor: "#
|
|
72
|
+
readonly bg: "#F940401A";
|
|
73
|
+
readonly borderColor: "#F9404033";
|
|
74
|
+
readonly iconColor: "#F94040";
|
|
75
75
|
};
|
|
76
76
|
readonly warning: {
|
|
77
|
-
readonly bg: "#
|
|
78
|
-
readonly borderColor: "#
|
|
79
|
-
readonly iconColor: "#
|
|
77
|
+
readonly bg: "#FACC151A";
|
|
78
|
+
readonly borderColor: "#FACC1533";
|
|
79
|
+
readonly iconColor: "#FACC15";
|
|
80
80
|
};
|
|
81
81
|
readonly info: {
|
|
82
|
-
readonly bg: "#
|
|
83
|
-
readonly borderColor: "#
|
|
84
|
-
readonly iconColor: "#
|
|
82
|
+
readonly bg: "#4290FF1A";
|
|
83
|
+
readonly borderColor: "#4290FF33";
|
|
84
|
+
readonly iconColor: "#4290FF";
|
|
85
85
|
};
|
|
86
86
|
readonly success: {
|
|
87
87
|
readonly bg: "#2BEE791A";
|
|
@@ -107,11 +107,37 @@ declare const colors: {
|
|
|
107
107
|
readonly textSecondary: "rgba(255, 255, 255, 0.55)";
|
|
108
108
|
readonly textMuted: "hsl(150 20% 24%)";
|
|
109
109
|
readonly textDimmed: "#2BEE79";
|
|
110
|
-
/** Semantic */
|
|
110
|
+
/** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
|
|
111
111
|
readonly success: "#2BEE79";
|
|
112
|
-
readonly warning: "#
|
|
112
|
+
readonly warning: "#FACC15";
|
|
113
|
+
readonly danger: "#F94040";
|
|
114
|
+
readonly info: "#4290FF";
|
|
115
|
+
/** @deprecated alias for `danger` — kept for back-compat. */
|
|
113
116
|
readonly error: "hsl(0 62% 50%)";
|
|
114
|
-
|
|
117
|
+
/** Surface elevation — translucent overlays applied over the page background */
|
|
118
|
+
readonly surface: {
|
|
119
|
+
readonly base: "rgba(255, 255, 255, 0.03)";
|
|
120
|
+
readonly card: "rgba(255, 255, 255, 0.05)";
|
|
121
|
+
readonly elevated: "rgba(255, 255, 255, 0.08)";
|
|
122
|
+
readonly overlay: "rgba(0, 0, 0, 0.20)";
|
|
123
|
+
readonly overlayStrong: "rgba(0, 0, 0, 0.35)";
|
|
124
|
+
readonly scrim: "rgba(0, 0, 0, 0.60)";
|
|
125
|
+
};
|
|
126
|
+
/** Border ladder — translucent edges on dark surfaces */
|
|
127
|
+
readonly borderToken: {
|
|
128
|
+
readonly subtle: "rgba(255, 255, 255, 0.04)";
|
|
129
|
+
readonly default: "rgba(255, 255, 255, 0.08)";
|
|
130
|
+
readonly strong: "rgba(255, 255, 255, 0.15)";
|
|
131
|
+
};
|
|
132
|
+
/** Text ladder for dark surfaces */
|
|
133
|
+
readonly text: {
|
|
134
|
+
readonly primary: "#ffffff";
|
|
135
|
+
readonly secondary: "rgba(255, 255, 255, 0.65)";
|
|
136
|
+
readonly muted: "rgba(255, 255, 255, 0.45)";
|
|
137
|
+
readonly dimmed: "rgba(255, 255, 255, 0.35)";
|
|
138
|
+
readonly disabled: "rgba(255, 255, 255, 0.25)";
|
|
139
|
+
readonly onAccent: "#051B10";
|
|
140
|
+
};
|
|
115
141
|
/** Network / Layer */
|
|
116
142
|
readonly network: {
|
|
117
143
|
readonly bitcoin: "#F7931A";
|
|
@@ -120,6 +146,19 @@ declare const colors: {
|
|
|
120
146
|
readonly spark: "#FF6D00";
|
|
121
147
|
readonly lightning: "#F6C343";
|
|
122
148
|
};
|
|
149
|
+
readonly networkChip: {
|
|
150
|
+
readonly bitcoin: "#A65D0D";
|
|
151
|
+
readonly rgb: "#7F2623";
|
|
152
|
+
readonly arkade: "#43208B";
|
|
153
|
+
readonly spark: "#314238";
|
|
154
|
+
readonly lightning: "#53611E";
|
|
155
|
+
};
|
|
156
|
+
/** Asset icon brand colors — used as solid backgrounds behind glyphs */
|
|
157
|
+
readonly assetIcon: {
|
|
158
|
+
readonly eth: "#627EEA";
|
|
159
|
+
readonly usdt: "#26A17B";
|
|
160
|
+
readonly usdc: "#2775CA";
|
|
161
|
+
};
|
|
123
162
|
/** Transaction direction */
|
|
124
163
|
readonly tx: {
|
|
125
164
|
readonly sent: "#F94040";
|
|
@@ -208,6 +247,14 @@ declare const shadow: {
|
|
|
208
247
|
readonly glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)";
|
|
209
248
|
readonly glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)";
|
|
210
249
|
readonly glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)";
|
|
250
|
+
/** Brand green glow — drives all primary CTA / focus halos. */
|
|
251
|
+
readonly glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)";
|
|
252
|
+
readonly glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)";
|
|
253
|
+
readonly glowPrimaryStrong: "0 0 40px rgba(43, 238, 121, 0.5)";
|
|
254
|
+
/** Floating popover / modal elevation on dark surfaces. */
|
|
255
|
+
readonly popover: "0 18px 55px rgba(0, 0, 0, 0.65)";
|
|
256
|
+
/** Toast / inline-notification elevation. */
|
|
257
|
+
readonly toast: "0 0 30px rgba(0, 0, 0, 0.3)";
|
|
211
258
|
};
|
|
212
259
|
|
|
213
260
|
/**
|
package/dist/native/index.d.ts
CHANGED
|
@@ -26,9 +26,9 @@ declare const kaleidoswapTokens: {
|
|
|
26
26
|
readonly textPrimary: "#ffffff";
|
|
27
27
|
readonly textSecondary: "rgba(255, 255, 255, 0.55)";
|
|
28
28
|
readonly success: "#2BEE79";
|
|
29
|
-
readonly warning: "#
|
|
29
|
+
readonly warning: "#FACC15";
|
|
30
30
|
readonly error: "hsl(0 62% 50%)";
|
|
31
|
-
readonly info: "#
|
|
31
|
+
readonly info: "#4290FF";
|
|
32
32
|
readonly network: {
|
|
33
33
|
readonly bitcoin: "#F7931A";
|
|
34
34
|
readonly rgb: "#DD352E";
|
|
@@ -69,19 +69,19 @@ declare function NetworkBadge({ network, style }: NetworkBadgeProps): react_jsx_
|
|
|
69
69
|
|
|
70
70
|
declare const variantConfig: {
|
|
71
71
|
readonly error: {
|
|
72
|
-
readonly bg: "#
|
|
73
|
-
readonly borderColor: "#
|
|
74
|
-
readonly iconColor: "#
|
|
72
|
+
readonly bg: "#F940401A";
|
|
73
|
+
readonly borderColor: "#F9404033";
|
|
74
|
+
readonly iconColor: "#F94040";
|
|
75
75
|
};
|
|
76
76
|
readonly warning: {
|
|
77
|
-
readonly bg: "#
|
|
78
|
-
readonly borderColor: "#
|
|
79
|
-
readonly iconColor: "#
|
|
77
|
+
readonly bg: "#FACC151A";
|
|
78
|
+
readonly borderColor: "#FACC1533";
|
|
79
|
+
readonly iconColor: "#FACC15";
|
|
80
80
|
};
|
|
81
81
|
readonly info: {
|
|
82
|
-
readonly bg: "#
|
|
83
|
-
readonly borderColor: "#
|
|
84
|
-
readonly iconColor: "#
|
|
82
|
+
readonly bg: "#4290FF1A";
|
|
83
|
+
readonly borderColor: "#4290FF33";
|
|
84
|
+
readonly iconColor: "#4290FF";
|
|
85
85
|
};
|
|
86
86
|
readonly success: {
|
|
87
87
|
readonly bg: "#2BEE791A";
|
|
@@ -107,11 +107,37 @@ declare const colors: {
|
|
|
107
107
|
readonly textSecondary: "rgba(255, 255, 255, 0.55)";
|
|
108
108
|
readonly textMuted: "hsl(150 20% 24%)";
|
|
109
109
|
readonly textDimmed: "#2BEE79";
|
|
110
|
-
/** Semantic */
|
|
110
|
+
/** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
|
|
111
111
|
readonly success: "#2BEE79";
|
|
112
|
-
readonly warning: "#
|
|
112
|
+
readonly warning: "#FACC15";
|
|
113
|
+
readonly danger: "#F94040";
|
|
114
|
+
readonly info: "#4290FF";
|
|
115
|
+
/** @deprecated alias for `danger` — kept for back-compat. */
|
|
113
116
|
readonly error: "hsl(0 62% 50%)";
|
|
114
|
-
|
|
117
|
+
/** Surface elevation — translucent overlays applied over the page background */
|
|
118
|
+
readonly surface: {
|
|
119
|
+
readonly base: "rgba(255, 255, 255, 0.03)";
|
|
120
|
+
readonly card: "rgba(255, 255, 255, 0.05)";
|
|
121
|
+
readonly elevated: "rgba(255, 255, 255, 0.08)";
|
|
122
|
+
readonly overlay: "rgba(0, 0, 0, 0.20)";
|
|
123
|
+
readonly overlayStrong: "rgba(0, 0, 0, 0.35)";
|
|
124
|
+
readonly scrim: "rgba(0, 0, 0, 0.60)";
|
|
125
|
+
};
|
|
126
|
+
/** Border ladder — translucent edges on dark surfaces */
|
|
127
|
+
readonly borderToken: {
|
|
128
|
+
readonly subtle: "rgba(255, 255, 255, 0.04)";
|
|
129
|
+
readonly default: "rgba(255, 255, 255, 0.08)";
|
|
130
|
+
readonly strong: "rgba(255, 255, 255, 0.15)";
|
|
131
|
+
};
|
|
132
|
+
/** Text ladder for dark surfaces */
|
|
133
|
+
readonly text: {
|
|
134
|
+
readonly primary: "#ffffff";
|
|
135
|
+
readonly secondary: "rgba(255, 255, 255, 0.65)";
|
|
136
|
+
readonly muted: "rgba(255, 255, 255, 0.45)";
|
|
137
|
+
readonly dimmed: "rgba(255, 255, 255, 0.35)";
|
|
138
|
+
readonly disabled: "rgba(255, 255, 255, 0.25)";
|
|
139
|
+
readonly onAccent: "#051B10";
|
|
140
|
+
};
|
|
115
141
|
/** Network / Layer */
|
|
116
142
|
readonly network: {
|
|
117
143
|
readonly bitcoin: "#F7931A";
|
|
@@ -120,6 +146,19 @@ declare const colors: {
|
|
|
120
146
|
readonly spark: "#FF6D00";
|
|
121
147
|
readonly lightning: "#F6C343";
|
|
122
148
|
};
|
|
149
|
+
readonly networkChip: {
|
|
150
|
+
readonly bitcoin: "#A65D0D";
|
|
151
|
+
readonly rgb: "#7F2623";
|
|
152
|
+
readonly arkade: "#43208B";
|
|
153
|
+
readonly spark: "#314238";
|
|
154
|
+
readonly lightning: "#53611E";
|
|
155
|
+
};
|
|
156
|
+
/** Asset icon brand colors — used as solid backgrounds behind glyphs */
|
|
157
|
+
readonly assetIcon: {
|
|
158
|
+
readonly eth: "#627EEA";
|
|
159
|
+
readonly usdt: "#26A17B";
|
|
160
|
+
readonly usdc: "#2775CA";
|
|
161
|
+
};
|
|
123
162
|
/** Transaction direction */
|
|
124
163
|
readonly tx: {
|
|
125
164
|
readonly sent: "#F94040";
|
|
@@ -208,6 +247,14 @@ declare const shadow: {
|
|
|
208
247
|
readonly glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)";
|
|
209
248
|
readonly glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)";
|
|
210
249
|
readonly glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)";
|
|
250
|
+
/** Brand green glow — drives all primary CTA / focus halos. */
|
|
251
|
+
readonly glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)";
|
|
252
|
+
readonly glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)";
|
|
253
|
+
readonly glowPrimaryStrong: "0 0 40px rgba(43, 238, 121, 0.5)";
|
|
254
|
+
/** Floating popover / modal elevation on dark surfaces. */
|
|
255
|
+
readonly popover: "0 18px 55px rgba(0, 0, 0, 0.65)";
|
|
256
|
+
/** Toast / inline-notification elevation. */
|
|
257
|
+
readonly toast: "0 0 30px rgba(0, 0, 0, 0.3)";
|
|
211
258
|
};
|
|
212
259
|
|
|
213
260
|
/**
|
package/dist/native/index.js
CHANGED
|
@@ -35,11 +35,37 @@ var colors = {
|
|
|
35
35
|
textSecondary: darkSemanticColors.mutedFg,
|
|
36
36
|
textMuted: darkSemanticColors.border,
|
|
37
37
|
textDimmed: darkSemanticColors.ring,
|
|
38
|
-
/** Semantic */
|
|
38
|
+
/** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
|
|
39
39
|
success: darkSemanticColors.primary,
|
|
40
|
-
warning:
|
|
40
|
+
warning: "#FACC15",
|
|
41
|
+
danger: "#F94040",
|
|
42
|
+
info: "#4290FF",
|
|
43
|
+
/** @deprecated alias for `danger` — kept for back-compat. */
|
|
41
44
|
error: darkSemanticColors.destructive,
|
|
42
|
-
|
|
45
|
+
/** Surface elevation — translucent overlays applied over the page background */
|
|
46
|
+
surface: {
|
|
47
|
+
base: "rgba(255, 255, 255, 0.03)",
|
|
48
|
+
card: "rgba(255, 255, 255, 0.05)",
|
|
49
|
+
elevated: "rgba(255, 255, 255, 0.08)",
|
|
50
|
+
overlay: "rgba(0, 0, 0, 0.20)",
|
|
51
|
+
overlayStrong: "rgba(0, 0, 0, 0.35)",
|
|
52
|
+
scrim: "rgba(0, 0, 0, 0.60)"
|
|
53
|
+
},
|
|
54
|
+
/** Border ladder — translucent edges on dark surfaces */
|
|
55
|
+
borderToken: {
|
|
56
|
+
subtle: "rgba(255, 255, 255, 0.04)",
|
|
57
|
+
default: "rgba(255, 255, 255, 0.08)",
|
|
58
|
+
strong: "rgba(255, 255, 255, 0.15)"
|
|
59
|
+
},
|
|
60
|
+
/** Text ladder for dark surfaces */
|
|
61
|
+
text: {
|
|
62
|
+
primary: "#ffffff",
|
|
63
|
+
secondary: "rgba(255, 255, 255, 0.65)",
|
|
64
|
+
muted: "rgba(255, 255, 255, 0.45)",
|
|
65
|
+
dimmed: "rgba(255, 255, 255, 0.35)",
|
|
66
|
+
disabled: "rgba(255, 255, 255, 0.25)",
|
|
67
|
+
onAccent: "#051B10"
|
|
68
|
+
},
|
|
43
69
|
/** Network / Layer */
|
|
44
70
|
network: {
|
|
45
71
|
bitcoin: "#F7931A",
|
|
@@ -48,6 +74,19 @@ var colors = {
|
|
|
48
74
|
spark: "#FF6D00",
|
|
49
75
|
lightning: "#F6C343"
|
|
50
76
|
},
|
|
77
|
+
networkChip: {
|
|
78
|
+
bitcoin: "#A65D0D",
|
|
79
|
+
rgb: "#7F2623",
|
|
80
|
+
arkade: "#43208B",
|
|
81
|
+
spark: "#314238",
|
|
82
|
+
lightning: "#53611E"
|
|
83
|
+
},
|
|
84
|
+
/** Asset icon brand colors — used as solid backgrounds behind glyphs */
|
|
85
|
+
assetIcon: {
|
|
86
|
+
eth: "#627EEA",
|
|
87
|
+
usdt: "#26A17B",
|
|
88
|
+
usdc: "#2775CA"
|
|
89
|
+
},
|
|
51
90
|
/** Transaction direction */
|
|
52
91
|
tx: {
|
|
53
92
|
sent: "#F94040",
|
|
@@ -118,9 +157,9 @@ import { jsx as jsx2 } from "react/jsx-runtime";
|
|
|
118
157
|
var statusConfig = {
|
|
119
158
|
success: { color: colors.primary, bg: `${colors.primary}1A`, borderColor: `${colors.primary}33`, label: "Success" },
|
|
120
159
|
completed: { color: colors.primary, bg: `${colors.primary}1A`, borderColor: `${colors.primary}33`, label: "Completed" },
|
|
121
|
-
pending: { color:
|
|
122
|
-
failed: { color:
|
|
123
|
-
error: { color:
|
|
160
|
+
pending: { color: colors.warning, bg: `${colors.warning}1A`, borderColor: `${colors.warning}33`, label: "Pending" },
|
|
161
|
+
failed: { color: colors.danger, bg: `${colors.danger}1A`, borderColor: `${colors.danger}33`, label: "Failed" },
|
|
162
|
+
error: { color: colors.danger, bg: `${colors.danger}1A`, borderColor: `${colors.danger}33`, label: "Error" }
|
|
124
163
|
};
|
|
125
164
|
function StatusBadge({ status, style }) {
|
|
126
165
|
const config = statusConfig[status];
|
|
@@ -178,10 +217,10 @@ var styles2 = StyleSheet2.create({
|
|
|
178
217
|
import { View as View3, Text as Text3, StyleSheet as StyleSheet3 } from "react-native";
|
|
179
218
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
180
219
|
var variantConfig = {
|
|
181
|
-
error: { bg:
|
|
182
|
-
warning: { bg:
|
|
183
|
-
info: { bg:
|
|
184
|
-
success: { bg: `${colors.
|
|
220
|
+
error: { bg: `${colors.danger}1A`, borderColor: `${colors.danger}33`, iconColor: colors.danger },
|
|
221
|
+
warning: { bg: `${colors.warning}1A`, borderColor: `${colors.warning}33`, iconColor: colors.warning },
|
|
222
|
+
info: { bg: `${colors.info}1A`, borderColor: `${colors.info}33`, iconColor: colors.info },
|
|
223
|
+
success: { bg: `${colors.success}1A`, borderColor: `${colors.success}33`, iconColor: colors.success }
|
|
185
224
|
};
|
|
186
225
|
function AlertBanner({ variant = "info", children, style }) {
|
|
187
226
|
const config = variantConfig[variant];
|
|
@@ -198,7 +237,7 @@ var styles3 = StyleSheet3.create({
|
|
|
198
237
|
},
|
|
199
238
|
text: {
|
|
200
239
|
fontSize: 14,
|
|
201
|
-
color:
|
|
240
|
+
color: colors.text.primary,
|
|
202
241
|
flex: 1
|
|
203
242
|
}
|
|
204
243
|
});
|
|
@@ -214,7 +253,7 @@ var styles4 = StyleSheet4.create({
|
|
|
214
253
|
fontSize: 10,
|
|
215
254
|
fontWeight: "900",
|
|
216
255
|
letterSpacing: 2.2,
|
|
217
|
-
color:
|
|
256
|
+
color: colors.text.dimmed
|
|
218
257
|
}
|
|
219
258
|
});
|
|
220
259
|
|
|
@@ -264,7 +303,15 @@ var shadow = {
|
|
|
264
303
|
glow: "0 0 20px rgba(10, 10, 10, 0.15)",
|
|
265
304
|
glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)",
|
|
266
305
|
glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)",
|
|
267
|
-
glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)"
|
|
306
|
+
glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)",
|
|
307
|
+
/** Brand green glow — drives all primary CTA / focus halos. */
|
|
308
|
+
glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)",
|
|
309
|
+
glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)",
|
|
310
|
+
glowPrimaryStrong: "0 0 40px rgba(43, 238, 121, 0.5)",
|
|
311
|
+
/** Floating popover / modal elevation on dark surfaces. */
|
|
312
|
+
popover: "0 18px 55px rgba(0, 0, 0, 0.65)",
|
|
313
|
+
/** Toast / inline-notification elevation. */
|
|
314
|
+
toast: "0 0 30px rgba(0, 0, 0, 0.3)"
|
|
268
315
|
};
|
|
269
316
|
|
|
270
317
|
// src/tokens/transitions.ts
|