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 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; chainIconBorder: string; modalBackdrop: string; modalBackground: string; modalBorder: string; offBackground: string; offBackgroundInverse: string; hoverState: string; lightStroke: string; mediumStroke: string; heavyStroke: string; strokeColor: string; dydxSwitchActiveBackground: 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; buttonTextDisabled: string; transparent: string; buttonBackgroundTertiary: string; buttonBackgroundHoverTertiary: 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; 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; }; fonts: { body: string; }; fontWeight: { regular: string; medium: string; semibold: string; bold: string; heavy: 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; }; }; 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; }; shadows: { connectButton: string; dialog: string; selectedOption: string; selectedWallet: string; dropdown: string; notification: string; qrCode: string; buttonFocusedShadow: 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; chainIconBorder: string; modalBackdrop: string; modalBackground: string; modalBorder: string; offBackground: string; offBackgroundInverse: string; hoverState: string; lightStroke: string; mediumStroke: string; heavyStroke: string; strokeColor: string; dydxSwitchActiveBackground: 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; buttonTextDisabled: string; transparent: string; buttonBackgroundTertiary: string; buttonBackgroundHoverTertiary: 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; 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; }; fonts: { body: string; }; fontWeight: { regular: string; medium: string; semibold: string; bold: string; heavy: 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; }; }; 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; }; shadows: { connectButton: string; dialog: string; selectedOption: string; selectedWallet: string; dropdown: string; notification: string; qrCode: string; buttonFocusedShadow: 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; chainIconBorder: string; modalBackdrop: string; modalBackground: string; modalBorder: string; offBackground: string; offBackgroundInverse: string; hoverState: string; lightStroke: string; mediumStroke: string; heavyStroke: string; strokeColor: string; dydxSwitchActiveBackground: 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; buttonTextDisabled: string; transparent: string; buttonBackgroundTertiary: string; buttonBackgroundHoverTertiary: 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; 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; }; fonts: { body: string; }; fontWeight: { regular: string; medium: string; semibold: string; bold: string; heavy: 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; }; }; 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; }; shadows: { connectButton: string; dialog: string; selectedOption: string; selectedWallet: string; dropdown: string; notification: string; qrCode: string; buttonFocusedShadow: 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 {};