@coinbase/cdp-react 0.0.36 → 0.0.38

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 (28) hide show
  1. package/README.md +6 -11
  2. package/dist/assets/AmountInput.css +1 -1
  3. package/dist/assets/AuthButton.css +1 -1
  4. package/dist/assets/Button.css +1 -1
  5. package/dist/assets/ButtonBase.css +1 -1
  6. package/dist/assets/Error.css +1 -1
  7. package/dist/assets/Field.css +1 -1
  8. package/dist/assets/Fund.css +1 -1
  9. package/dist/assets/FundPaymentMethods.css +1 -1
  10. package/dist/assets/Input.css +1 -1
  11. package/dist/assets/Modal.css +1 -1
  12. package/dist/assets/PhoneNumberInput.css +1 -1
  13. package/dist/assets/Select.css +1 -1
  14. package/dist/assets/SignIn.css +1 -1
  15. package/dist/assets/SuccessMessage.css +1 -1
  16. package/dist/components/CDPReactProvider/index.d.ts +7 -6
  17. package/dist/components/CDPReactProvider/index.js +43 -19
  18. package/dist/components/SignIn/SignInForm.js +38 -24
  19. package/dist/components/SignIn/SignInImage.js +10 -10
  20. package/dist/components/ui/SwitchTransition/index.js +65 -65
  21. package/dist/index.js +85 -80
  22. package/dist/theme/index.js +14 -9
  23. package/dist/theme/theme.d.ts +116 -18
  24. package/dist/theme/tokens.d.ts +321 -39
  25. package/dist/theme/tokens.js +117 -25
  26. package/dist/theme/utils.d.ts +6 -3
  27. package/dist/theme/utils.js +16 -18
  28. package/package.json +5 -5
package/dist/theme/tokens.d.ts CHANGED
@@ -27,14 +27,14 @@ export declare const colorsSemantic: {
27
27
  readonly overlay: {
28
28
  readonly value: "{colors.bg.alternate}";
29
29
  readonly modify: {
30
- readonly type: "alpha";
30
+ readonly type: "color-alpha";
31
31
  readonly value: 0.33;
32
32
  };
33
33
  };
34
34
  readonly skeleton: {
35
35
  readonly value: "{colors.fg.default}";
36
36
  readonly modify: {
37
- readonly type: "alpha";
37
+ readonly type: "color-alpha";
38
38
  readonly value: 0.1;
39
39
  };
40
40
  };
@@ -119,14 +119,14 @@ export declare const colorsComponents: {
119
119
  readonly hover: {
120
120
  readonly value: "{colors.bg.primary}";
121
121
  readonly modify: {
122
- readonly type: "mix";
122
+ readonly type: "color-mix";
123
123
  readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
124
124
  };
125
125
  };
126
126
  readonly pressed: {
127
127
  readonly value: "{colors.bg.primary}";
128
128
  readonly modify: {
129
- readonly type: "mix";
129
+ readonly type: "color-mix";
130
130
  readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
131
131
  };
132
132
  };
@@ -153,14 +153,14 @@ export declare const colorsComponents: {
153
153
  readonly hover: {
154
154
  readonly value: "{colors.bg.secondary}";
155
155
  readonly modify: {
156
- readonly type: "mix";
156
+ readonly type: "color-mix";
157
157
  readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
158
158
  };
159
159
  };
160
160
  readonly pressed: {
161
161
  readonly value: "{colors.bg.secondary}";
162
162
  readonly modify: {
163
- readonly type: "mix";
163
+ readonly type: "color-mix";
164
164
  readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
165
165
  };
166
166
  };
@@ -189,14 +189,14 @@ export declare const colorsComponents: {
189
189
  readonly hover: {
190
190
  readonly value: "{colors.fg.primary}";
191
191
  readonly modify: {
192
- readonly type: "mix";
192
+ readonly type: "color-mix";
193
193
  readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
194
194
  };
195
195
  };
196
196
  readonly pressed: {
197
197
  readonly value: "{colors.fg.primary}";
198
198
  readonly modify: {
199
- readonly type: "mix";
199
+ readonly type: "color-mix";
200
200
  readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
201
201
  };
202
202
  };
@@ -210,14 +210,14 @@ export declare const colorsComponents: {
210
210
  readonly hover: {
211
211
  readonly value: "{colors.fg.default}";
212
212
  readonly modify: {
213
- readonly type: "mix";
213
+ readonly type: "color-mix";
214
214
  readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
215
215
  };
216
216
  };
217
217
  readonly pressed: {
218
218
  readonly value: "{colors.fg.default}";
219
219
  readonly modify: {
220
- readonly type: "mix";
220
+ readonly type: "color-mix";
221
221
  readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
222
222
  };
223
223
  };
@@ -284,14 +284,14 @@ export declare const colorsComponents: {
284
284
  readonly hover: {
285
285
  readonly value: "{colors.bg.default}";
286
286
  readonly modify: {
287
- readonly type: "mix";
287
+ readonly type: "color-mix";
288
288
  readonly value: readonly [readonly ["{colors.bg.contrast}", "5%"]];
289
289
  };
290
290
  };
291
291
  readonly pressed: {
292
292
  readonly value: "{colors.bg.default}";
293
293
  readonly modify: {
294
- readonly type: "mix";
294
+ readonly type: "color-mix";
295
295
  readonly value: readonly [readonly ["{colors.bg.contrast}", "7%"]];
296
296
  };
297
297
  };
@@ -359,7 +359,7 @@ export declare const colorsComponents: {
359
359
  readonly highlight: {
360
360
  readonly value: "{colors.bg.default}";
361
361
  readonly modify: {
362
- readonly type: "mix";
362
+ readonly type: "color-mix";
363
363
  readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
364
364
  };
365
365
  };
@@ -429,14 +429,14 @@ export declare const colors: {
429
429
  readonly hover: {
430
430
  readonly value: "{colors.bg.primary}";
431
431
  readonly modify: {
432
- readonly type: "mix";
432
+ readonly type: "color-mix";
433
433
  readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
434
434
  };
435
435
  };
436
436
  readonly pressed: {
437
437
  readonly value: "{colors.bg.primary}";
438
438
  readonly modify: {
439
- readonly type: "mix";
439
+ readonly type: "color-mix";
440
440
  readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
441
441
  };
442
442
  };
@@ -463,14 +463,14 @@ export declare const colors: {
463
463
  readonly hover: {
464
464
  readonly value: "{colors.bg.secondary}";
465
465
  readonly modify: {
466
- readonly type: "mix";
466
+ readonly type: "color-mix";
467
467
  readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
468
468
  };
469
469
  };
470
470
  readonly pressed: {
471
471
  readonly value: "{colors.bg.secondary}";
472
472
  readonly modify: {
473
- readonly type: "mix";
473
+ readonly type: "color-mix";
474
474
  readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
475
475
  };
476
476
  };
@@ -499,14 +499,14 @@ export declare const colors: {
499
499
  readonly hover: {
500
500
  readonly value: "{colors.fg.primary}";
501
501
  readonly modify: {
502
- readonly type: "mix";
502
+ readonly type: "color-mix";
503
503
  readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
504
504
  };
505
505
  };
506
506
  readonly pressed: {
507
507
  readonly value: "{colors.fg.primary}";
508
508
  readonly modify: {
509
- readonly type: "mix";
509
+ readonly type: "color-mix";
510
510
  readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
511
511
  };
512
512
  };
@@ -520,14 +520,14 @@ export declare const colors: {
520
520
  readonly hover: {
521
521
  readonly value: "{colors.fg.default}";
522
522
  readonly modify: {
523
- readonly type: "mix";
523
+ readonly type: "color-mix";
524
524
  readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
525
525
  };
526
526
  };
527
527
  readonly pressed: {
528
528
  readonly value: "{colors.fg.default}";
529
529
  readonly modify: {
530
- readonly type: "mix";
530
+ readonly type: "color-mix";
531
531
  readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
532
532
  };
533
533
  };
@@ -594,14 +594,14 @@ export declare const colors: {
594
594
  readonly hover: {
595
595
  readonly value: "{colors.bg.default}";
596
596
  readonly modify: {
597
- readonly type: "mix";
597
+ readonly type: "color-mix";
598
598
  readonly value: readonly [readonly ["{colors.bg.contrast}", "5%"]];
599
599
  };
600
600
  };
601
601
  readonly pressed: {
602
602
  readonly value: "{colors.bg.default}";
603
603
  readonly modify: {
604
- readonly type: "mix";
604
+ readonly type: "color-mix";
605
605
  readonly value: readonly [readonly ["{colors.bg.contrast}", "7%"]];
606
606
  };
607
607
  };
@@ -669,7 +669,7 @@ export declare const colors: {
669
669
  readonly highlight: {
670
670
  readonly value: "{colors.bg.default}";
671
671
  readonly modify: {
672
- readonly type: "mix";
672
+ readonly type: "color-mix";
673
673
  readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
674
674
  };
675
675
  };
@@ -721,14 +721,14 @@ export declare const colors: {
721
721
  readonly overlay: {
722
722
  readonly value: "{colors.bg.alternate}";
723
723
  readonly modify: {
724
- readonly type: "alpha";
724
+ readonly type: "color-alpha";
725
725
  readonly value: 0.33;
726
726
  };
727
727
  };
728
728
  readonly skeleton: {
729
729
  readonly value: "{colors.fg.default}";
730
730
  readonly modify: {
731
- readonly type: "alpha";
731
+ readonly type: "color-alpha";
732
732
  readonly value: 0.1;
733
733
  };
734
734
  };
@@ -783,14 +783,81 @@ export declare const colors: {
783
783
  };
784
784
  };
785
785
  };
786
+ export declare const fontSemantic: {
787
+ readonly family: {
788
+ readonly mono: {
789
+ readonly value: "\"DM Mono\", monospace";
790
+ };
791
+ readonly sans: {
792
+ readonly value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
793
+ };
794
+ readonly body: {
795
+ readonly value: "{font.family.sans}";
796
+ };
797
+ readonly interactive: {
798
+ readonly value: "{font.family.sans}";
799
+ };
800
+ };
801
+ readonly size: {
802
+ readonly base: {
803
+ readonly value: 16;
804
+ };
805
+ };
806
+ };
807
+ export declare const fontComponents: {
808
+ readonly family: {
809
+ readonly page: {
810
+ readonly value: "{font.family.body}";
811
+ };
812
+ readonly cta: {
813
+ readonly value: "{font.family.interactive}";
814
+ };
815
+ readonly link: {
816
+ readonly value: "{font.family.interactive}";
817
+ };
818
+ readonly input: {
819
+ readonly value: "{font.family.interactive}";
820
+ };
821
+ readonly select: {
822
+ readonly value: "{font.family.interactive}";
823
+ };
824
+ readonly code: {
825
+ readonly value: "{font.family.mono}";
826
+ };
827
+ };
828
+ };
786
829
  export declare const font: {
787
830
  readonly family: {
831
+ readonly page: {
832
+ readonly value: "{font.family.body}";
833
+ };
834
+ readonly cta: {
835
+ readonly value: "{font.family.interactive}";
836
+ };
837
+ readonly link: {
838
+ readonly value: "{font.family.interactive}";
839
+ };
840
+ readonly input: {
841
+ readonly value: "{font.family.interactive}";
842
+ };
843
+ readonly select: {
844
+ readonly value: "{font.family.interactive}";
845
+ };
846
+ readonly code: {
847
+ readonly value: "{font.family.mono}";
848
+ };
788
849
  readonly mono: {
789
850
  readonly value: "\"DM Mono\", monospace";
790
851
  };
791
852
  readonly sans: {
792
853
  readonly value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
793
854
  };
855
+ readonly body: {
856
+ readonly value: "{font.family.sans}";
857
+ };
858
+ readonly interactive: {
859
+ readonly value: "{font.family.sans}";
860
+ };
794
861
  };
795
862
  readonly size: {
796
863
  readonly base: {
@@ -798,7 +865,198 @@ export declare const font: {
798
865
  };
799
866
  };
800
867
  };
868
+ export declare const borderRadiusSemantic: {
869
+ readonly none: {
870
+ readonly value: 0;
871
+ };
872
+ readonly xs: {
873
+ readonly value: "{font.size.base}";
874
+ readonly modify: {
875
+ readonly type: "multiply";
876
+ readonly value: 0.25;
877
+ };
878
+ };
879
+ readonly sm: {
880
+ readonly value: "{font.size.base}";
881
+ readonly modify: {
882
+ readonly type: "multiply";
883
+ readonly value: 0.5;
884
+ };
885
+ };
886
+ readonly md: {
887
+ readonly value: "{font.size.base}";
888
+ readonly modify: {
889
+ readonly type: "multiply";
890
+ readonly value: 0.75;
891
+ };
892
+ };
893
+ readonly lg: {
894
+ readonly value: "{font.size.base}";
895
+ readonly modify: {
896
+ readonly type: "multiply";
897
+ readonly value: 1;
898
+ };
899
+ };
900
+ readonly xl: {
901
+ readonly value: "{font.size.base}";
902
+ readonly modify: {
903
+ readonly type: "multiply";
904
+ readonly value: 1.5;
905
+ };
906
+ };
907
+ readonly full: {
908
+ readonly value: 99999;
909
+ };
910
+ };
911
+ export declare const borderRadiusComponents: {
912
+ readonly cta: {
913
+ readonly value: "{borderRadius.full}";
914
+ };
915
+ readonly input: {
916
+ readonly value: "{borderRadius.sm}";
917
+ };
918
+ readonly link: {
919
+ readonly value: "{borderRadius.full}";
920
+ };
921
+ readonly modal: {
922
+ readonly value: "{borderRadius.sm}";
923
+ };
924
+ readonly select: {
925
+ readonly trigger: {
926
+ readonly value: "{borderRadius.sm}";
927
+ };
928
+ readonly list: {
929
+ readonly value: "{borderRadius.sm}";
930
+ };
931
+ };
932
+ };
933
+ export declare const borderRadius: {
934
+ readonly cta: {
935
+ readonly value: "{borderRadius.full}";
936
+ };
937
+ readonly input: {
938
+ readonly value: "{borderRadius.sm}";
939
+ };
940
+ readonly link: {
941
+ readonly value: "{borderRadius.full}";
942
+ };
943
+ readonly modal: {
944
+ readonly value: "{borderRadius.sm}";
945
+ };
946
+ readonly select: {
947
+ readonly trigger: {
948
+ readonly value: "{borderRadius.sm}";
949
+ };
950
+ readonly list: {
951
+ readonly value: "{borderRadius.sm}";
952
+ };
953
+ };
954
+ readonly none: {
955
+ readonly value: 0;
956
+ };
957
+ readonly xs: {
958
+ readonly value: "{font.size.base}";
959
+ readonly modify: {
960
+ readonly type: "multiply";
961
+ readonly value: 0.25;
962
+ };
963
+ };
964
+ readonly sm: {
965
+ readonly value: "{font.size.base}";
966
+ readonly modify: {
967
+ readonly type: "multiply";
968
+ readonly value: 0.5;
969
+ };
970
+ };
971
+ readonly md: {
972
+ readonly value: "{font.size.base}";
973
+ readonly modify: {
974
+ readonly type: "multiply";
975
+ readonly value: 0.75;
976
+ };
977
+ };
978
+ readonly lg: {
979
+ readonly value: "{font.size.base}";
980
+ readonly modify: {
981
+ readonly type: "multiply";
982
+ readonly value: 1;
983
+ };
984
+ };
985
+ readonly xl: {
986
+ readonly value: "{font.size.base}";
987
+ readonly modify: {
988
+ readonly type: "multiply";
989
+ readonly value: 1.5;
990
+ };
991
+ };
992
+ readonly full: {
993
+ readonly value: 99999;
994
+ };
995
+ };
801
996
  export declare const tokens: {
997
+ borderRadius: {
998
+ readonly cta: {
999
+ readonly value: "{borderRadius.full}";
1000
+ };
1001
+ readonly input: {
1002
+ readonly value: "{borderRadius.sm}";
1003
+ };
1004
+ readonly link: {
1005
+ readonly value: "{borderRadius.full}";
1006
+ };
1007
+ readonly modal: {
1008
+ readonly value: "{borderRadius.sm}";
1009
+ };
1010
+ readonly select: {
1011
+ readonly trigger: {
1012
+ readonly value: "{borderRadius.sm}";
1013
+ };
1014
+ readonly list: {
1015
+ readonly value: "{borderRadius.sm}";
1016
+ };
1017
+ };
1018
+ readonly none: {
1019
+ readonly value: 0;
1020
+ };
1021
+ readonly xs: {
1022
+ readonly value: "{font.size.base}";
1023
+ readonly modify: {
1024
+ readonly type: "multiply";
1025
+ readonly value: 0.25;
1026
+ };
1027
+ };
1028
+ readonly sm: {
1029
+ readonly value: "{font.size.base}";
1030
+ readonly modify: {
1031
+ readonly type: "multiply";
1032
+ readonly value: 0.5;
1033
+ };
1034
+ };
1035
+ readonly md: {
1036
+ readonly value: "{font.size.base}";
1037
+ readonly modify: {
1038
+ readonly type: "multiply";
1039
+ readonly value: 0.75;
1040
+ };
1041
+ };
1042
+ readonly lg: {
1043
+ readonly value: "{font.size.base}";
1044
+ readonly modify: {
1045
+ readonly type: "multiply";
1046
+ readonly value: 1;
1047
+ };
1048
+ };
1049
+ readonly xl: {
1050
+ readonly value: "{font.size.base}";
1051
+ readonly modify: {
1052
+ readonly type: "multiply";
1053
+ readonly value: 1.5;
1054
+ };
1055
+ };
1056
+ readonly full: {
1057
+ readonly value: 99999;
1058
+ };
1059
+ };
802
1060
  colors: {
803
1061
  readonly page: {
804
1062
  readonly bg: {
@@ -829,14 +1087,14 @@ export declare const tokens: {
829
1087
  readonly hover: {
830
1088
  readonly value: "{colors.bg.primary}";
831
1089
  readonly modify: {
832
- readonly type: "mix";
1090
+ readonly type: "color-mix";
833
1091
  readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
834
1092
  };
835
1093
  };
836
1094
  readonly pressed: {
837
1095
  readonly value: "{colors.bg.primary}";
838
1096
  readonly modify: {
839
- readonly type: "mix";
1097
+ readonly type: "color-mix";
840
1098
  readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
841
1099
  };
842
1100
  };
@@ -863,14 +1121,14 @@ export declare const tokens: {
863
1121
  readonly hover: {
864
1122
  readonly value: "{colors.bg.secondary}";
865
1123
  readonly modify: {
866
- readonly type: "mix";
1124
+ readonly type: "color-mix";
867
1125
  readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
868
1126
  };
869
1127
  };
870
1128
  readonly pressed: {
871
1129
  readonly value: "{colors.bg.secondary}";
872
1130
  readonly modify: {
873
- readonly type: "mix";
1131
+ readonly type: "color-mix";
874
1132
  readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
875
1133
  };
876
1134
  };
@@ -899,14 +1157,14 @@ export declare const tokens: {
899
1157
  readonly hover: {
900
1158
  readonly value: "{colors.fg.primary}";
901
1159
  readonly modify: {
902
- readonly type: "mix";
1160
+ readonly type: "color-mix";
903
1161
  readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
904
1162
  };
905
1163
  };
906
1164
  readonly pressed: {
907
1165
  readonly value: "{colors.fg.primary}";
908
1166
  readonly modify: {
909
- readonly type: "mix";
1167
+ readonly type: "color-mix";
910
1168
  readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
911
1169
  };
912
1170
  };
@@ -920,14 +1178,14 @@ export declare const tokens: {
920
1178
  readonly hover: {
921
1179
  readonly value: "{colors.fg.default}";
922
1180
  readonly modify: {
923
- readonly type: "mix";
1181
+ readonly type: "color-mix";
924
1182
  readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
925
1183
  };
926
1184
  };
927
1185
  readonly pressed: {
928
1186
  readonly value: "{colors.fg.default}";
929
1187
  readonly modify: {
930
- readonly type: "mix";
1188
+ readonly type: "color-mix";
931
1189
  readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
932
1190
  };
933
1191
  };
@@ -994,14 +1252,14 @@ export declare const tokens: {
994
1252
  readonly hover: {
995
1253
  readonly value: "{colors.bg.default}";
996
1254
  readonly modify: {
997
- readonly type: "mix";
1255
+ readonly type: "color-mix";
998
1256
  readonly value: readonly [readonly ["{colors.bg.contrast}", "5%"]];
999
1257
  };
1000
1258
  };
1001
1259
  readonly pressed: {
1002
1260
  readonly value: "{colors.bg.default}";
1003
1261
  readonly modify: {
1004
- readonly type: "mix";
1262
+ readonly type: "color-mix";
1005
1263
  readonly value: readonly [readonly ["{colors.bg.contrast}", "7%"]];
1006
1264
  };
1007
1265
  };
@@ -1069,7 +1327,7 @@ export declare const tokens: {
1069
1327
  readonly highlight: {
1070
1328
  readonly value: "{colors.bg.default}";
1071
1329
  readonly modify: {
1072
- readonly type: "mix";
1330
+ readonly type: "color-mix";
1073
1331
  readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
1074
1332
  };
1075
1333
  };
@@ -1121,14 +1379,14 @@ export declare const tokens: {
1121
1379
  readonly overlay: {
1122
1380
  readonly value: "{colors.bg.alternate}";
1123
1381
  readonly modify: {
1124
- readonly type: "alpha";
1382
+ readonly type: "color-alpha";
1125
1383
  readonly value: 0.33;
1126
1384
  };
1127
1385
  };
1128
1386
  readonly skeleton: {
1129
1387
  readonly value: "{colors.fg.default}";
1130
1388
  readonly modify: {
1131
- readonly type: "alpha";
1389
+ readonly type: "color-alpha";
1132
1390
  readonly value: 0.1;
1133
1391
  };
1134
1392
  };
@@ -1185,12 +1443,36 @@ export declare const tokens: {
1185
1443
  };
1186
1444
  font: {
1187
1445
  readonly family: {
1446
+ readonly page: {
1447
+ readonly value: "{font.family.body}";
1448
+ };
1449
+ readonly cta: {
1450
+ readonly value: "{font.family.interactive}";
1451
+ };
1452
+ readonly link: {
1453
+ readonly value: "{font.family.interactive}";
1454
+ };
1455
+ readonly input: {
1456
+ readonly value: "{font.family.interactive}";
1457
+ };
1458
+ readonly select: {
1459
+ readonly value: "{font.family.interactive}";
1460
+ };
1461
+ readonly code: {
1462
+ readonly value: "{font.family.mono}";
1463
+ };
1188
1464
  readonly mono: {
1189
1465
  readonly value: "\"DM Mono\", monospace";
1190
1466
  };
1191
1467
  readonly sans: {
1192
1468
  readonly value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
1193
1469
  };
1470
+ readonly body: {
1471
+ readonly value: "{font.family.sans}";
1472
+ };
1473
+ readonly interactive: {
1474
+ readonly value: "{font.family.sans}";
1475
+ };
1194
1476
  };
1195
1477
  readonly size: {
1196
1478
  readonly base: {