@coinbase/cdp-react 0.0.30 → 0.0.32

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.
Files changed (20) hide show
  1. package/dist/assets/Button.css +1 -1
  2. package/dist/assets/FundErrorScreen.css +1 -1
  3. package/dist/assets/FundModal.css +1 -1
  4. package/dist/assets/FundTransactionStatus.css +1 -1
  5. package/dist/assets/Select.css +1 -1
  6. package/dist/assets/ThemeProvider.css +1 -1
  7. package/dist/components/Fund/FundProvider.js +34 -32
  8. package/dist/components/Fund/components/FundTransactionStatus.js +69 -68
  9. package/dist/components/Fund/hooks/useBuyUrl.d.ts +2 -1
  10. package/dist/components/Fund/hooks/useBuyUrl.js +45 -33
  11. package/dist/components/Fund/types.d.ts +1 -0
  12. package/dist/components/FundModal/index.js +33 -32
  13. package/dist/components/forms/Select/index.js +1 -1
  14. package/dist/icons/IconExclamationTriangle.js +3 -10
  15. package/dist/theme/theme.d.ts +59 -10
  16. package/dist/theme/tokens.d.ts +176 -29
  17. package/dist/theme/tokens.js +53 -15
  18. package/dist/theme/utils.d.ts +6 -0
  19. package/dist/theme/utils.js +37 -20
  20. package/package.json +5 -5
package/dist/components/FundModal/index.js CHANGED
@@ -1,87 +1,88 @@
1
- import { jsxs as t, jsx as o, Fragment as x } from "react/jsx-runtime";
2
- import { useId as O, useState as v, useCallback as p } from "react";
1
+ import { jsxs as t, jsx as o, Fragment as v } from "react/jsx-runtime";
2
+ import { useId as x, useState as O, useCallback as p } from "react";
3
3
  import { useAppConfig as T } from "../CDPReactProvider/index.js";
4
- import { Fund as j, FundFooter as I } from "../Fund/index.js";
4
+ import { Fund as $, FundFooter as j } from "../Fund/index.js";
5
5
  import { Button as F } from "../ui/Button/index.js";
6
- import { Modal as $, ModalTrigger as z, ModalContent as A, ModalTitle as S, ModalClose as k } from "../ui/Modal/index.js";
6
+ import { Modal as A, ModalTrigger as I, ModalContent as z, ModalTitle as S, ModalClose as k } from "../ui/Modal/index.js";
7
7
  import { VisuallyHidden as M } from "../ui/VisuallyHidden/index.js";
8
- import { IconXMark as U } from "../../icons/IconXMark.js";
8
+ import { IconXMark as w } from "../../icons/IconXMark.js";
9
9
  import { FundTitle as a } from "../Fund/FundTitle.js";
10
- import { FundForm as V } from "../Fund/FundForm.js";
11
- import '../../assets/FundModal.css';const W = "FundModal-module__trigger___2IuXj", X = "FundModal-module__fund___1AmQa", q = "FundModal-module__title___lNsoT", B = "FundModal-module__content___9f3ze", n = {
12
- trigger: W,
13
- fund: X,
10
+ import { FundForm as U } from "../Fund/FundForm.js";
11
+ import '../../assets/FundModal.css';const V = "FundModal-module__trigger___2IuXj", W = "FundModal-module__fund___1AmQa", X = "FundModal-module__title___lNsoT", q = "FundModal-module__content___9f3ze", e = {
12
+ trigger: V,
13
+ fund: W,
14
14
  "no-footer": "FundModal-module__no-footer___WKV78",
15
15
  "title-buttons": "FundModal-module__title-buttons___Lctf7",
16
16
  "close-button": "FundModal-module__close-button___jzdFM",
17
17
  "close-icon": "FundModal-module__close-icon___WoA4a",
18
18
  "fund-inner": "FundModal-module__fund-inner___UuOq3",
19
19
  "tx-status": "FundModal-module__tx-status___fc-3f",
20
- title: q,
21
- content: B
20
+ title: X,
21
+ content: q,
22
+ "error-view": "FundModal-module__error-view___hR1A0"
22
23
  }, Y = ({
23
24
  children: g,
24
25
  open: i,
25
26
  setIsOpen: c,
26
27
  openIn: u,
27
28
  submitLabel: _,
28
- title: d,
29
+ title: r,
29
30
  ...m
30
31
  }) => {
31
- const { showCoinbaseFooter: f } = T(), r = O(), l = i !== void 0, [C, h] = v(!1), b = l ? i : C, s = p(
32
- (e) => l ? c?.(e) : h(e),
32
+ const { showCoinbaseFooter: f } = T(), d = x(), l = i !== void 0, [C, h] = O(!1), b = l ? i : C, s = p(
33
+ (n) => l ? c?.(n) : h(n),
33
34
  [l, c, h]
34
35
  ), N = p(() => {
35
36
  s(!1);
36
37
  }, [s]);
37
- return /* @__PURE__ */ t($, { open: b, onOpenChange: s, children: [
38
- /* @__PURE__ */ o(z, { asChild: !0, children: g || /* @__PURE__ */ t(F, { variant: "primary", className: n.trigger, children: [
38
+ return /* @__PURE__ */ t(A, { open: b, onOpenChange: s, children: [
39
+ /* @__PURE__ */ o(I, { asChild: !0, children: g || /* @__PURE__ */ t(F, { variant: "primary", className: e.trigger, children: [
39
40
  "Deposit ",
40
41
  m.cryptoCurrency.toUpperCase()
41
42
  ] }) }),
42
- /* @__PURE__ */ o(A, { "aria-describedby": void 0, children: /* @__PURE__ */ o(
43
- j,
43
+ /* @__PURE__ */ o(z, { "aria-describedby": void 0, children: /* @__PURE__ */ o(
44
+ $,
44
45
  {
45
- className: `${n.fund} ${f ? "" : n["no-footer"]}`,
46
+ className: `${e.fund} ${f ? "" : e["no-footer"]}`,
46
47
  openIn: u,
47
48
  submitLabel: _,
48
- title: d,
49
+ title: r,
49
50
  ...m,
50
- children: /* @__PURE__ */ t(x, { children: [
51
- /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(S, { asChild: !0, children: /* @__PURE__ */ o(a, { as: "span", children: d }) }) }),
51
+ children: /* @__PURE__ */ t(v, { children: [
52
+ /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(S, { asChild: !0, children: /* @__PURE__ */ o(a, { as: "span", children: r }) }) }),
52
53
  /* @__PURE__ */ o(
53
- V,
54
+ U,
54
55
  {
55
- "aria-labelledby": r,
56
+ "aria-labelledby": d,
56
57
  openIn: u,
57
58
  unmountOnTransactionSuccess: !0,
58
59
  unmount: N,
59
60
  submitLabel: _,
60
- children: ({ view: e, Content: y }) => /* @__PURE__ */ t(
61
+ children: ({ view: n, Content: y }) => /* @__PURE__ */ t(
61
62
  "div",
62
63
  {
63
- className: `${n["fund-inner"]} ${e === "transaction-status" ? n["tx-status"] : ""}`,
64
+ className: `${e["fund-inner"]} ${n === "transaction-status" ? e["tx-status"] : ""} ${n === "error" ? e["error-view"] : ""}`,
64
65
  children: [
65
- /* @__PURE__ */ t("div", { className: n["title-buttons"], children: [
66
- e === "error" ? /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(a, { id: r, children: d }) }) : /* @__PURE__ */ o(a, { className: n.title, id: r, children: d }),
66
+ /* @__PURE__ */ t("div", { className: e["title-buttons"], children: [
67
+ n === "error" ? /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(a, { id: d, children: r }) }) : /* @__PURE__ */ o(a, { className: e.title, id: d, children: r }),
67
68
  /* @__PURE__ */ o(k, { asChild: !0, children: /* @__PURE__ */ o(
68
69
  F,
69
70
  {
70
- className: n["close-button"],
71
+ className: e["close-button"],
71
72
  "aria-label": "Close",
72
73
  size: "md",
73
74
  variant: "transparentSecondary",
74
- children: /* @__PURE__ */ o(U, { className: n["close-icon"] })
75
+ children: /* @__PURE__ */ o(w, { className: e["close-icon"] })
75
76
  }
76
77
  ) })
77
78
  ] }),
78
- /* @__PURE__ */ o("div", { className: n.content, children: y })
79
+ /* @__PURE__ */ o("div", { className: e.content, children: y })
79
80
  ]
80
81
  }
81
82
  )
82
83
  }
83
84
  ),
84
- f && /* @__PURE__ */ o(I, {})
85
+ f && /* @__PURE__ */ o(j, {})
85
86
  ] })
86
87
  }
87
88
  ) })
package/dist/components/forms/Select/index.js CHANGED
@@ -35,7 +35,7 @@ const j = a(
35
35
  style: c,
36
36
  position: r = "popper",
37
37
  side: s = "bottom",
38
- sideOffset: n = 1,
38
+ sideOffset: n = 8,
39
39
  ..._
40
40
  }, d) => {
41
41
  const { cssVariables: S } = x();
package/dist/icons/IconExclamationTriangle.js CHANGED
@@ -1,14 +1,7 @@
1
1
  import { jsx as o } from "react/jsx-runtime";
2
2
  import "react";
3
- import { SvgIcon as l } from "./SvgIcon.js";
4
- const n = (e) => /* @__PURE__ */ o(l, { viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor", ...e, children: /* @__PURE__ */ o(
5
- "path",
6
- {
7
- fillRule: "evenodd",
8
- d: "M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
9
- clipRule: "evenodd"
10
- }
11
- ) });
3
+ import { SvgIcon as t } from "./SvgIcon.js";
4
+ const c = (r) => /* @__PURE__ */ o(t, { viewBox: "0 0 48 42", width: "48", height: "42", fill: "currentColor", ...r, children: /* @__PURE__ */ o("path", { d: "M48 42H0L24 0L48 42ZM24 32.7773C22.8956 32.7773 22.0001 33.7718 22 34.999C22 36.2262 22.8955 37.2217 24 37.2217C25.1045 37.2216 26 36.2262 26 34.999C25.9999 33.7719 25.1044 32.7774 24 32.7773ZM23 30.5547H25L26 15H22L23 30.5547Z" }) });
12
5
  export {
13
- n as IconExclamationTriangle
6
+ c as IconExclamationTriangle
14
7
  };
package/dist/theme/theme.d.ts CHANGED
@@ -31,8 +31,15 @@ export declare const theme: Flattened<{
31
31
  readonly hover: {
32
32
  readonly value: "{colors.bg.primary}";
33
33
  readonly modify: {
34
- readonly type: "alpha";
35
- readonly value: "0.9";
34
+ readonly type: "mix";
35
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
36
+ };
37
+ };
38
+ readonly pressed: {
39
+ readonly value: "{colors.bg.primary}";
40
+ readonly modify: {
41
+ readonly type: "mix";
42
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
36
43
  };
37
44
  };
38
45
  };
@@ -58,8 +65,15 @@ export declare const theme: Flattened<{
58
65
  readonly hover: {
59
66
  readonly value: "{colors.bg.secondary}";
60
67
  readonly modify: {
61
- readonly type: "alpha";
62
- readonly value: "0.9";
68
+ readonly type: "mix";
69
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
70
+ };
71
+ };
72
+ readonly pressed: {
73
+ readonly value: "{colors.bg.secondary}";
74
+ readonly modify: {
75
+ readonly type: "mix";
76
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
63
77
  };
64
78
  };
65
79
  };
@@ -87,8 +101,15 @@ export declare const theme: Flattened<{
87
101
  readonly hover: {
88
102
  readonly value: "{colors.fg.primary}";
89
103
  readonly modify: {
90
- readonly type: "alpha";
91
- readonly value: "0.9";
104
+ readonly type: "mix";
105
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
106
+ };
107
+ };
108
+ readonly pressed: {
109
+ readonly value: "{colors.fg.primary}";
110
+ readonly modify: {
111
+ readonly type: "mix";
112
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
92
113
  };
93
114
  };
94
115
  };
@@ -101,8 +122,15 @@ export declare const theme: Flattened<{
101
122
  readonly hover: {
102
123
  readonly value: "{colors.fg.default}";
103
124
  readonly modify: {
104
- readonly type: "alpha";
105
- readonly value: "0.9";
125
+ readonly type: "mix";
126
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
127
+ };
128
+ };
129
+ readonly pressed: {
130
+ readonly value: "{colors.fg.default}";
131
+ readonly modify: {
132
+ readonly type: "mix";
133
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
106
134
  };
107
135
  };
108
136
  };
@@ -165,6 +193,20 @@ export declare const theme: Flattened<{
165
193
  readonly default: {
166
194
  readonly value: "{colors.bg.default}";
167
195
  };
196
+ readonly hover: {
197
+ readonly value: "{colors.bg.default}";
198
+ readonly modify: {
199
+ readonly type: "mix";
200
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "5%"]];
201
+ };
202
+ };
203
+ readonly pressed: {
204
+ readonly value: "{colors.bg.default}";
205
+ readonly modify: {
206
+ readonly type: "mix";
207
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "7%"]];
208
+ };
209
+ };
168
210
  };
169
211
  readonly border: {
170
212
  readonly default: {
@@ -227,7 +269,11 @@ export declare const theme: Flattened<{
227
269
  readonly value: "{colors.bg.default}";
228
270
  };
229
271
  readonly highlight: {
230
- readonly value: "{colors.bg.secondary}";
272
+ readonly value: "{colors.bg.default}";
273
+ readonly modify: {
274
+ readonly type: "mix";
275
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
276
+ };
231
277
  };
232
278
  };
233
279
  readonly text: {
@@ -271,6 +317,9 @@ export declare const theme: Flattened<{
271
317
  readonly alternate: {
272
318
  readonly value: "#eef0f3";
273
319
  };
320
+ readonly contrast: {
321
+ readonly value: "{colors.fg.default}";
322
+ };
274
323
  readonly overlay: {
275
324
  readonly value: "{colors.bg.alternate}";
276
325
  readonly modify: {
@@ -342,7 +391,7 @@ export declare const theme: Flattened<{
342
391
  readonly value: "\"DM Mono\", monospace";
343
392
  };
344
393
  readonly sans: {
345
- readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
394
+ readonly value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
346
395
  };
347
396
  };
348
397
  readonly size: {
package/dist/theme/tokens.d.ts CHANGED
@@ -21,6 +21,9 @@ export declare const colorsSemantic: {
21
21
  readonly alternate: {
22
22
  readonly value: "#eef0f3";
23
23
  };
24
+ readonly contrast: {
25
+ readonly value: "{colors.fg.default}";
26
+ };
24
27
  readonly overlay: {
25
28
  readonly value: "{colors.bg.alternate}";
26
29
  readonly modify: {
@@ -116,8 +119,15 @@ export declare const colorsComponents: {
116
119
  readonly hover: {
117
120
  readonly value: "{colors.bg.primary}";
118
121
  readonly modify: {
119
- readonly type: "alpha";
120
- readonly value: "0.9";
122
+ readonly type: "mix";
123
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
124
+ };
125
+ };
126
+ readonly pressed: {
127
+ readonly value: "{colors.bg.primary}";
128
+ readonly modify: {
129
+ readonly type: "mix";
130
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
121
131
  };
122
132
  };
123
133
  };
@@ -143,8 +153,15 @@ export declare const colorsComponents: {
143
153
  readonly hover: {
144
154
  readonly value: "{colors.bg.secondary}";
145
155
  readonly modify: {
146
- readonly type: "alpha";
147
- readonly value: "0.9";
156
+ readonly type: "mix";
157
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
158
+ };
159
+ };
160
+ readonly pressed: {
161
+ readonly value: "{colors.bg.secondary}";
162
+ readonly modify: {
163
+ readonly type: "mix";
164
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
148
165
  };
149
166
  };
150
167
  };
@@ -172,8 +189,15 @@ export declare const colorsComponents: {
172
189
  readonly hover: {
173
190
  readonly value: "{colors.fg.primary}";
174
191
  readonly modify: {
175
- readonly type: "alpha";
176
- readonly value: "0.9";
192
+ readonly type: "mix";
193
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
194
+ };
195
+ };
196
+ readonly pressed: {
197
+ readonly value: "{colors.fg.primary}";
198
+ readonly modify: {
199
+ readonly type: "mix";
200
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
177
201
  };
178
202
  };
179
203
  };
@@ -186,8 +210,15 @@ export declare const colorsComponents: {
186
210
  readonly hover: {
187
211
  readonly value: "{colors.fg.default}";
188
212
  readonly modify: {
189
- readonly type: "alpha";
190
- readonly value: "0.9";
213
+ readonly type: "mix";
214
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
215
+ };
216
+ };
217
+ readonly pressed: {
218
+ readonly value: "{colors.fg.default}";
219
+ readonly modify: {
220
+ readonly type: "mix";
221
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
191
222
  };
192
223
  };
193
224
  };
@@ -250,6 +281,20 @@ export declare const colorsComponents: {
250
281
  readonly default: {
251
282
  readonly value: "{colors.bg.default}";
252
283
  };
284
+ readonly hover: {
285
+ readonly value: "{colors.bg.default}";
286
+ readonly modify: {
287
+ readonly type: "mix";
288
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "5%"]];
289
+ };
290
+ };
291
+ readonly pressed: {
292
+ readonly value: "{colors.bg.default}";
293
+ readonly modify: {
294
+ readonly type: "mix";
295
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "7%"]];
296
+ };
297
+ };
253
298
  };
254
299
  readonly border: {
255
300
  readonly default: {
@@ -312,7 +357,11 @@ export declare const colorsComponents: {
312
357
  readonly value: "{colors.bg.default}";
313
358
  };
314
359
  readonly highlight: {
315
- readonly value: "{colors.bg.secondary}";
360
+ readonly value: "{colors.bg.default}";
361
+ readonly modify: {
362
+ readonly type: "mix";
363
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
364
+ };
316
365
  };
317
366
  };
318
367
  readonly text: {
@@ -380,8 +429,15 @@ export declare const colors: {
380
429
  readonly hover: {
381
430
  readonly value: "{colors.bg.primary}";
382
431
  readonly modify: {
383
- readonly type: "alpha";
384
- readonly value: "0.9";
432
+ readonly type: "mix";
433
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
434
+ };
435
+ };
436
+ readonly pressed: {
437
+ readonly value: "{colors.bg.primary}";
438
+ readonly modify: {
439
+ readonly type: "mix";
440
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
385
441
  };
386
442
  };
387
443
  };
@@ -407,8 +463,15 @@ export declare const colors: {
407
463
  readonly hover: {
408
464
  readonly value: "{colors.bg.secondary}";
409
465
  readonly modify: {
410
- readonly type: "alpha";
411
- readonly value: "0.9";
466
+ readonly type: "mix";
467
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
468
+ };
469
+ };
470
+ readonly pressed: {
471
+ readonly value: "{colors.bg.secondary}";
472
+ readonly modify: {
473
+ readonly type: "mix";
474
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
412
475
  };
413
476
  };
414
477
  };
@@ -436,8 +499,15 @@ export declare const colors: {
436
499
  readonly hover: {
437
500
  readonly value: "{colors.fg.primary}";
438
501
  readonly modify: {
439
- readonly type: "alpha";
440
- readonly value: "0.9";
502
+ readonly type: "mix";
503
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
504
+ };
505
+ };
506
+ readonly pressed: {
507
+ readonly value: "{colors.fg.primary}";
508
+ readonly modify: {
509
+ readonly type: "mix";
510
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
441
511
  };
442
512
  };
443
513
  };
@@ -450,8 +520,15 @@ export declare const colors: {
450
520
  readonly hover: {
451
521
  readonly value: "{colors.fg.default}";
452
522
  readonly modify: {
453
- readonly type: "alpha";
454
- readonly value: "0.9";
523
+ readonly type: "mix";
524
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
525
+ };
526
+ };
527
+ readonly pressed: {
528
+ readonly value: "{colors.fg.default}";
529
+ readonly modify: {
530
+ readonly type: "mix";
531
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
455
532
  };
456
533
  };
457
534
  };
@@ -514,6 +591,20 @@ export declare const colors: {
514
591
  readonly default: {
515
592
  readonly value: "{colors.bg.default}";
516
593
  };
594
+ readonly hover: {
595
+ readonly value: "{colors.bg.default}";
596
+ readonly modify: {
597
+ readonly type: "mix";
598
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "5%"]];
599
+ };
600
+ };
601
+ readonly pressed: {
602
+ readonly value: "{colors.bg.default}";
603
+ readonly modify: {
604
+ readonly type: "mix";
605
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "7%"]];
606
+ };
607
+ };
517
608
  };
518
609
  readonly border: {
519
610
  readonly default: {
@@ -576,7 +667,11 @@ export declare const colors: {
576
667
  readonly value: "{colors.bg.default}";
577
668
  };
578
669
  readonly highlight: {
579
- readonly value: "{colors.bg.secondary}";
670
+ readonly value: "{colors.bg.default}";
671
+ readonly modify: {
672
+ readonly type: "mix";
673
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
674
+ };
580
675
  };
581
676
  };
582
677
  readonly text: {
@@ -620,6 +715,9 @@ export declare const colors: {
620
715
  readonly alternate: {
621
716
  readonly value: "#eef0f3";
622
717
  };
718
+ readonly contrast: {
719
+ readonly value: "{colors.fg.default}";
720
+ };
623
721
  readonly overlay: {
624
722
  readonly value: "{colors.bg.alternate}";
625
723
  readonly modify: {
@@ -691,7 +789,7 @@ export declare const font: {
691
789
  readonly value: "\"DM Mono\", monospace";
692
790
  };
693
791
  readonly sans: {
694
- readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
792
+ readonly value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
695
793
  };
696
794
  };
697
795
  readonly size: {
@@ -731,8 +829,15 @@ export declare const tokens: {
731
829
  readonly hover: {
732
830
  readonly value: "{colors.bg.primary}";
733
831
  readonly modify: {
734
- readonly type: "alpha";
735
- readonly value: "0.9";
832
+ readonly type: "mix";
833
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
834
+ };
835
+ };
836
+ readonly pressed: {
837
+ readonly value: "{colors.bg.primary}";
838
+ readonly modify: {
839
+ readonly type: "mix";
840
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
736
841
  };
737
842
  };
738
843
  };
@@ -758,8 +863,15 @@ export declare const tokens: {
758
863
  readonly hover: {
759
864
  readonly value: "{colors.bg.secondary}";
760
865
  readonly modify: {
761
- readonly type: "alpha";
762
- readonly value: "0.9";
866
+ readonly type: "mix";
867
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
868
+ };
869
+ };
870
+ readonly pressed: {
871
+ readonly value: "{colors.bg.secondary}";
872
+ readonly modify: {
873
+ readonly type: "mix";
874
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
763
875
  };
764
876
  };
765
877
  };
@@ -787,8 +899,15 @@ export declare const tokens: {
787
899
  readonly hover: {
788
900
  readonly value: "{colors.fg.primary}";
789
901
  readonly modify: {
790
- readonly type: "alpha";
791
- readonly value: "0.9";
902
+ readonly type: "mix";
903
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
904
+ };
905
+ };
906
+ readonly pressed: {
907
+ readonly value: "{colors.fg.primary}";
908
+ readonly modify: {
909
+ readonly type: "mix";
910
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
792
911
  };
793
912
  };
794
913
  };
@@ -801,8 +920,15 @@ export declare const tokens: {
801
920
  readonly hover: {
802
921
  readonly value: "{colors.fg.default}";
803
922
  readonly modify: {
804
- readonly type: "alpha";
805
- readonly value: "0.9";
923
+ readonly type: "mix";
924
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
925
+ };
926
+ };
927
+ readonly pressed: {
928
+ readonly value: "{colors.fg.default}";
929
+ readonly modify: {
930
+ readonly type: "mix";
931
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
806
932
  };
807
933
  };
808
934
  };
@@ -865,6 +991,20 @@ export declare const tokens: {
865
991
  readonly default: {
866
992
  readonly value: "{colors.bg.default}";
867
993
  };
994
+ readonly hover: {
995
+ readonly value: "{colors.bg.default}";
996
+ readonly modify: {
997
+ readonly type: "mix";
998
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "5%"]];
999
+ };
1000
+ };
1001
+ readonly pressed: {
1002
+ readonly value: "{colors.bg.default}";
1003
+ readonly modify: {
1004
+ readonly type: "mix";
1005
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "7%"]];
1006
+ };
1007
+ };
868
1008
  };
869
1009
  readonly border: {
870
1010
  readonly default: {
@@ -927,7 +1067,11 @@ export declare const tokens: {
927
1067
  readonly value: "{colors.bg.default}";
928
1068
  };
929
1069
  readonly highlight: {
930
- readonly value: "{colors.bg.secondary}";
1070
+ readonly value: "{colors.bg.default}";
1071
+ readonly modify: {
1072
+ readonly type: "mix";
1073
+ readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
1074
+ };
931
1075
  };
932
1076
  };
933
1077
  readonly text: {
@@ -971,6 +1115,9 @@ export declare const tokens: {
971
1115
  readonly alternate: {
972
1116
  readonly value: "#eef0f3";
973
1117
  };
1118
+ readonly contrast: {
1119
+ readonly value: "{colors.fg.default}";
1120
+ };
974
1121
  readonly overlay: {
975
1122
  readonly value: "{colors.bg.alternate}";
976
1123
  readonly modify: {
@@ -1042,7 +1189,7 @@ export declare const tokens: {
1042
1189
  readonly value: "\"DM Mono\", monospace";
1043
1190
  };
1044
1191
  readonly sans: {
1045
- readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
1192
+ readonly value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
1046
1193
  };
1047
1194
  };
1048
1195
  readonly size: {