@coinbase/cdp-react 0.0.37 → 0.0.39
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 +2 -1
- package/dist/assets/AmountInput.css +1 -1
- package/dist/assets/AuthButton.css +1 -1
- package/dist/assets/Button.css +1 -1
- package/dist/assets/ButtonBase.css +1 -1
- package/dist/assets/Error.css +1 -1
- package/dist/assets/Field.css +1 -1
- package/dist/assets/Fund.css +1 -1
- package/dist/assets/FundPaymentMethods.css +1 -1
- package/dist/assets/Input.css +1 -1
- package/dist/assets/Modal.css +1 -1
- package/dist/assets/PhoneNumberInput.css +1 -1
- package/dist/assets/Select.css +1 -1
- package/dist/assets/SendEvmTransactionButton.css +1 -0
- package/dist/assets/SendSolanaTransactionButton.css +1 -0
- package/dist/assets/SignIn.css +1 -1
- package/dist/assets/SuccessMessage.css +1 -1
- package/dist/components/CDPReactProvider/index.js +26 -26
- package/dist/components/Fund/FundProvider.js +78 -74
- package/dist/components/Fund/hooks/useBuyUrl.d.ts +1 -2
- package/dist/components/Fund/hooks/useBuyUrl.js +23 -23
- package/dist/components/Fund/types.d.ts +2 -1
- package/dist/components/{SendTransactionButton → SendEvmTransactionButton}/index.d.ts +2 -2
- package/dist/components/SendEvmTransactionButton/index.js +67 -0
- package/dist/components/SendSolanaTransactionButton/index.d.ts +13 -0
- package/dist/components/SendSolanaTransactionButton/index.js +67 -0
- package/dist/components/SignIn/SignInForm.js +38 -24
- package/dist/components/ui/SwitchTransition/index.js +65 -65
- package/dist/index.d.ts +2 -1
- package/dist/index.js +88 -81
- package/dist/theme/index.js +14 -9
- package/dist/theme/theme.d.ts +116 -18
- package/dist/theme/tokens.d.ts +321 -39
- package/dist/theme/tokens.js +117 -25
- package/dist/theme/utils.d.ts +6 -3
- package/dist/theme/utils.js +16 -18
- package/package.json +5 -5
- package/dist/assets/SendTransactionButton.css +0 -1
- package/dist/components/SendTransactionButton/index.js +0 -67
package/dist/theme/theme.d.ts
CHANGED
|
@@ -1,6 +1,69 @@
|
|
|
1
|
-
import { colorsSemantic, colorsComponents,
|
|
1
|
+
import { borderRadiusSemantic, borderRadiusComponents, colorsSemantic, colorsComponents, fontSemantic, fontComponents } from './tokens';
|
|
2
2
|
import { Flattened } from './utils';
|
|
3
3
|
export declare const theme: Flattened<{
|
|
4
|
+
borderRadius: {
|
|
5
|
+
readonly cta: {
|
|
6
|
+
readonly value: "{borderRadius.full}";
|
|
7
|
+
};
|
|
8
|
+
readonly input: {
|
|
9
|
+
readonly value: "{borderRadius.sm}";
|
|
10
|
+
};
|
|
11
|
+
readonly link: {
|
|
12
|
+
readonly value: "{borderRadius.full}";
|
|
13
|
+
};
|
|
14
|
+
readonly modal: {
|
|
15
|
+
readonly value: "{borderRadius.sm}";
|
|
16
|
+
};
|
|
17
|
+
readonly select: {
|
|
18
|
+
readonly trigger: {
|
|
19
|
+
readonly value: "{borderRadius.sm}";
|
|
20
|
+
};
|
|
21
|
+
readonly list: {
|
|
22
|
+
readonly value: "{borderRadius.sm}";
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
readonly none: {
|
|
26
|
+
readonly value: 0;
|
|
27
|
+
};
|
|
28
|
+
readonly xs: {
|
|
29
|
+
readonly value: "{font.size.base}";
|
|
30
|
+
readonly modify: {
|
|
31
|
+
readonly type: "multiply";
|
|
32
|
+
readonly value: 0.25;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
readonly sm: {
|
|
36
|
+
readonly value: "{font.size.base}";
|
|
37
|
+
readonly modify: {
|
|
38
|
+
readonly type: "multiply";
|
|
39
|
+
readonly value: 0.5;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
readonly md: {
|
|
43
|
+
readonly value: "{font.size.base}";
|
|
44
|
+
readonly modify: {
|
|
45
|
+
readonly type: "multiply";
|
|
46
|
+
readonly value: 0.75;
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
readonly lg: {
|
|
50
|
+
readonly value: "{font.size.base}";
|
|
51
|
+
readonly modify: {
|
|
52
|
+
readonly type: "multiply";
|
|
53
|
+
readonly value: 1;
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
readonly xl: {
|
|
57
|
+
readonly value: "{font.size.base}";
|
|
58
|
+
readonly modify: {
|
|
59
|
+
readonly type: "multiply";
|
|
60
|
+
readonly value: 1.5;
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
readonly full: {
|
|
64
|
+
readonly value: 99999;
|
|
65
|
+
};
|
|
66
|
+
};
|
|
4
67
|
colors: {
|
|
5
68
|
readonly page: {
|
|
6
69
|
readonly bg: {
|
|
@@ -31,14 +94,14 @@ export declare const theme: Flattened<{
|
|
|
31
94
|
readonly hover: {
|
|
32
95
|
readonly value: "{colors.bg.primary}";
|
|
33
96
|
readonly modify: {
|
|
34
|
-
readonly type: "mix";
|
|
97
|
+
readonly type: "color-mix";
|
|
35
98
|
readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
|
|
36
99
|
};
|
|
37
100
|
};
|
|
38
101
|
readonly pressed: {
|
|
39
102
|
readonly value: "{colors.bg.primary}";
|
|
40
103
|
readonly modify: {
|
|
41
|
-
readonly type: "mix";
|
|
104
|
+
readonly type: "color-mix";
|
|
42
105
|
readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
|
|
43
106
|
};
|
|
44
107
|
};
|
|
@@ -65,14 +128,14 @@ export declare const theme: Flattened<{
|
|
|
65
128
|
readonly hover: {
|
|
66
129
|
readonly value: "{colors.bg.secondary}";
|
|
67
130
|
readonly modify: {
|
|
68
|
-
readonly type: "mix";
|
|
131
|
+
readonly type: "color-mix";
|
|
69
132
|
readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
|
|
70
133
|
};
|
|
71
134
|
};
|
|
72
135
|
readonly pressed: {
|
|
73
136
|
readonly value: "{colors.bg.secondary}";
|
|
74
137
|
readonly modify: {
|
|
75
|
-
readonly type: "mix";
|
|
138
|
+
readonly type: "color-mix";
|
|
76
139
|
readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
|
|
77
140
|
};
|
|
78
141
|
};
|
|
@@ -101,14 +164,14 @@ export declare const theme: Flattened<{
|
|
|
101
164
|
readonly hover: {
|
|
102
165
|
readonly value: "{colors.fg.primary}";
|
|
103
166
|
readonly modify: {
|
|
104
|
-
readonly type: "mix";
|
|
167
|
+
readonly type: "color-mix";
|
|
105
168
|
readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
|
|
106
169
|
};
|
|
107
170
|
};
|
|
108
171
|
readonly pressed: {
|
|
109
172
|
readonly value: "{colors.fg.primary}";
|
|
110
173
|
readonly modify: {
|
|
111
|
-
readonly type: "mix";
|
|
174
|
+
readonly type: "color-mix";
|
|
112
175
|
readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
|
|
113
176
|
};
|
|
114
177
|
};
|
|
@@ -122,14 +185,14 @@ export declare const theme: Flattened<{
|
|
|
122
185
|
readonly hover: {
|
|
123
186
|
readonly value: "{colors.fg.default}";
|
|
124
187
|
readonly modify: {
|
|
125
|
-
readonly type: "mix";
|
|
188
|
+
readonly type: "color-mix";
|
|
126
189
|
readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
|
|
127
190
|
};
|
|
128
191
|
};
|
|
129
192
|
readonly pressed: {
|
|
130
193
|
readonly value: "{colors.fg.default}";
|
|
131
194
|
readonly modify: {
|
|
132
|
-
readonly type: "mix";
|
|
195
|
+
readonly type: "color-mix";
|
|
133
196
|
readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
|
|
134
197
|
};
|
|
135
198
|
};
|
|
@@ -196,14 +259,14 @@ export declare const theme: Flattened<{
|
|
|
196
259
|
readonly hover: {
|
|
197
260
|
readonly value: "{colors.bg.default}";
|
|
198
261
|
readonly modify: {
|
|
199
|
-
readonly type: "mix";
|
|
262
|
+
readonly type: "color-mix";
|
|
200
263
|
readonly value: readonly [readonly ["{colors.bg.contrast}", "5%"]];
|
|
201
264
|
};
|
|
202
265
|
};
|
|
203
266
|
readonly pressed: {
|
|
204
267
|
readonly value: "{colors.bg.default}";
|
|
205
268
|
readonly modify: {
|
|
206
|
-
readonly type: "mix";
|
|
269
|
+
readonly type: "color-mix";
|
|
207
270
|
readonly value: readonly [readonly ["{colors.bg.contrast}", "7%"]];
|
|
208
271
|
};
|
|
209
272
|
};
|
|
@@ -271,7 +334,7 @@ export declare const theme: Flattened<{
|
|
|
271
334
|
readonly highlight: {
|
|
272
335
|
readonly value: "{colors.bg.default}";
|
|
273
336
|
readonly modify: {
|
|
274
|
-
readonly type: "mix";
|
|
337
|
+
readonly type: "color-mix";
|
|
275
338
|
readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
|
|
276
339
|
};
|
|
277
340
|
};
|
|
@@ -323,14 +386,14 @@ export declare const theme: Flattened<{
|
|
|
323
386
|
readonly overlay: {
|
|
324
387
|
readonly value: "{colors.bg.alternate}";
|
|
325
388
|
readonly modify: {
|
|
326
|
-
readonly type: "alpha";
|
|
389
|
+
readonly type: "color-alpha";
|
|
327
390
|
readonly value: 0.33;
|
|
328
391
|
};
|
|
329
392
|
};
|
|
330
393
|
readonly skeleton: {
|
|
331
394
|
readonly value: "{colors.fg.default}";
|
|
332
395
|
readonly modify: {
|
|
333
|
-
readonly type: "alpha";
|
|
396
|
+
readonly type: "color-alpha";
|
|
334
397
|
readonly value: 0.1;
|
|
335
398
|
};
|
|
336
399
|
};
|
|
@@ -387,12 +450,36 @@ export declare const theme: Flattened<{
|
|
|
387
450
|
};
|
|
388
451
|
font: {
|
|
389
452
|
readonly family: {
|
|
453
|
+
readonly page: {
|
|
454
|
+
readonly value: "{font.family.body}";
|
|
455
|
+
};
|
|
456
|
+
readonly cta: {
|
|
457
|
+
readonly value: "{font.family.interactive}";
|
|
458
|
+
};
|
|
459
|
+
readonly link: {
|
|
460
|
+
readonly value: "{font.family.interactive}";
|
|
461
|
+
};
|
|
462
|
+
readonly input: {
|
|
463
|
+
readonly value: "{font.family.interactive}";
|
|
464
|
+
};
|
|
465
|
+
readonly select: {
|
|
466
|
+
readonly value: "{font.family.interactive}";
|
|
467
|
+
};
|
|
468
|
+
readonly code: {
|
|
469
|
+
readonly value: "{font.family.mono}";
|
|
470
|
+
};
|
|
390
471
|
readonly mono: {
|
|
391
472
|
readonly value: "\"DM Mono\", monospace";
|
|
392
473
|
};
|
|
393
474
|
readonly sans: {
|
|
394
475
|
readonly value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
|
|
395
476
|
};
|
|
477
|
+
readonly body: {
|
|
478
|
+
readonly value: "{font.family.sans}";
|
|
479
|
+
};
|
|
480
|
+
readonly interactive: {
|
|
481
|
+
readonly value: "{font.family.sans}";
|
|
482
|
+
};
|
|
396
483
|
};
|
|
397
484
|
readonly size: {
|
|
398
485
|
readonly base: {
|
|
@@ -407,11 +494,22 @@ export type SemanticColors = Flattened<{
|
|
|
407
494
|
export type ComponentColors = Flattened<{
|
|
408
495
|
colors: typeof colorsComponents;
|
|
409
496
|
}>;
|
|
410
|
-
export type FontTokens = Flattened<{
|
|
411
|
-
font: typeof font;
|
|
412
|
-
}>;
|
|
413
497
|
export type ColorTokens = SemanticColors & ComponentColors;
|
|
414
|
-
export type
|
|
498
|
+
export type SemanticFonts = Flattened<{
|
|
499
|
+
font: typeof fontSemantic;
|
|
500
|
+
}>;
|
|
501
|
+
export type ComponentFonts = Flattened<{
|
|
502
|
+
font: typeof fontComponents;
|
|
503
|
+
}>;
|
|
504
|
+
export type FontTokens = SemanticFonts & ComponentFonts;
|
|
505
|
+
export type SemanticBorderRadius = Flattened<{
|
|
506
|
+
borderRadius: typeof borderRadiusSemantic;
|
|
507
|
+
}>;
|
|
508
|
+
export type ComponentBorderRadius = Flattened<{
|
|
509
|
+
borderRadius: typeof borderRadiusComponents;
|
|
510
|
+
}>;
|
|
511
|
+
export type BorderRadiusTokens = SemanticBorderRadius & ComponentBorderRadius;
|
|
512
|
+
export type Theme = ColorTokens & FontTokens & BorderRadiusTokens;
|
|
415
513
|
export type ButtonVariant = "primary" | "secondary" | "linkPrimary" | "linkSecondary" | "transparentPrimary" | "transparentSecondary" | "control";
|
|
416
514
|
export type Size = "lg" | "md" | "sm" | "xs";
|
|
417
515
|
export type ButtonSize = Size | "none";
|