@funkit/connect

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<string | undefined>; export declare const createThemeRootProps: (id: string | undefined) => { "data-rk": string; }; export declare const createThemeRootSelector: (id: string | undefined) => string; export declare const useThemeRootProps: () => { "data-rk": string; }; 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; modalBorder: string; offBackground: string; offBackgroundInverse: string; hoverState: string; lightStroke: string; mediumStroke: string; heavyStroke: string; strokeColor: string; modalTopbarIcon: string; primaryText: string; secondaryText: string; tertiaryText: string; textSelection: string; inputBackground: string; inputBorderBase: string; inputBorderHover: 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; 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; 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; spinnerBackground: string; spinnerIndicator: string; spinnerBackgroundVerifyAccount: string; spinnerIndicatorVerifyAccount: string; }; dimensions: { modalBottomBarButtonHeight: string; modalTopBarHeight: string; }; fonts: { buttonTextPrimary: string; buttonTextSecondary: string; buttonTextTertiary: string; body: string; }; fontWeight: { regular: string; medium: string; semibold: string; bold: string; heavy: string; modalTopbarTitle: string; modalBottomBarButtonText: 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; }; buttonTextPrimary: { fontSize: string; lineHeight: string; }; buttonTextSecondary: { fontSize: string; lineHeight: string; }; buttonTextTertiary: { fontSize: string; lineHeight: string; }; modalTopbarSubtitle: { fontSize: string; lineHeight: string; }; modalTopbarTitle: { fontSize: string; lineHeight: string; }; modalBottomBarButtonText: { 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; modalTopbarIcon: string; }; borderWidths: { activeOptionBorderWidth: 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: { modalBaseHorizontalPadding: string; modalBottomHorizontalPadding: string; modalPaddingBottomUpper: string; modalPaddingBottomLower: string; modalTopBarVerticalTextSpacing: string; }; blurs: { modalOverlay: string; }; moonpayTheme: 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; modalBorder: string; offBackground: string; offBackgroundInverse: string; hoverState: string; lightStroke: string; mediumStroke: string; heavyStroke: string; strokeColor: string; modalTopbarIcon: string; primaryText: string; secondaryText: string; tertiaryText: string; textSelection: string; inputBackground: string; inputBorderBase: string; inputBorderHover: 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; 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; 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; spinnerBackground: string; spinnerIndicator: string; spinnerBackgroundVerifyAccount: string; spinnerIndicatorVerifyAccount: string; }; dimensions: { modalBottomBarButtonHeight: string; modalTopBarHeight: string; }; fonts: { buttonTextPrimary: string; buttonTextSecondary: string; buttonTextTertiary: string; body: string; }; fontWeight: { regular: string; medium: string; semibold: string; bold: string; heavy: string; modalTopbarTitle: string; modalBottomBarButtonText: 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; }; buttonTextPrimary: { fontSize: string; lineHeight: string; }; buttonTextSecondary: { fontSize: string; lineHeight: string; }; buttonTextTertiary: { fontSize: string; lineHeight: string; }; modalTopbarSubtitle: { fontSize: string; lineHeight: string; }; modalTopbarTitle: { fontSize: string; lineHeight: string; }; modalBottomBarButtonText: { 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; modalTopbarIcon: string; }; borderWidths: { activeOptionBorderWidth: 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: { modalBaseHorizontalPadding: string; modalBottomHorizontalPadding: string; modalPaddingBottomUpper: string; modalPaddingBottomLower: string; modalTopBarVerticalTextSpacing: string; }; blurs: { modalOverlay: string; }; moonpayTheme: 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; modalBorder: string; offBackground: string; offBackgroundInverse: string; hoverState: string; lightStroke: string; mediumStroke: string; heavyStroke: string; strokeColor: string; modalTopbarIcon: string; primaryText: string; secondaryText: string; tertiaryText: string; textSelection: string; inputBackground: string; inputBorderBase: string; inputBorderHover: 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; 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; 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; spinnerBackground: string; spinnerIndicator: string; spinnerBackgroundVerifyAccount: string; spinnerIndicatorVerifyAccount: string; }; dimensions: { modalBottomBarButtonHeight: string; modalTopBarHeight: string; }; fonts: { buttonTextPrimary: string; buttonTextSecondary: string; buttonTextTertiary: string; body: string; }; fontWeight: { regular: string; medium: string; semibold: string; bold: string; heavy: string; modalTopbarTitle: string; modalBottomBarButtonText: 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; }; buttonTextPrimary: { fontSize: string; lineHeight: string; }; buttonTextSecondary: { fontSize: string; lineHeight: string; }; buttonTextTertiary: { fontSize: string; lineHeight: string; }; modalTopbarSubtitle: { fontSize: string; lineHeight: string; }; modalTopbarTitle: { fontSize: string; lineHeight: string; }; modalBottomBarButtonText: { 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; modalTopbarIcon: string; }; borderWidths: { activeOptionBorderWidth: 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: { modalBaseHorizontalPadding: string; modalBottomHorizontalPadding: string; modalPaddingBottomUpper: string; modalPaddingBottomLower: string; modalTopBarVerticalTextSpacing: string; }; blurs: { modalOverlay: string; }; moonpayTheme: 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 {};