import React from 'react'; import type { ThemeVars } from '../css/sprinkles.css'; type ColorScheme = 'light' | 'dark'; export type ThemeColorScheme = ColorScheme | undefined; export type SystemColorScheme = ColorScheme | undefined; export type ThemeSet = { lightTheme: ThemeVars; darkTheme: ThemeVars; }; export type Theme = ThemeVars | ThemeSet; export interface FunkitThemeProps { children: React.ReactNode; theme?: Theme; } export declare const ThemeIdContext: React.Context; export declare const useActiveTheme: () => { activeTheme: { colors: { accentColor: string; accentColorForeground: string; actionButtonBorder: string; connectButtonBackground: string; connectButtonBackgroundError: string; connectButtonText: string; connectButtonTextError: string; connectionIndicator: string; error: string; errorBackground: string; errorBorder: string; generalBorder: string; generalBorderDim: string; menuItemBackground: string; selectedOptionBorder: string; focusedOptionBorder: string; standby: string; success: string; delayedStatusIcon: string; chainIconBorder: string; modalBackdrop: string; modalBackground: string; modalBackgroundCheckoutComplete: string; modalBorder: string; offBackground: string; offBackgroundInverse: string; hoverState: string; lightStroke: string; mediumStroke: string; heavyStroke: string; strokeColor: string; secondaryBackground: string; modalTopbarIcon: string; modalTopbarIconBackground: string; modalTopbarIconBackgroundHover: string; modalTopbarIconBackgroundPressed: string; modalTopbarIconStroke: string; primaryText: string; secondaryText: string; tertiaryText: string; textSelection: string; inputLabel: string; inputBackground: string; inputBackgroundHover: string; inputBorderBase: string; inputBorderHover: string; activeTabBorderColor: string; activeTabBackground: string; inactiveTabBorderColor: string; inactiveTabBackgroundBase: string; inactiveTabBackgroundHover: string; inactiveTabBackgroundActive: string; activeTabText: string; inactiveTabTextBase: string; inactiveTabHover: string; actionColor: string; actionColorHover: string; actionColorDisabled: string; buttonPrimary: string; buttonDisabled: string; buttonWarning: string; buttonSuccess: string; buttonTextPrimary: string; buttonTextHover: string; buttonTextDisabled: string; transparent: string; buttonBackgroundTertiary: string; buttonBackgroundHoverTertiary: string; buttonBackgroundDisabledTertiary: string; buttonTextTertiary: string; buttonTextDisabledTertiary: string; buttonBackground: string; buttonBackgroundHover: string; buttonBackgroundPressed: string; buttonBackgroundDisabled: string; buttonTextSecondaryDisabled: string; buttonTextSecondary: string; buttonIconBackgroundHover: string; buttonIconBackgroundPressed: string; buttonIconStroke: string; buttonBorderTertiary: string; buttonBorderFocusedTertiary: string; buttonFocusedOutline: string; buttonBorderGradient: string; buttonHoverBorderGradient: string; buttonDisabledBorderGradient: string; badgeBackgroundSuccess: string; badgeBorderSuccess: string; badgeTextSuccess: string; newBadgeBackground: string; newBadgeBorder: string; newBadgeText: string; approvedBadgeBackground: string; approvedBadgeBorder: string; approvedBadgeText: string; failedBadgeBackground: string; failedBadgeBorder: string; failedBadgeText: string; inputAmountQuickOptionBaseBackground: string; inputAmountQuickOptionHoverBackground: string; inputAmountQuickOptionActiveBackground: string; inputAmountQuickOptionDisabledBackground: string; inputAmountQuickOptionBaseBorder: string; inputAmountQuickOptionHoverBorder: string; inputAmountQuickOptionActiveBorder: string; inputAmountQuickOptionFocusedBorder: string; inputAmountFiatDecimalsColor: string; youPayYouReceiveBackground: string; youPayYouReceiveBorder: string; youPayYouReceivePrimaryText: string; youPayYouReceiveSecondaryText: string; announceGradientFrom: string; announceGradientTo: string; modalHeaderDivider: string; modalFooterDivider: string; fiatPendingGradientFrom: string; fiatPendingGradientTo: string; fiatSuccessBackgroundFill: string; fiatFailedBackgroundFill: string; fiatStatusIconBorder: string; fiatAccountIconFill: string; fiatAccountGradientFrom: string; fiatAccountGradientTo: string; optionBoxBackground: string; optionBoxBorderedBackground: string; optionBoxBackgroundUninteractive: string; optionBoxBorderBase: string; optionBoxBorderHover: string; optionBoxDefaultModeNotActiveBorderBase: string; optionBoxDefaultModeNotActiveBorderHover: string; openDropdownBackgroundColor: string; dropdownActiveItemBackgroundBase: string; dropdownActiveItemBackgroundHover: string; dropdownActiveItemBackgroundDisabled: string; dropdownActiveItemBorderBase: string; dropdownActiveItemBorderHover: string; dropdownGroupHeader: string; selectedDropdownItemBackground: string; alwaysVisibleLabelBackgroundHover: string; selectedDropdownItemText: string; useConnectedBackgroundBase: string; useConnectedBackgroundHover: string; copyButtonBackgroundBase: string; copyButtonBackgroundHover: string; copyButtonBackgroundActive: string; copyButtonBorderBase: string; copyButtonBorderHover: string; funFeatureListBackgroundBase: string; funFeatureListBackgroundHover: string; funFeatureListBorderColor: string; funFeatureListBorderColorHover: string; spinnerBackground: string; spinnerIndicator: string; spinnerBackgroundVerifyAccount: string; spinnerIndicatorVerifyAccount: string; txSummaryBoxBackground: string; txSummaryBoxBorder: string; counterRingColor: string; cryptoCashToggleContainerBorderColor: string; cryptoCashToggleBackground: string; qrCodeBackground: string; qrCodeForeground: string; withdrawalYouWillReceiveLabel: string; withdrawalYouWillReceiveValueCrypto: string; withdrawalYouWillReceiveValueUsd: string; }; dimensions: { connectExchangeIconSize: string; cryptoCashToggleIconSize: string; dollarValueSkeletonHeight: string; dollarValueSkeletonWidth: string; inputAmountQuickOptionButtonHeight: string; inputAmountMinHeight: string; modalBottomBarButtonHeight: string; modalBottomBarCloseButtonHeight: string; modalTopBarHeight: string; modalTopbarIconSize: string; modalTopbarIconWrapperSize: string; paymentAmountSkeletonBlockHeight: string; paymentAmountSkeletonBlockWidth: string; paymentAmountSkeletonCircleSize: string; paymentMethodItemIconSize: string; selectAssetItemIconSize: string; sourceListGap: string; txBreakdownSkeletonWidth: string; txSummaryLineSkeletonHeight: string; txSummaryLineSkeletonWidth: string; }; fonts: { amountValue: string; body: string; buttonTextPrimary: string; buttonTextSecondary: string; buttonTextTertiary: string; dropdownGroupHeader: string; header: string; inputAmount: string; modalTopbarTitle: string; txStatusDescription: string; txStatusTitle: string; }; fontWeight: { regular: string; medium: string; semibold: string; bold: string; heavy: string; cryptoCashToggle: string; dropdownGroupHeader: string; inputAmount: string; inputLabel: string; inputValue: string; modalTopbarTitle: string; modalBottomBarButtonText: string; paymentMethodItemSubtitle: string; paymentMethodItemTitle: string; selectAssetItemSubtitle: string; selectAssetItemTitle: string; sourceListSectionLabelFontWeight: string; txBreakdown: string; txStatusDescription: string; txStatusTitle: string; txSummaryLabel: string; txSummaryValue: string; formOfPaymentsListSectionLabelFontWeight: string; withdrawalYouWillReceiveLabel: string; withdrawalYouWillReceiveValueCrypto: string; withdrawalYouWillReceiveValueUsd: string; }; fontSize: { '10': { fontSize: string; lineHeight: string; }; '12': { fontSize: string; lineHeight: string; }; '13': { fontSize: string; lineHeight: string; }; '14': { fontSize: string; lineHeight: string; }; '16': { fontSize: string; lineHeight: string; }; '18': { fontSize: string; lineHeight: string; }; '20': { fontSize: string; lineHeight: string; }; '21': { fontSize: string; lineHeight: string; }; '40': { fontSize: string; lineHeight: string; }; '57': { fontSize: string; lineHeight: string; }; body: { fontSize: string; lineHeight: string; }; cryptoCashToggle: { fontSize: string; lineHeight: string; }; 'header-14': { fontSize: string; lineHeight: string; }; 'header-36': { fontSize: string; lineHeight: string; }; buttonTextPrimary: { fontSize: string; lineHeight: string; }; buttonTextSecondary: { fontSize: string; lineHeight: string; }; buttonTextTertiary: { fontSize: string; lineHeight: string; }; dollarValue: { fontSize: string; lineHeight: string; }; dropdownGroupHeader: { fontSize: string; lineHeight: string; }; inputAmount: { fontSize: string; lineHeight: string; }; inputLabel: { fontSize: string; lineHeight: string; }; inputValue: { fontSize: string; lineHeight: string; }; modalTopbarSubtitle: { fontSize: string; lineHeight: string; }; modalTopbarTitle: { fontSize: string; lineHeight: string; }; modalBottomBarButtonText: { fontSize: string; lineHeight: string; }; paymentMethodItemSubtitle: { fontSize: string; lineHeight: string; }; paymentMethodItemTitle: { fontSize: string; lineHeight: string; }; selectAssetItemSubtitle: { fontSize: string; lineHeight: string; }; selectAssetItemTitle: { fontSize: string; lineHeight: string; }; txBreakdown: { fontSize: string; lineHeight: string; }; txStatusDescription: { fontSize: string; lineHeight: string; }; txStatusTitle: { fontSize: string; lineHeight: string; }; txSummaryLabel: { fontSize: string; lineHeight: string; }; txSummaryValue: { fontSize: string; lineHeight: string; }; withdrawalYouWillReceive: { fontSize: string; lineHeight: string; }; youPayYouReceivePrimaryFontSize: { fontSize: string; lineHeight: string; }; youPayYouReceiveSecondaryFontSize: { fontSize: string; lineHeight: string; }; depositAddressFontSize: { fontSize: string; lineHeight: string; }; funFeatureListItemFontSize: { fontSize: string; lineHeight: string; }; dropdownItemFontSize: { fontSize: string; lineHeight: string; }; sourceListSectionLabelFontSize: { fontSize: string; lineHeight: string; }; formOfPaymentsListSectionLabelFontSize: { fontSize: string; lineHeight: string; }; quickOptionFontSize: { fontSize: string; lineHeight: string; }; useConnectedFontSize: { fontSize: string; lineHeight: string; }; paymentFeeSummaryTooltip: { fontSize: string; lineHeight: string; }; tooltipContent: { fontSize: string; lineHeight: string; }; }; radii: { actionButton: string; actionButtonInner: string; connectButton: string; menuButton: string; modal: string; modalMobile: string; modalActionButton: string; modalActionButtonMobile: string; summaryBox: string; youPayYouReceive: string; inputAmountSwitcher: string; qrCode: string; skeleton: string; tooltip: string; dropdown: string; dropdownItem: string; dropdownList: string; modalTopbarIcon: string; withdrawalInput: string; useConnected: string; }; borderWidths: { activeOptionBorderWidth: string; buttonTertiaryBorderWidth: string; cryptoCashToggleContainerBorderWidth: string; cryptoCashToggleActiveTabBorderWidth: string; cryptoCashToggleInactiveTabBorderWidth: string; txSummaryBoxBorderWidth: string; }; shadows: { connectButton: string; dialog: string; selectedOption: string; selectedWallet: string; dropdown: string; notification: string; qrCode: string; buttonShadow: string; buttonShadowTertiary: string; buttonFocusedShadow: string; buttonFocusedShadowTertiary: string; buttonHoverShadow: string; buttonHoverShadowTertiary: string; buttonDisabledShadow: string; buttonDisabledShadowTertiary: string; buttonInnerShadow: string; buttonInnerShadowTertiary: string; buttonFocusedInnerShadow: string; buttonFocusedInnerShadowTertiary: string; buttonHoverInnerShadow: string; buttonHoverInnerShadowTertiary: string; buttonDisabledInnerShadow: string; buttonDisabledInnerShadowTertiary: string; selectedDropdownItem: string; }; spacing: { confirmationStepMarginTop: string; confirmationStepVerticalGap: string; cryptoCashToggleContainerPadding: string; cryptoCashToggleMarginBottom: string; cryptoCashToggleMarginTop: string; cryptoCashToggleTabPaddingY: string; dropdownItemIconGap: string; dropdownItemPaddingX: string; dropdownItemPaddingY: string; dropdownCompactPaddingX: string; dropdownCompactPaddingY: string; dropdownPaddingX: string; dropdownPaddingY: string; modalBaseHorizontalPadding: string; modalBottomBarButtonPaddingY: string; modalBottomHorizontalPadding: string; modalPaddingBottomUpper: string; modalPaddingBottomLower: string; modalTopBarVerticalTextSpacing: string; selectAssetItemPaddingX: string; selectAssetItemPaddingY: string; selectAssetItemTextGap: string; selectBrokerageItemPaddingX: string; selectBrokerageItemPaddingY: string; selectBrokerageListGap: string; walletConnectorListGap: string; txBreakdownMarginY: string; txBreakdownPaddingX: string; txSummaryBoxPaddingX: string; txSummaryBoxPaddingY: string; txSummaryLineItemPadding: string; txSummaryDividerMarginX: string; txSummaryDividerMarginY: string; verticalSectionGap: string; withdrawalModalPaddingTop: string; youPayYouReceivePaddingLeft: string; youPayYouReceivePaddingRight: string; youPayYouReceivePaddingY: string; inputPaddingX: string; inputPaddingY: string; dropdownActiveItemRegularSizePaddingY: string; assetListDefaultGap: string; dropdownGroupDividerMarginY: string; }; textTransforms: { inputAmountQuickOptionButton: string; txStatusTitle: string; }; blurs: { modalOverlay: string; }; opacities: { buttonPrimaryDisabled: string; }; moonpayTheme: string; modalZIndex: string; }; /** Overrides the currently active `theme` with disregard to the `theme` provided to the `FunkitProvider`, ie. `toggleTheme` will switch to the `theme` provided to the `FunkitProvider`, not the theme set by `setTheme` */ setTheme: (theme: ThemeVars) => void; /** Returns the `light` theme as long as a themeSet was passed to the `FunkitProvider`, if only a single theme object was passed it will be returned as `lightTheme` and `darkTheme` making them the same */ lightTheme: { colors: { accentColor: string; accentColorForeground: string; actionButtonBorder: string; connectButtonBackground: string; connectButtonBackgroundError: string; connectButtonText: string; connectButtonTextError: string; connectionIndicator: string; error: string; errorBackground: string; errorBorder: string; generalBorder: string; generalBorderDim: string; menuItemBackground: string; selectedOptionBorder: string; focusedOptionBorder: string; standby: string; success: string; delayedStatusIcon: string; chainIconBorder: string; modalBackdrop: string; modalBackground: string; modalBackgroundCheckoutComplete: string; modalBorder: string; offBackground: string; offBackgroundInverse: string; hoverState: string; lightStroke: string; mediumStroke: string; heavyStroke: string; strokeColor: string; secondaryBackground: string; modalTopbarIcon: string; modalTopbarIconBackground: string; modalTopbarIconBackgroundHover: string; modalTopbarIconBackgroundPressed: string; modalTopbarIconStroke: string; primaryText: string; secondaryText: string; tertiaryText: string; textSelection: string; inputLabel: string; inputBackground: string; inputBackgroundHover: string; inputBorderBase: string; inputBorderHover: string; activeTabBorderColor: string; activeTabBackground: string; inactiveTabBorderColor: string; inactiveTabBackgroundBase: string; inactiveTabBackgroundHover: string; inactiveTabBackgroundActive: string; activeTabText: string; inactiveTabTextBase: string; inactiveTabHover: string; actionColor: string; actionColorHover: string; actionColorDisabled: string; buttonPrimary: string; buttonDisabled: string; buttonWarning: string; buttonSuccess: string; buttonTextPrimary: string; buttonTextHover: string; buttonTextDisabled: string; transparent: string; buttonBackgroundTertiary: string; buttonBackgroundHoverTertiary: string; buttonBackgroundDisabledTertiary: string; buttonTextTertiary: string; buttonTextDisabledTertiary: string; buttonBackground: string; buttonBackgroundHover: string; buttonBackgroundPressed: string; buttonBackgroundDisabled: string; buttonTextSecondaryDisabled: string; buttonTextSecondary: string; buttonIconBackgroundHover: string; buttonIconBackgroundPressed: string; buttonIconStroke: string; buttonBorderTertiary: string; buttonBorderFocusedTertiary: string; buttonFocusedOutline: string; buttonBorderGradient: string; buttonHoverBorderGradient: string; buttonDisabledBorderGradient: string; badgeBackgroundSuccess: string; badgeBorderSuccess: string; badgeTextSuccess: string; newBadgeBackground: string; newBadgeBorder: string; newBadgeText: string; approvedBadgeBackground: string; approvedBadgeBorder: string; approvedBadgeText: string; failedBadgeBackground: string; failedBadgeBorder: string; failedBadgeText: string; inputAmountQuickOptionBaseBackground: string; inputAmountQuickOptionHoverBackground: string; inputAmountQuickOptionActiveBackground: string; inputAmountQuickOptionDisabledBackground: string; inputAmountQuickOptionBaseBorder: string; inputAmountQuickOptionHoverBorder: string; inputAmountQuickOptionActiveBorder: string; inputAmountQuickOptionFocusedBorder: string; inputAmountFiatDecimalsColor: string; youPayYouReceiveBackground: string; youPayYouReceiveBorder: string; youPayYouReceivePrimaryText: string; youPayYouReceiveSecondaryText: string; announceGradientFrom: string; announceGradientTo: string; modalHeaderDivider: string; modalFooterDivider: string; fiatPendingGradientFrom: string; fiatPendingGradientTo: string; fiatSuccessBackgroundFill: string; fiatFailedBackgroundFill: string; fiatStatusIconBorder: string; fiatAccountIconFill: string; fiatAccountGradientFrom: string; fiatAccountGradientTo: string; optionBoxBackground: string; optionBoxBorderedBackground: string; optionBoxBackgroundUninteractive: string; optionBoxBorderBase: string; optionBoxBorderHover: string; optionBoxDefaultModeNotActiveBorderBase: string; optionBoxDefaultModeNotActiveBorderHover: string; openDropdownBackgroundColor: string; dropdownActiveItemBackgroundBase: string; dropdownActiveItemBackgroundHover: string; dropdownActiveItemBackgroundDisabled: string; dropdownActiveItemBorderBase: string; dropdownActiveItemBorderHover: string; dropdownGroupHeader: string; selectedDropdownItemBackground: string; alwaysVisibleLabelBackgroundHover: string; selectedDropdownItemText: string; useConnectedBackgroundBase: string; useConnectedBackgroundHover: string; copyButtonBackgroundBase: string; copyButtonBackgroundHover: string; copyButtonBackgroundActive: string; copyButtonBorderBase: string; copyButtonBorderHover: string; funFeatureListBackgroundBase: string; funFeatureListBackgroundHover: string; funFeatureListBorderColor: string; funFeatureListBorderColorHover: string; spinnerBackground: string; spinnerIndicator: string; spinnerBackgroundVerifyAccount: string; spinnerIndicatorVerifyAccount: string; txSummaryBoxBackground: string; txSummaryBoxBorder: string; counterRingColor: string; cryptoCashToggleContainerBorderColor: string; cryptoCashToggleBackground: string; qrCodeBackground: string; qrCodeForeground: string; withdrawalYouWillReceiveLabel: string; withdrawalYouWillReceiveValueCrypto: string; withdrawalYouWillReceiveValueUsd: string; }; dimensions: { connectExchangeIconSize: string; cryptoCashToggleIconSize: string; dollarValueSkeletonHeight: string; dollarValueSkeletonWidth: string; inputAmountQuickOptionButtonHeight: string; inputAmountMinHeight: string; modalBottomBarButtonHeight: string; modalBottomBarCloseButtonHeight: string; modalTopBarHeight: string; modalTopbarIconSize: string; modalTopbarIconWrapperSize: string; paymentAmountSkeletonBlockHeight: string; paymentAmountSkeletonBlockWidth: string; paymentAmountSkeletonCircleSize: string; paymentMethodItemIconSize: string; selectAssetItemIconSize: string; sourceListGap: string; txBreakdownSkeletonWidth: string; txSummaryLineSkeletonHeight: string; txSummaryLineSkeletonWidth: string; }; fonts: { amountValue: string; body: string; buttonTextPrimary: string; buttonTextSecondary: string; buttonTextTertiary: string; dropdownGroupHeader: string; header: string; inputAmount: string; modalTopbarTitle: string; txStatusDescription: string; txStatusTitle: string; }; fontWeight: { regular: string; medium: string; semibold: string; bold: string; heavy: string; cryptoCashToggle: string; dropdownGroupHeader: string; inputAmount: string; inputLabel: string; inputValue: string; modalTopbarTitle: string; modalBottomBarButtonText: string; paymentMethodItemSubtitle: string; paymentMethodItemTitle: string; selectAssetItemSubtitle: string; selectAssetItemTitle: string; sourceListSectionLabelFontWeight: string; txBreakdown: string; txStatusDescription: string; txStatusTitle: string; txSummaryLabel: string; txSummaryValue: string; formOfPaymentsListSectionLabelFontWeight: string; withdrawalYouWillReceiveLabel: string; withdrawalYouWillReceiveValueCrypto: string; withdrawalYouWillReceiveValueUsd: string; }; fontSize: { '10': { fontSize: string; lineHeight: string; }; '12': { fontSize: string; lineHeight: string; }; '13': { fontSize: string; lineHeight: string; }; '14': { fontSize: string; lineHeight: string; }; '16': { fontSize: string; lineHeight: string; }; '18': { fontSize: string; lineHeight: string; }; '20': { fontSize: string; lineHeight: string; }; '21': { fontSize: string; lineHeight: string; }; '40': { fontSize: string; lineHeight: string; }; '57': { fontSize: string; lineHeight: string; }; body: { fontSize: string; lineHeight: string; }; cryptoCashToggle: { fontSize: string; lineHeight: string; }; 'header-14': { fontSize: string; lineHeight: string; }; 'header-36': { fontSize: string; lineHeight: string; }; buttonTextPrimary: { fontSize: string; lineHeight: string; }; buttonTextSecondary: { fontSize: string; lineHeight: string; }; buttonTextTertiary: { fontSize: string; lineHeight: string; }; dollarValue: { fontSize: string; lineHeight: string; }; dropdownGroupHeader: { fontSize: string; lineHeight: string; }; inputAmount: { fontSize: string; lineHeight: string; }; inputLabel: { fontSize: string; lineHeight: string; }; inputValue: { fontSize: string; lineHeight: string; }; modalTopbarSubtitle: { fontSize: string; lineHeight: string; }; modalTopbarTitle: { fontSize: string; lineHeight: string; }; modalBottomBarButtonText: { fontSize: string; lineHeight: string; }; paymentMethodItemSubtitle: { fontSize: string; lineHeight: string; }; paymentMethodItemTitle: { fontSize: string; lineHeight: string; }; selectAssetItemSubtitle: { fontSize: string; lineHeight: string; }; selectAssetItemTitle: { fontSize: string; lineHeight: string; }; txBreakdown: { fontSize: string; lineHeight: string; }; txStatusDescription: { fontSize: string; lineHeight: string; }; txStatusTitle: { fontSize: string; lineHeight: string; }; txSummaryLabel: { fontSize: string; lineHeight: string; }; txSummaryValue: { fontSize: string; lineHeight: string; }; withdrawalYouWillReceive: { fontSize: string; lineHeight: string; }; youPayYouReceivePrimaryFontSize: { fontSize: string; lineHeight: string; }; youPayYouReceiveSecondaryFontSize: { fontSize: string; lineHeight: string; }; depositAddressFontSize: { fontSize: string; lineHeight: string; }; funFeatureListItemFontSize: { fontSize: string; lineHeight: string; }; dropdownItemFontSize: { fontSize: string; lineHeight: string; }; sourceListSectionLabelFontSize: { fontSize: string; lineHeight: string; }; formOfPaymentsListSectionLabelFontSize: { fontSize: string; lineHeight: string; }; quickOptionFontSize: { fontSize: string; lineHeight: string; }; useConnectedFontSize: { fontSize: string; lineHeight: string; }; paymentFeeSummaryTooltip: { fontSize: string; lineHeight: string; }; tooltipContent: { fontSize: string; lineHeight: string; }; }; radii: { actionButton: string; actionButtonInner: string; connectButton: string; menuButton: string; modal: string; modalMobile: string; modalActionButton: string; modalActionButtonMobile: string; summaryBox: string; youPayYouReceive: string; inputAmountSwitcher: string; qrCode: string; skeleton: string; tooltip: string; dropdown: string; dropdownItem: string; dropdownList: string; modalTopbarIcon: string; withdrawalInput: string; useConnected: string; }; borderWidths: { activeOptionBorderWidth: string; buttonTertiaryBorderWidth: string; cryptoCashToggleContainerBorderWidth: string; cryptoCashToggleActiveTabBorderWidth: string; cryptoCashToggleInactiveTabBorderWidth: string; txSummaryBoxBorderWidth: string; }; shadows: { connectButton: string; dialog: string; selectedOption: string; selectedWallet: string; dropdown: string; notification: string; qrCode: string; buttonShadow: string; buttonShadowTertiary: string; buttonFocusedShadow: string; buttonFocusedShadowTertiary: string; buttonHoverShadow: string; buttonHoverShadowTertiary: string; buttonDisabledShadow: string; buttonDisabledShadowTertiary: string; buttonInnerShadow: string; buttonInnerShadowTertiary: string; buttonFocusedInnerShadow: string; buttonFocusedInnerShadowTertiary: string; buttonHoverInnerShadow: string; buttonHoverInnerShadowTertiary: string; buttonDisabledInnerShadow: string; buttonDisabledInnerShadowTertiary: string; selectedDropdownItem: string; }; spacing: { confirmationStepMarginTop: string; confirmationStepVerticalGap: string; cryptoCashToggleContainerPadding: string; cryptoCashToggleMarginBottom: string; cryptoCashToggleMarginTop: string; cryptoCashToggleTabPaddingY: string; dropdownItemIconGap: string; dropdownItemPaddingX: string; dropdownItemPaddingY: string; dropdownCompactPaddingX: string; dropdownCompactPaddingY: string; dropdownPaddingX: string; dropdownPaddingY: string; modalBaseHorizontalPadding: string; modalBottomBarButtonPaddingY: string; modalBottomHorizontalPadding: string; modalPaddingBottomUpper: string; modalPaddingBottomLower: string; modalTopBarVerticalTextSpacing: string; selectAssetItemPaddingX: string; selectAssetItemPaddingY: string; selectAssetItemTextGap: string; selectBrokerageItemPaddingX: string; selectBrokerageItemPaddingY: string; selectBrokerageListGap: string; walletConnectorListGap: string; txBreakdownMarginY: string; txBreakdownPaddingX: string; txSummaryBoxPaddingX: string; txSummaryBoxPaddingY: string; txSummaryLineItemPadding: string; txSummaryDividerMarginX: string; txSummaryDividerMarginY: string; verticalSectionGap: string; withdrawalModalPaddingTop: string; youPayYouReceivePaddingLeft: string; youPayYouReceivePaddingRight: string; youPayYouReceivePaddingY: string; inputPaddingX: string; inputPaddingY: string; dropdownActiveItemRegularSizePaddingY: string; assetListDefaultGap: string; dropdownGroupDividerMarginY: string; }; textTransforms: { inputAmountQuickOptionButton: string; txStatusTitle: string; }; blurs: { modalOverlay: string; }; opacities: { buttonPrimaryDisabled: string; }; moonpayTheme: string; modalZIndex: string; } | null | undefined; /** Returns the `dark` theme as long as a themeSet was passed to the `FunkitProvider`, if only a single theme object was passed it will be returned as `darkTheme` and `lightTheme` making them the same */ darkTheme: { colors: { accentColor: string; accentColorForeground: string; actionButtonBorder: string; connectButtonBackground: string; connectButtonBackgroundError: string; connectButtonText: string; connectButtonTextError: string; connectionIndicator: string; error: string; errorBackground: string; errorBorder: string; generalBorder: string; generalBorderDim: string; menuItemBackground: string; selectedOptionBorder: string; focusedOptionBorder: string; standby: string; success: string; delayedStatusIcon: string; chainIconBorder: string; modalBackdrop: string; modalBackground: string; modalBackgroundCheckoutComplete: string; modalBorder: string; offBackground: string; offBackgroundInverse: string; hoverState: string; lightStroke: string; mediumStroke: string; heavyStroke: string; strokeColor: string; secondaryBackground: string; modalTopbarIcon: string; modalTopbarIconBackground: string; modalTopbarIconBackgroundHover: string; modalTopbarIconBackgroundPressed: string; modalTopbarIconStroke: string; primaryText: string; secondaryText: string; tertiaryText: string; textSelection: string; inputLabel: string; inputBackground: string; inputBackgroundHover: string; inputBorderBase: string; inputBorderHover: string; activeTabBorderColor: string; activeTabBackground: string; inactiveTabBorderColor: string; inactiveTabBackgroundBase: string; inactiveTabBackgroundHover: string; inactiveTabBackgroundActive: string; activeTabText: string; inactiveTabTextBase: string; inactiveTabHover: string; actionColor: string; actionColorHover: string; actionColorDisabled: string; buttonPrimary: string; buttonDisabled: string; buttonWarning: string; buttonSuccess: string; buttonTextPrimary: string; buttonTextHover: string; buttonTextDisabled: string; transparent: string; buttonBackgroundTertiary: string; buttonBackgroundHoverTertiary: string; buttonBackgroundDisabledTertiary: string; buttonTextTertiary: string; buttonTextDisabledTertiary: string; buttonBackground: string; buttonBackgroundHover: string; buttonBackgroundPressed: string; buttonBackgroundDisabled: string; buttonTextSecondaryDisabled: string; buttonTextSecondary: string; buttonIconBackgroundHover: string; buttonIconBackgroundPressed: string; buttonIconStroke: string; buttonBorderTertiary: string; buttonBorderFocusedTertiary: string; buttonFocusedOutline: string; buttonBorderGradient: string; buttonHoverBorderGradient: string; buttonDisabledBorderGradient: string; badgeBackgroundSuccess: string; badgeBorderSuccess: string; badgeTextSuccess: string; newBadgeBackground: string; newBadgeBorder: string; newBadgeText: string; approvedBadgeBackground: string; approvedBadgeBorder: string; approvedBadgeText: string; failedBadgeBackground: string; failedBadgeBorder: string; failedBadgeText: string; inputAmountQuickOptionBaseBackground: string; inputAmountQuickOptionHoverBackground: string; inputAmountQuickOptionActiveBackground: string; inputAmountQuickOptionDisabledBackground: string; inputAmountQuickOptionBaseBorder: string; inputAmountQuickOptionHoverBorder: string; inputAmountQuickOptionActiveBorder: string; inputAmountQuickOptionFocusedBorder: string; inputAmountFiatDecimalsColor: string; youPayYouReceiveBackground: string; youPayYouReceiveBorder: string; youPayYouReceivePrimaryText: string; youPayYouReceiveSecondaryText: string; announceGradientFrom: string; announceGradientTo: string; modalHeaderDivider: string; modalFooterDivider: string; fiatPendingGradientFrom: string; fiatPendingGradientTo: string; fiatSuccessBackgroundFill: string; fiatFailedBackgroundFill: string; fiatStatusIconBorder: string; fiatAccountIconFill: string; fiatAccountGradientFrom: string; fiatAccountGradientTo: string; optionBoxBackground: string; optionBoxBorderedBackground: string; optionBoxBackgroundUninteractive: string; optionBoxBorderBase: string; optionBoxBorderHover: string; optionBoxDefaultModeNotActiveBorderBase: string; optionBoxDefaultModeNotActiveBorderHover: string; openDropdownBackgroundColor: string; dropdownActiveItemBackgroundBase: string; dropdownActiveItemBackgroundHover: string; dropdownActiveItemBackgroundDisabled: string; dropdownActiveItemBorderBase: string; dropdownActiveItemBorderHover: string; dropdownGroupHeader: string; selectedDropdownItemBackground: string; alwaysVisibleLabelBackgroundHover: string; selectedDropdownItemText: string; useConnectedBackgroundBase: string; useConnectedBackgroundHover: string; copyButtonBackgroundBase: string; copyButtonBackgroundHover: string; copyButtonBackgroundActive: string; copyButtonBorderBase: string; copyButtonBorderHover: string; funFeatureListBackgroundBase: string; funFeatureListBackgroundHover: string; funFeatureListBorderColor: string; funFeatureListBorderColorHover: string; spinnerBackground: string; spinnerIndicator: string; spinnerBackgroundVerifyAccount: string; spinnerIndicatorVerifyAccount: string; txSummaryBoxBackground: string; txSummaryBoxBorder: string; counterRingColor: string; cryptoCashToggleContainerBorderColor: string; cryptoCashToggleBackground: string; qrCodeBackground: string; qrCodeForeground: string; withdrawalYouWillReceiveLabel: string; withdrawalYouWillReceiveValueCrypto: string; withdrawalYouWillReceiveValueUsd: string; }; dimensions: { connectExchangeIconSize: string; cryptoCashToggleIconSize: string; dollarValueSkeletonHeight: string; dollarValueSkeletonWidth: string; inputAmountQuickOptionButtonHeight: string; inputAmountMinHeight: string; modalBottomBarButtonHeight: string; modalBottomBarCloseButtonHeight: string; modalTopBarHeight: string; modalTopbarIconSize: string; modalTopbarIconWrapperSize: string; paymentAmountSkeletonBlockHeight: string; paymentAmountSkeletonBlockWidth: string; paymentAmountSkeletonCircleSize: string; paymentMethodItemIconSize: string; selectAssetItemIconSize: string; sourceListGap: string; txBreakdownSkeletonWidth: string; txSummaryLineSkeletonHeight: string; txSummaryLineSkeletonWidth: string; }; fonts: { amountValue: string; body: string; buttonTextPrimary: string; buttonTextSecondary: string; buttonTextTertiary: string; dropdownGroupHeader: string; header: string; inputAmount: string; modalTopbarTitle: string; txStatusDescription: string; txStatusTitle: string; }; fontWeight: { regular: string; medium: string; semibold: string; bold: string; heavy: string; cryptoCashToggle: string; dropdownGroupHeader: string; inputAmount: string; inputLabel: string; inputValue: string; modalTopbarTitle: string; modalBottomBarButtonText: string; paymentMethodItemSubtitle: string; paymentMethodItemTitle: string; selectAssetItemSubtitle: string; selectAssetItemTitle: string; sourceListSectionLabelFontWeight: string; txBreakdown: string; txStatusDescription: string; txStatusTitle: string; txSummaryLabel: string; txSummaryValue: string; formOfPaymentsListSectionLabelFontWeight: string; withdrawalYouWillReceiveLabel: string; withdrawalYouWillReceiveValueCrypto: string; withdrawalYouWillReceiveValueUsd: string; }; fontSize: { '10': { fontSize: string; lineHeight: string; }; '12': { fontSize: string; lineHeight: string; }; '13': { fontSize: string; lineHeight: string; }; '14': { fontSize: string; lineHeight: string; }; '16': { fontSize: string; lineHeight: string; }; '18': { fontSize: string; lineHeight: string; }; '20': { fontSize: string; lineHeight: string; }; '21': { fontSize: string; lineHeight: string; }; '40': { fontSize: string; lineHeight: string; }; '57': { fontSize: string; lineHeight: string; }; body: { fontSize: string; lineHeight: string; }; cryptoCashToggle: { fontSize: string; lineHeight: string; }; 'header-14': { fontSize: string; lineHeight: string; }; 'header-36': { fontSize: string; lineHeight: string; }; buttonTextPrimary: { fontSize: string; lineHeight: string; }; buttonTextSecondary: { fontSize: string; lineHeight: string; }; buttonTextTertiary: { fontSize: string; lineHeight: string; }; dollarValue: { fontSize: string; lineHeight: string; }; dropdownGroupHeader: { fontSize: string; lineHeight: string; }; inputAmount: { fontSize: string; lineHeight: string; }; inputLabel: { fontSize: string; lineHeight: string; }; inputValue: { fontSize: string; lineHeight: string; }; modalTopbarSubtitle: { fontSize: string; lineHeight: string; }; modalTopbarTitle: { fontSize: string; lineHeight: string; }; modalBottomBarButtonText: { fontSize: string; lineHeight: string; }; paymentMethodItemSubtitle: { fontSize: string; lineHeight: string; }; paymentMethodItemTitle: { fontSize: string; lineHeight: string; }; selectAssetItemSubtitle: { fontSize: string; lineHeight: string; }; selectAssetItemTitle: { fontSize: string; lineHeight: string; }; txBreakdown: { fontSize: string; lineHeight: string; }; txStatusDescription: { fontSize: string; lineHeight: string; }; txStatusTitle: { fontSize: string; lineHeight: string; }; txSummaryLabel: { fontSize: string; lineHeight: string; }; txSummaryValue: { fontSize: string; lineHeight: string; }; withdrawalYouWillReceive: { fontSize: string; lineHeight: string; }; youPayYouReceivePrimaryFontSize: { fontSize: string; lineHeight: string; }; youPayYouReceiveSecondaryFontSize: { fontSize: string; lineHeight: string; }; depositAddressFontSize: { fontSize: string; lineHeight: string; }; funFeatureListItemFontSize: { fontSize: string; lineHeight: string; }; dropdownItemFontSize: { fontSize: string; lineHeight: string; }; sourceListSectionLabelFontSize: { fontSize: string; lineHeight: string; }; formOfPaymentsListSectionLabelFontSize: { fontSize: string; lineHeight: string; }; quickOptionFontSize: { fontSize: string; lineHeight: string; }; useConnectedFontSize: { fontSize: string; lineHeight: string; }; paymentFeeSummaryTooltip: { fontSize: string; lineHeight: string; }; tooltipContent: { fontSize: string; lineHeight: string; }; }; radii: { actionButton: string; actionButtonInner: string; connectButton: string; menuButton: string; modal: string; modalMobile: string; modalActionButton: string; modalActionButtonMobile: string; summaryBox: string; youPayYouReceive: string; inputAmountSwitcher: string; qrCode: string; skeleton: string; tooltip: string; dropdown: string; dropdownItem: string; dropdownList: string; modalTopbarIcon: string; withdrawalInput: string; useConnected: string; }; borderWidths: { activeOptionBorderWidth: string; buttonTertiaryBorderWidth: string; cryptoCashToggleContainerBorderWidth: string; cryptoCashToggleActiveTabBorderWidth: string; cryptoCashToggleInactiveTabBorderWidth: string; txSummaryBoxBorderWidth: string; }; shadows: { connectButton: string; dialog: string; selectedOption: string; selectedWallet: string; dropdown: string; notification: string; qrCode: string; buttonShadow: string; buttonShadowTertiary: string; buttonFocusedShadow: string; buttonFocusedShadowTertiary: string; buttonHoverShadow: string; buttonHoverShadowTertiary: string; buttonDisabledShadow: string; buttonDisabledShadowTertiary: string; buttonInnerShadow: string; buttonInnerShadowTertiary: string; buttonFocusedInnerShadow: string; buttonFocusedInnerShadowTertiary: string; buttonHoverInnerShadow: string; buttonHoverInnerShadowTertiary: string; buttonDisabledInnerShadow: string; buttonDisabledInnerShadowTertiary: string; selectedDropdownItem: string; }; spacing: { confirmationStepMarginTop: string; confirmationStepVerticalGap: string; cryptoCashToggleContainerPadding: string; cryptoCashToggleMarginBottom: string; cryptoCashToggleMarginTop: string; cryptoCashToggleTabPaddingY: string; dropdownItemIconGap: string; dropdownItemPaddingX: string; dropdownItemPaddingY: string; dropdownCompactPaddingX: string; dropdownCompactPaddingY: string; dropdownPaddingX: string; dropdownPaddingY: string; modalBaseHorizontalPadding: string; modalBottomBarButtonPaddingY: string; modalBottomHorizontalPadding: string; modalPaddingBottomUpper: string; modalPaddingBottomLower: string; modalTopBarVerticalTextSpacing: string; selectAssetItemPaddingX: string; selectAssetItemPaddingY: string; selectAssetItemTextGap: string; selectBrokerageItemPaddingX: string; selectBrokerageItemPaddingY: string; selectBrokerageListGap: string; walletConnectorListGap: string; txBreakdownMarginY: string; txBreakdownPaddingX: string; txSummaryBoxPaddingX: string; txSummaryBoxPaddingY: string; txSummaryLineItemPadding: string; txSummaryDividerMarginX: string; txSummaryDividerMarginY: string; verticalSectionGap: string; withdrawalModalPaddingTop: string; youPayYouReceivePaddingLeft: string; youPayYouReceivePaddingRight: string; youPayYouReceivePaddingY: string; inputPaddingX: string; inputPaddingY: string; dropdownActiveItemRegularSizePaddingY: string; assetListDefaultGap: string; dropdownGroupDividerMarginY: string; }; textTransforms: { inputAmountQuickOptionButton: string; txStatusTitle: string; }; blurs: { modalOverlay: string; }; opacities: { buttonPrimaryDisabled: string; }; moonpayTheme: string; modalZIndex: string; } | null | undefined; /** Toggles between `light` and `dark` themes as long as they were passed to the `FunkitProvider`, if only a single theme object was passed toggling will be disabled */ toggleTheme: (colorScheme?: ThemeColorScheme) => void; /** Returns an indication whether a `light` or a `dark` theme should be currently active, has meaning only if a themeSet was passed to the `FunkitProvider`, if only a single theme object was passed it reflects the system color scheme */ themeColorScheme: ThemeColorScheme; }; export declare const FunkitThemeProvider: ({ children, theme: themeOrThemeSet, }: FunkitThemeProps) => React.JSX.Element; export {};