@funkit/connect 8.3.1-next.0 → 8.4.0

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 (111) hide show
  1. package/CHANGELOG.md +125 -0
  2. package/dist/{chunk-5JRQC2VM.js → chunk-4WY7FNYP.js} +14 -0
  3. package/dist/{chunk-CUWQELX3.js → chunk-UUHLEWAL.js} +4 -2
  4. package/dist/{chunk-VWSYBHAK.js → chunk-Z4QDKBBG.js} +4 -2
  5. package/dist/clients/fanatics.css +4064 -3651
  6. package/dist/clients/fanatics.d.ts +6 -0
  7. package/dist/clients/fanatics.js +118 -43
  8. package/dist/components/Box/Box.d.ts +45 -45
  9. package/dist/components/FunCheckoutHistory/FunDirectExecutionHistoryBottomBar.d.ts +1 -0
  10. package/dist/components/FunCheckoutHistory/FunTxSummarySections.d.ts +7 -0
  11. package/dist/components/FunCheckoutHistory/TotalTimeItem.d.ts +6 -0
  12. package/dist/components/FunCheckoutHistory/YouSendItem.d.ts +6 -0
  13. package/dist/components/FunCheckoutHistory/useCustomStatusAnimationAboveTopbar.d.ts +1 -3
  14. package/dist/components/FunCheckoutModalHeightAnimationWrapper/FunCheckoutModalHeightAnimationWrapper.d.ts +3 -1
  15. package/dist/components/FunInfoBanner/InfoBanner.d.ts +1 -1
  16. package/dist/components/FunPaymentMethodItem/FunPaymentMethodItem.d.ts +1 -0
  17. package/dist/components/FunPayments/FunPaymentMethods.d.ts +7 -0
  18. package/dist/components/Icons/New/CircleBitcoinIcon.d.ts +4 -0
  19. package/dist/components/Icons/New/DollarIcon.d.ts +3 -1
  20. package/dist/components/Tabs/Tabs.d.ts +1 -0
  21. package/dist/consts/customers.d.ts +1 -1
  22. package/dist/consts/layout.d.ts +0 -1
  23. package/dist/css/sprinkles.css.d.ts +91 -45
  24. package/dist/domains/asset.d.ts +1 -1
  25. package/dist/domains/meld.d.ts +0 -6
  26. package/dist/hooks/queries/useFops.d.ts +4 -2
  27. package/dist/hooks/queries/useSwappedDefaultCurrency.d.ts +5 -0
  28. package/dist/hooks/track/CheckoutModalEvent.d.ts +7 -0
  29. package/dist/hooks/useCheckoutDirectExecutionHistory.d.ts +1 -0
  30. package/dist/hooks/useStepQueryReadiness.d.ts +32 -0
  31. package/dist/index.css +4090 -3671
  32. package/dist/index.js +3894 -3058
  33. package/dist/modals/CheckoutModal/ConfirmationStep/useCheckoutConfirmation.d.ts +1 -0
  34. package/dist/modals/CheckoutModal/FunCheckoutStep.d.ts +2 -1
  35. package/dist/modals/CheckoutModal/LoadingAccount.d.ts +1 -1
  36. package/dist/modals/CheckoutModal/MeldQuotes/MeldQuotes.d.ts +1 -1
  37. package/dist/modals/CheckoutModal/SourceChange/CryptoCashToggle.d.ts +5 -1
  38. package/dist/modals/CheckoutModal/SourceChange/FormOfPaymentsList.d.ts +10 -0
  39. package/dist/modals/CheckoutModal/SourceChange/SourceChange.d.ts +10 -0
  40. package/dist/modals/CheckoutModal/SourceChange/SourceChangeLoading.d.ts +4 -0
  41. package/dist/modals/CheckoutModal/SourceChange/{DefaultSourceList.d.ts → SourceList.d.ts} +3 -3
  42. package/dist/modals/CheckoutModal/SourceChange/sourceChange.css.d.ts +2 -1
  43. package/dist/modals/CheckoutModal/stepTransition.d.ts +7 -0
  44. package/dist/providers/FunkitCheckoutContext/index.d.ts +1 -0
  45. package/dist/providers/FunkitConfigContext.d.ts +14 -0
  46. package/dist/providers/FunkitProvider.d.ts +1 -0
  47. package/dist/providers/FunkitThemeProvider.d.ts +69 -0
  48. package/dist/themes/baseTheme.js +1 -1
  49. package/dist/themes/darkTheme.js +2 -2
  50. package/dist/themes/lightTheme.js +2 -2
  51. package/dist/utils/across.d.ts +5 -0
  52. package/dist/utils/depositCutoff.d.ts +9 -0
  53. package/dist/utils/directExecution.d.ts +16 -0
  54. package/dist/utils/flags/config.d.ts +2 -2
  55. package/dist/utils/lighter.d.ts +1 -1
  56. package/dist/utils/sanitizeHtml.d.ts +7 -0
  57. package/dist/utils/sanitizeUrl.d.ts +10 -0
  58. package/dist/utils/tokenIconUrl.d.ts +1 -1
  59. package/dist/utils/transfer.d.ts +2 -1
  60. package/dist/wallets/walletConnectors/index.js +24 -24
  61. package/package.json +4 -4
  62. package/dist/atoms/activeCheckout.d.ts +0 -183
  63. package/dist/atoms/activeWithdrawal.d.ts +0 -21
  64. package/dist/atoms/bridgeProviders/acrossAdapter.d.ts +0 -109
  65. package/dist/atoms/bridgeProviders/index.d.ts +0 -25
  66. package/dist/atoms/bridgeProviders/registry.d.ts +0 -12
  67. package/dist/atoms/bridgeProviders/relayAdapter.d.ts +0 -60
  68. package/dist/atoms/bridgeProviders/types.d.ts +0 -182
  69. package/dist/atoms/checkoutProgress.d.ts +0 -22
  70. package/dist/atoms/directExecution.d.ts +0 -70
  71. package/dist/atoms/funkitCheckout.d.ts +0 -18
  72. package/dist/atoms/funkitProvider/index.d.ts +0 -24
  73. package/dist/atoms/generalWallet.d.ts +0 -45
  74. package/dist/atoms/i18n.d.ts +0 -6
  75. package/dist/atoms/modalState.d.ts +0 -30
  76. package/dist/atoms/quote.d.ts +0 -98
  77. package/dist/atoms/stepTransition.d.ts +0 -6
  78. package/dist/atoms/store.d.ts +0 -1
  79. package/dist/atoms/track/index.d.ts +0 -10
  80. package/dist/atoms/utils.d.ts +0 -2
  81. package/dist/atoms/wagmi.d.ts +0 -4
  82. package/dist/atoms/walletClient.d.ts +0 -15391
  83. package/dist/chunk-A24XIU2M.js +0 -299
  84. package/dist/chunk-CMS4F5PL.js +0 -209
  85. package/dist/chunk-FBCU3TQA.js +0 -204
  86. package/dist/chunk-GRQP5R23.js +0 -209
  87. package/dist/chunk-MGQZMUZ2.js +0 -288
  88. package/dist/chunk-OTMBU2BL.js +0 -204
  89. package/dist/domains/across.d.ts +0 -29
  90. package/dist/domains/track.d.ts +0 -14
  91. package/dist/hooks/useUsableWalletAssetsForCheckout.d.ts +0 -2
  92. package/dist/modals/CheckoutModal/SelectAsset.d.ts +0 -14
  93. package/dist/modals/CheckoutModal/SourceChange/FanaticsSourceList.d.ts +0 -15
  94. package/dist/wallets/walletConnectors/chunk-3ZWIUCOI.js +0 -96
  95. package/dist/wallets/walletConnectors/chunk-4SC3PZVM.js +0 -70
  96. package/dist/wallets/walletConnectors/chunk-5AV2NSL3.js +0 -98
  97. package/dist/wallets/walletConnectors/chunk-5FWURLPF.js +0 -218
  98. package/dist/wallets/walletConnectors/chunk-6677RKVT.js +0 -69
  99. package/dist/wallets/walletConnectors/chunk-75A4Q5E5.js +0 -92
  100. package/dist/wallets/walletConnectors/chunk-ENLR4LXN.js +0 -94
  101. package/dist/wallets/walletConnectors/chunk-FT5BX7TL.js +0 -103
  102. package/dist/wallets/walletConnectors/chunk-GEMN6DM5.js +0 -106
  103. package/dist/wallets/walletConnectors/chunk-GXTI2PZD.js +0 -100
  104. package/dist/wallets/walletConnectors/chunk-LGT6IAXI.js +0 -93
  105. package/dist/wallets/walletConnectors/chunk-N7475PGA.js +0 -110
  106. package/dist/wallets/walletConnectors/chunk-O6YFVGVQ.js +0 -99
  107. package/dist/wallets/walletConnectors/chunk-OCM5YHT5.js +0 -92
  108. package/dist/wallets/walletConnectors/chunk-PRGCIJ7Y.js +0 -87
  109. package/dist/wallets/walletConnectors/chunk-RNIMZDHW.js +0 -95
  110. package/dist/wallets/walletConnectors/chunk-TLOROKED.js +0 -96
  111. package/dist/wallets/walletConnectors/chunk-WNQ3NPHX.js +0 -66
@@ -1,299 +0,0 @@
1
- "use client";
2
-
3
- // src/themes/baseTheme.ts
4
- var systemFontStack = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
5
- var fontStacks = {
6
- rounded: `SFRounded, ui-rounded, "SF Pro Rounded", ${systemFontStack}`,
7
- system: systemFontStack,
8
- fun: `SF Pro, ${systemFontStack}`
9
- };
10
- var radiusScales = {
11
- large: {
12
- actionButton: "12px",
13
- actionButtonInner: "10px",
14
- connectButton: "12px",
15
- modal: "24px",
16
- modalMobile: "28px",
17
- modalActionButton: "24px",
18
- modalActionButtonMobile: "28px",
19
- summaryBox: "12px",
20
- youPayYouReceive: "24px",
21
- inputAmountSwitcher: "24px",
22
- qrCode: "12px",
23
- tooltip: "4px",
24
- skeleton: "4px",
25
- dropdown: "12px",
26
- dropdownItem: "4px",
27
- modalTopbarIcon: "9999px"
28
- },
29
- medium: {
30
- actionButton: "10px",
31
- actionButtonInner: "8px",
32
- connectButton: "10px",
33
- modal: "16px",
34
- modalMobile: "18px",
35
- modalActionButton: "16px",
36
- modalActionButtonMobile: "18px",
37
- summaryBox: "10px",
38
- youPayYouReceive: "24px",
39
- inputAmountSwitcher: "24px",
40
- qrCode: "10px",
41
- tooltip: "4px",
42
- skeleton: "4px",
43
- dropdown: "10px",
44
- dropdownItem: "4px",
45
- modalTopbarIcon: "9999px"
46
- },
47
- none: {
48
- actionButton: "0px",
49
- actionButtonInner: "0px",
50
- connectButton: "0px",
51
- modal: "0px",
52
- modalMobile: "0px",
53
- modalActionButton: "0px",
54
- modalActionButtonMobile: "0px",
55
- summaryBox: "0px",
56
- youPayYouReceive: "0px",
57
- inputAmountSwitcher: "0px",
58
- qrCode: "0px",
59
- tooltip: "0px",
60
- skeleton: "0px",
61
- dropdown: "0px",
62
- dropdownItem: "0px",
63
- modalTopbarIcon: "0px"
64
- },
65
- small: {
66
- actionButton: "8px",
67
- actionButtonInner: "6px",
68
- connectButton: "8px",
69
- modal: "8px",
70
- modalMobile: "8px",
71
- modalActionButton: "8px",
72
- modalActionButtonMobile: "8px",
73
- summaryBox: "8px",
74
- youPayYouReceive: "24px",
75
- inputAmountSwitcher: "24px",
76
- qrCode: "8px",
77
- tooltip: "4px",
78
- skeleton: "4px",
79
- dropdown: "8px",
80
- dropdownItem: "4px",
81
- modalTopbarIcon: "9999px"
82
- }
83
- };
84
- var blurs = {
85
- large: {
86
- modalOverlay: "blur(20px)"
87
- },
88
- none: {
89
- modalOverlay: "blur(0px)"
90
- },
91
- small: {
92
- modalOverlay: "blur(8px)"
93
- },
94
- tiny: {
95
- modalOverlay: "blur(4px)"
96
- }
97
- };
98
- var DEFAULT_FONT_WEIGHTS = {
99
- regular: "400",
100
- medium: "500",
101
- // 510 in figma, but chrome no longer supports 510 - lowered to 500
102
- semibold: "600",
103
- // 590 in figma, but chrome no longer supports 590 - raised to 600
104
- bold: "700",
105
- heavy: "800"
106
- };
107
- var DEFAULT_FONT_SIZES = {
108
- "10": { fontSize: "10px", lineHeight: "15px" },
109
- "12": { fontSize: "12px", lineHeight: "14px" },
110
- "13": { fontSize: "13px", lineHeight: "18px" },
111
- "14": { fontSize: "14px", lineHeight: "18px" },
112
- "16": { fontSize: "16px", lineHeight: "20px" },
113
- "18": { fontSize: "18px", lineHeight: "24px" },
114
- "20": { fontSize: "20px", lineHeight: "20px" },
115
- "21": { fontSize: "21px", lineHeight: "21px" },
116
- "40": { fontSize: "40px", lineHeight: "48px" },
117
- "57": { fontSize: "57px", lineHeight: "68px" }
118
- };
119
- var FONT_SIZINGS = {
120
- regular: DEFAULT_FONT_SIZES,
121
- small: {
122
- "8": { fontSize: "8px", lineHeight: "16px" },
123
- "10": { fontSize: "8px", lineHeight: "16px" },
124
- "12": { fontSize: "10px", lineHeight: "16px" },
125
- "13": { fontSize: "10px", lineHeight: "16px" },
126
- "14": { fontSize: "12px", lineHeight: "16px" },
127
- "16": { fontSize: "14px", lineHeight: "18px" },
128
- "18": { fontSize: "14px", lineHeight: "20px" },
129
- "20": { fontSize: "18px", lineHeight: "20px" },
130
- "21": { fontSize: "19px", lineHeight: "19px" },
131
- "23": { fontSize: "20px", lineHeight: "28px" },
132
- "40": { fontSize: "34px", lineHeight: "40px" },
133
- "57": { fontSize: "50px", lineHeight: "60px" }
134
- }
135
- };
136
- var baseTheme = ({
137
- borderRadius = "large",
138
- fontStack = "fun",
139
- fontSizing = "regular",
140
- customFontFamily,
141
- customFontWeights = DEFAULT_FONT_WEIGHTS,
142
- customFontSizings = FONT_SIZINGS[fontSizing],
143
- customBorderWidths,
144
- customBorderRadiuses = radiusScales[borderRadius],
145
- customDimensions,
146
- customSpacings,
147
- customTextTransforms,
148
- overlayBlur = "small"
149
- }) => ({
150
- blurs: {
151
- modalOverlay: blurs[overlayBlur].modalOverlay
152
- },
153
- dimensions: {
154
- connectExchangeIconSize: "48px",
155
- dollarValueSkeletonHeight: "60px",
156
- dollarValueSkeletonWidth: "160px",
157
- inputAmountQuickOptionButtonHeight: "36px",
158
- inputAmountMinHeight: "76px",
159
- modalBottomBarButtonHeight: "34px",
160
- modalTopBarHeight: "56px",
161
- paymentAmountSkeletonBlockHeight: "10px",
162
- paymentAmountSkeletonBlockWidth: "93px",
163
- paymentAmountSkeletonCircleSize: "15px",
164
- selectAssetItemIconSize: "24px",
165
- txBreakdownSkeletonWidth: "72px",
166
- txSummaryLineSkeletonHeight: "14px",
167
- txSummaryLineSkeletonWidth: "54px",
168
- ...customDimensions,
169
- modalBottomBarCloseButtonHeight: customDimensions?.modalBottomBarCloseButtonHeight ?? customDimensions?.modalBottomBarButtonHeight ?? "34px"
170
- },
171
- fonts: typeof customFontFamily === "string" ? {
172
- amountValue: customFontFamily,
173
- body: customFontFamily,
174
- buttonTextPrimary: customFontFamily,
175
- buttonTextSecondary: customFontFamily,
176
- buttonTextTertiary: customFontFamily,
177
- header: customFontFamily,
178
- inputAmount: customFontFamily,
179
- txStatusDescription: customFontFamily,
180
- txStatusTitle: customFontFamily
181
- } : {
182
- amountValue: fontStacks[fontStack],
183
- body: fontStacks[fontStack],
184
- buttonTextPrimary: fontStacks[fontStack],
185
- buttonTextSecondary: fontStacks[fontStack],
186
- buttonTextTertiary: fontStacks[fontStack],
187
- header: fontStacks[fontStack],
188
- inputAmount: fontStacks[fontStack],
189
- txStatusDescription: fontStacks[fontStack],
190
- txStatusTitle: fontStacks[fontStack],
191
- ...customFontFamily
192
- },
193
- fontWeight: {
194
- ...DEFAULT_FONT_WEIGHTS,
195
- inputAmount: DEFAULT_FONT_WEIGHTS.medium,
196
- modalTopbarTitle: DEFAULT_FONT_WEIGHTS.medium,
197
- modalBottomBarButtonText: DEFAULT_FONT_WEIGHTS.medium,
198
- paymentMethodItemSubtitle: DEFAULT_FONT_WEIGHTS.regular,
199
- paymentMethodItemTitle: DEFAULT_FONT_WEIGHTS.medium,
200
- selectAssetItemSubtitle: DEFAULT_FONT_WEIGHTS.regular,
201
- selectAssetItemTitle: DEFAULT_FONT_WEIGHTS.medium,
202
- transferTokenLabelFontWeight: DEFAULT_FONT_WEIGHTS.medium,
203
- txBreakdown: DEFAULT_FONT_WEIGHTS.regular,
204
- txStatusDescription: DEFAULT_FONT_WEIGHTS.regular,
205
- txStatusTitle: DEFAULT_FONT_WEIGHTS.medium,
206
- txSummaryLabel: DEFAULT_FONT_WEIGHTS.medium,
207
- txSummaryValue: DEFAULT_FONT_WEIGHTS.medium,
208
- ...customFontWeights
209
- },
210
- fontSize: {
211
- ...FONT_SIZINGS[fontSizing],
212
- body: FONT_SIZINGS[fontSizing][14],
213
- "header-14": { fontSize: "14px", lineHeight: "14px" },
214
- "header-36": { fontSize: "36px", lineHeight: "36px" },
215
- buttonTextPrimary: FONT_SIZINGS[fontSizing][12],
216
- buttonTextSecondary: FONT_SIZINGS[fontSizing][10],
217
- buttonTextTertiary: FONT_SIZINGS[fontSizing][12],
218
- dollarValue: FONT_SIZINGS[fontSizing][40],
219
- inputAmount: FONT_SIZINGS[fontSizing][57],
220
- modalTopbarSubtitle: FONT_SIZINGS[fontSizing][10],
221
- modalTopbarTitle: FONT_SIZINGS[fontSizing][13],
222
- modalBottomBarButtonText: FONT_SIZINGS[fontSizing][12],
223
- paymentMethodItemSubtitle: FONT_SIZINGS[fontSizing][12],
224
- paymentMethodItemTitle: FONT_SIZINGS[fontSizing][12],
225
- selectAssetItemSubtitle: FONT_SIZINGS[fontSizing][10],
226
- selectAssetItemTitle: FONT_SIZINGS[fontSizing][13],
227
- txBreakdown: FONT_SIZINGS[fontSizing][12],
228
- txStatusDescription: FONT_SIZINGS[fontSizing][13],
229
- txStatusTitle: FONT_SIZINGS[fontSizing][13],
230
- txSummaryLabel: FONT_SIZINGS[fontSizing][12],
231
- txSummaryValue: FONT_SIZINGS[fontSizing][12],
232
- youPayYouReceivePrimaryFontSize: FONT_SIZINGS[fontSizing][12],
233
- youPayYouReceiveSecondaryFontSize: FONT_SIZINGS[fontSizing][10],
234
- transferTokenLabelFontSize: FONT_SIZINGS[fontSizing][12],
235
- depositAddressFontSize: FONT_SIZINGS[fontSizing][10],
236
- funFeatureListItemFontSize: FONT_SIZINGS[fontSizing][12],
237
- dropdownItemFontSize: FONT_SIZINGS[fontSizing][12],
238
- ...customFontSizings
239
- },
240
- radii: {
241
- actionButton: radiusScales[borderRadius].actionButton,
242
- actionButtonInner: radiusScales[borderRadius].actionButtonInner,
243
- connectButton: radiusScales[borderRadius].connectButton,
244
- menuButton: radiusScales[borderRadius].connectButton,
245
- modal: radiusScales[borderRadius].modal,
246
- modalMobile: radiusScales[borderRadius].modalMobile,
247
- modalActionButton: radiusScales[borderRadius].modalActionButton,
248
- modalActionButtonMobile: radiusScales[borderRadius].modalActionButtonMobile,
249
- summaryBox: radiusScales[borderRadius].summaryBox,
250
- youPayYouReceive: radiusScales[borderRadius].youPayYouReceive,
251
- inputAmountSwitcher: radiusScales[borderRadius].inputAmountSwitcher,
252
- qrCode: radiusScales[borderRadius].qrCode,
253
- skeleton: radiusScales[borderRadius].skeleton,
254
- tooltip: radiusScales[borderRadius].tooltip,
255
- dropdown: radiusScales[borderRadius].dropdown,
256
- dropdownItem: radiusScales[borderRadius].dropdownItem,
257
- modalTopbarIcon: radiusScales[borderRadius].modalTopbarIcon,
258
- ...customBorderRadiuses
259
- },
260
- borderWidths: {
261
- activeOptionBorderWidth: "1px",
262
- buttonTertiaryBorderWidth: "0px",
263
- txSummaryBoxBorderWidth: "1px",
264
- ...customBorderWidths
265
- },
266
- spacing: {
267
- confirmationStepMarginTop: "6px",
268
- confirmationStepVerticalGap: "18px",
269
- modalBaseHorizontalPadding: "6px",
270
- modalBottomHorizontalPadding: "12px",
271
- modalPaddingBottomUpper: "16px",
272
- modalPaddingBottomLower: "16px",
273
- modalTopBarVerticalTextSpacing: "0px",
274
- selectAssetItemPaddingX: "12px",
275
- selectAssetItemPaddingY: "8px",
276
- selectAssetItemTextGap: "0px",
277
- selectBrokerageItemPaddingX: "12px",
278
- selectBrokerageItemPaddingY: "11px",
279
- txBreakdownMarginY: "18px",
280
- txBreakdownPaddingX: "12px",
281
- txSummaryBoxPaddingX: "12px",
282
- txSummaryBoxPaddingY: "12px",
283
- txSummaryLineItemPadding: "0px",
284
- txSummaryDividerMarginX: "12px",
285
- txSummaryDividerMarginY: "12px",
286
- youPayYouReceivePaddingY: "8px",
287
- ...customSpacings
288
- },
289
- textTransforms: {
290
- inputAmountQuickOptionButton: "none",
291
- txStatusTitle: "none",
292
- ...customTextTransforms
293
- }
294
- });
295
-
296
- export {
297
- systemFontStack,
298
- baseTheme
299
- };
@@ -1,209 +0,0 @@
1
- "use client";
2
- import {
3
- baseTheme
4
- } from "./chunk-A24XIU2M.js";
5
-
6
- // src/themes/lightTheme.ts
7
- var accentColors = {
8
- blue: { accentColor: "#31A3F8", accentColorForeground: "#31A3F859" },
9
- green: { accentColor: "#66CC00", accentColorForeground: "#FFF" },
10
- orange: { accentColor: "#F6851B", accentColorForeground: "#FFF" },
11
- pink: { accentColor: "#FF5CA0", accentColorForeground: "#FFF" },
12
- purple: { accentColor: "#5F5AFA", accentColorForeground: "#FFF" },
13
- red: { accentColor: "#F34126", accentColorForeground: "#FFF" },
14
- white: { accentColor: "#000000", accentColorForeground: "#FFF" }
15
- };
16
- var defaultAccentColor = accentColors.white;
17
- var lightTheme = ({
18
- accentColor = defaultAccentColor.accentColor,
19
- accentColorForeground = defaultAccentColor.accentColorForeground,
20
- customColors,
21
- customShadows,
22
- ...baseThemeOptions
23
- } = {}) => ({
24
- ...baseTheme(baseThemeOptions),
25
- colors: {
26
- accentColor,
27
- accentColorForeground,
28
- actionButtonBorder: "rgba(0, 0, 0, 0.04)",
29
- connectButtonBackground: "#FFF",
30
- connectButtonBackgroundError: "#C60000",
31
- connectButtonText: "#25292E",
32
- connectButtonTextError: "#FFF",
33
- connectionIndicator: "#30E000",
34
- error: accentColors.red.accentColor,
35
- errorBackground: "#F2E6E4",
36
- errorBorder: "rgba(243, 65, 38, 0.2)",
37
- generalBorder: "#F7F7F7",
38
- // strokeColor in figma
39
- generalBorderDim: "rgba(0, 0, 0, 0.03)",
40
- menuItemBackground: "#FCFCFC",
41
- selectedOptionBorder: "#F7F7F7",
42
- focusedOptionBorder: "#737373",
43
- standby: "#F6851B",
44
- success: "#66CC00",
45
- delayedStatusIcon: customColors?.secondaryText ?? "#737373",
46
- // backward compatibility
47
- chainIconBorder: "#fff",
48
- // FUNKIT COLORS
49
- // modal backgrounds
50
- modalBackdrop: "rgba(0, 0, 0, 0.2)",
51
- modalTopbarIcon: "#000",
52
- modalTopbarIconBackground: customColors?.modalTopbarIconBackground ?? "transparent",
53
- modalTopbarIconBackgroundHover: customColors?.modalTopbarIconBackgroundHover ?? customColors?.buttonIconBackgroundHover ?? "#F7F7F7",
54
- modalTopbarIconBackgroundPressed: customColors?.modalTopbarIconBackgroundPressed ?? customColors?.buttonIconBackgroundPressed ?? "#F0F0F0",
55
- modalTopbarIconStroke: customColors?.modalTopbarIconStroke ?? customColors?.buttonIconStroke ?? "rgba(0, 0, 0, 0.35)",
56
- modalBackground: "#FFF",
57
- modalBorder: "#F7F7F7",
58
- offBackground: "#F7F7F7",
59
- offBackgroundInverse: "#333333",
60
- hoverState: "#F0F0F0",
61
- lightStroke: "#F7F7F7",
62
- mediumStroke: "#F0F0F0",
63
- heavyStroke: "#E5E5E5",
64
- strokeColor: "#E8E8E8",
65
- //Text
66
- primaryText: "#000",
67
- secondaryText: "#737373",
68
- tertiaryText: "rgba(0, 0, 0, 0.35)",
69
- textSelection: "rgba(0, 0, 0, 0.10)",
70
- // input
71
- inputBackground: "#FFFFFF",
72
- inputBorderBase: "#F0F0F0",
73
- inputBorderHover: "#E5E5E5",
74
- // tab
75
- activeTabBorderColor: "#F7F7F7",
76
- activeTabBackground: "#F7F7F7",
77
- // button
78
- actionColor: "#000",
79
- actionColorHover: "rgba(0, 0, 0, 0.7)",
80
- actionColorDisabled: "rgba(0, 0, 0, 0.50)",
81
- buttonPrimary: accentColor,
82
- buttonDisabled: "#31A3F826",
83
- buttonWarning: accentColors.red.accentColor,
84
- buttonSuccess: "#2EA200",
85
- buttonTextPrimary: "#FFFFFF",
86
- buttonTextHover: "#FFF",
87
- buttonTextDisabled: "#FFF",
88
- transparent: "transparent",
89
- buttonBackgroundTertiary: "#F7F7F7",
90
- buttonBackgroundHoverTertiary: "#F0F0F0",
91
- buttonBackgroundDisabledTertiary: "transparent",
92
- buttonTextTertiary: "#000",
93
- buttonTextDisabledTertiary: "rgba(0, 0, 0, 0.5)",
94
- buttonBackground: "#000",
95
- buttonBackgroundHover: "#333333",
96
- buttonBackgroundPressed: "#000",
97
- buttonBackgroundDisabled: "rgba(0, 0, 0, 0.5)",
98
- buttonTextSecondaryDisabled: "rgba(0, 0, 0, 0.5)",
99
- buttonTextSecondary: "#000000",
100
- buttonIconBackgroundHover: "#F7F7F7",
101
- buttonIconBackgroundPressed: "#F0F0F0",
102
- buttonIconStroke: "rgba(0, 0, 0, 0.35)",
103
- buttonBorderTertiary: "transparent",
104
- buttonBorderFocusedTertiary: "rgba(0, 0, 0, 0.35)",
105
- buttonFocusedOutline: "none",
106
- buttonBorderGradient: "none",
107
- buttonHoverBorderGradient: "none",
108
- buttonDisabledBorderGradient: "none",
109
- // TODO: Make common colors when refactoring the design system
110
- inputAmountQuickOptionBaseBackground: "#F7F7F7",
111
- inputAmountQuickOptionHoverBackground: "#F0F0F0",
112
- inputAmountQuickOptionActiveBackground: "#F0F0F0",
113
- inputAmountQuickOptionDisabledBackground: "#F7F7F7",
114
- inputAmountQuickOptionBaseBorder: "#F7F7F7",
115
- inputAmountQuickOptionHoverBorder: "rgba(0, 0, 0, 0.35)",
116
- inputAmountQuickOptionActiveBorder: "rgba(0, 0, 0, 0.35)",
117
- inputAmountQuickOptionFocusedBorder: "rgba(0, 0, 0, 0.35)",
118
- inputAmountFiatDecimalsColor: customColors?.inputAmountFiatDecimalsColor ?? "none",
119
- youPayYouReceiveBackground: "#FFF",
120
- // modalBackground
121
- youPayYouReceiveBorder: "#F0F0F0",
122
- // mediumStroke
123
- youPayYouReceivePrimaryText: "#000",
124
- // primaryText
125
- youPayYouReceiveSecondaryText: "#737373",
126
- // secondaryText
127
- // badges
128
- badgeBackgroundSuccess: "rgba(124, 242, 136, 0.1)",
129
- badgeBorderSuccess: "rgba(124, 242, 136, 0.2)",
130
- badgeTextSuccess: "rgb(124, 242, 136)",
131
- newBadgeBackground: "linear-gradient(180deg, #ECFFEA 0%, #E4FFE9 100%)",
132
- newBadgeBorder: "rgba(122, 221, 122, 0.5)",
133
- newBadgeText: "#028320",
134
- approvedBadgeBackground: "linear-gradient(180deg, #ECFFEA 0%, #E4FFE9 100%)",
135
- approvedBadgeBorder: "rgba(109, 216, 109, 0.5)",
136
- approvedBadgeText: "#028320",
137
- failedBadgeBackground: "rgba(255, 61, 61, 0.08)",
138
- failedBadgeBorder: "rgba(0, 0, 0, 0.03)",
139
- failedBadgeText: "#C2341E",
140
- announceGradientFrom: "#595959",
141
- announceGradientTo: "#9C9C9C",
142
- fiatPendingGradientFrom: "#454545",
143
- fiatPendingGradientTo: "#747474",
144
- fiatSuccessBackgroundFill: "rgba(102, 204, 0, 0.16)",
145
- fiatFailedBackgroundFill: "rgba(255, 61, 61, 0.12)",
146
- fiatStatusIconBorder: "rgba(0, 0, 0, 0.03)",
147
- fiatAccountIconFill: "#E7F3FE",
148
- fiatAccountGradientFrom: "#055DF5",
149
- fiatAccountGradientTo: "#4C8DFD",
150
- modalHeaderDivider: "#F7F7F7",
151
- // lightStroke
152
- modalFooterDivider: "#F7F7F7",
153
- // lightStroke
154
- spinnerBackground: customColors?.mediumStroke ?? "rgba(255, 255, 255, 0.3)",
155
- // 30% buttonTextPrimary
156
- spinnerIndicator: customColors?.primaryText ?? "#FFF",
157
- // 100% buttonTextPrimary
158
- spinnerBackgroundVerifyAccount: "rgba(255, 255, 255, 0.3)",
159
- // 30% buttonTextPrimary
160
- spinnerIndicatorVerifyAccount: customColors?.primaryText ?? "#FFF",
161
- // 100% buttonTextPrimary
162
- // Override colors
163
- ...customColors || {},
164
- // option Boxes
165
- optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#FFF",
166
- // keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
167
- optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
168
- dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#FFF",
169
- dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#F7F7F7",
170
- dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
171
- txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#FFF",
172
- txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#F7F7F7",
173
- counterRingColor: customColors?.counterRingColor ?? accentColor
174
- },
175
- shadows: {
176
- connectButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",
177
- dialog: "0px 8px 32px rgba(0, 0, 0, 0.32)",
178
- selectedOption: "0px 2px 6px rgba(0, 0, 0, 0.24)",
179
- selectedWallet: "0px 2px 6px rgba(0, 0, 0, 0.12)",
180
- dropdown: "0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 6px 0px rgba(0, 0, 0, 0.03), 0px 4px 42px 0px rgba(0, 0, 0, 0.06)",
181
- notification: "0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 2px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 42px 0px rgba(0, 0, 0, 0.06)",
182
- qrCode: "0px 0px 0px 1px rgba(0, 0, 0, 0.10), 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 4px 24px 0px rgba(8, 7, 7, 0.10)",
183
- buttonShadow: "none",
184
- buttonShadowTertiary: customShadows?.buttonShadow ?? "none",
185
- buttonFocusedShadow: "0px 0px 0px 2px rgba(0, 0, 0, 0.25)",
186
- buttonFocusedShadowTertiary: "0px 0px 0px 2px rgba(0, 0, 0, 0.25)",
187
- buttonHoverShadow: "none",
188
- buttonHoverShadowTertiary: "none",
189
- buttonDisabledShadow: "none",
190
- buttonDisabledShadowTertiary: customShadows?.buttonDisabledShadow ?? "none",
191
- buttonInnerShadow: "none",
192
- buttonInnerShadowTertiary: customShadows?.buttonInnerShadow ?? "none",
193
- buttonFocusedInnerShadow: "none",
194
- buttonFocusedInnerShadowTertiary: customShadows?.buttonFocusedInnerShadow ?? "none",
195
- buttonHoverInnerShadow: "none",
196
- buttonHoverInnerShadowTertiary: customShadows?.buttonHoverInnerShadow ?? "none",
197
- buttonDisabledInnerShadow: "none",
198
- buttonDisabledInnerShadowTertiary: customShadows?.buttonDisabledInnerShadow ?? "none",
199
- selectedDropdownItem: "none",
200
- // Override shadows
201
- ...customShadows || {}
202
- },
203
- moonpayTheme: "light"
204
- });
205
- lightTheme.accentColors = accentColors;
206
-
207
- export {
208
- lightTheme
209
- };