@funkit/connect/dist/css/sprinkles.css.d.ts

Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.

import './reset.css';
import { type RequiredConditionalValue } from '@vanilla-extract/sprinkles';
declare const themeContractValues: {
    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;
};
export declare const validColorNames: string[];
export type ThemeVars = typeof themeContractValues;
export declare const themeVars: {
    colors: {
        accentColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        accentColorForeground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        actionButtonBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        connectButtonBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        connectButtonBackgroundError: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        connectButtonText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        connectButtonTextError: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        connectionIndicator: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        errorBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        errorBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        generalBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        generalBorderDim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        menuItemBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        selectedOptionBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        focusedOptionBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        standby: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        delayedStatusIcon: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        chainIconBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalBackdrop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        offBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        offBackgroundInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        hoverState: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        lightStroke: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        mediumStroke: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        heavyStroke: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        strokeColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopbarIcon: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        primaryText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        secondaryText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        tertiaryText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        textSelection: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputBorderBase: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputBorderHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        actionColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        actionColorHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        actionColorDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonWarning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonSuccess: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonTextPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonTextHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonTextDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        transparent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonBackgroundTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonBackgroundHoverTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonBackgroundDisabledTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonTextTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonTextDisabledTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonBackgroundPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonBackgroundDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonTextSecondaryDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonTextSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonIconBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonIconBackgroundPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonIconStroke: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonBorderFocusedTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonFocusedOutline: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonBorderGradient: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonHoverBorderGradient: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonDisabledBorderGradient: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        badgeBackgroundSuccess: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        badgeBorderSuccess: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        badgeTextSuccess: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        newBadgeBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        newBadgeBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        newBadgeText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        approvedBadgeBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        approvedBadgeBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        approvedBadgeText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        failedBadgeBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        failedBadgeBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        failedBadgeText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputAmountQuickOptionBaseBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputAmountQuickOptionHoverBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputAmountQuickOptionActiveBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputAmountQuickOptionDisabledBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputAmountQuickOptionBaseBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputAmountQuickOptionHoverBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputAmountQuickOptionActiveBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputAmountQuickOptionFocusedBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        youPayYouReceiveBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        youPayYouReceiveBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        youPayYouReceivePrimaryText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        youPayYouReceiveSecondaryText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        announceGradientFrom: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        announceGradientTo: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalHeaderDivider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalFooterDivider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        fiatPendingGradientFrom: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        fiatPendingGradientTo: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        fiatSuccessBackgroundFill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        fiatFailedBackgroundFill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        fiatStatusIconBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        fiatAccountIconFill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        fiatAccountGradientFrom: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        fiatAccountGradientTo: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        optionBoxBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        spinnerBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        spinnerIndicator: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        spinnerBackgroundVerifyAccount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        spinnerIndicatorVerifyAccount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
    };
    dimensions: {
        modalBottomBarButtonHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopBarHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
    };
    fonts: {
        buttonTextPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonTextSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonTextTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
    };
    fontWeight: {
        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        semibold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        heavy: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopbarTitle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalBottomBarButtonText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
    };
    fontSize: {
        '10': {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        '12': {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        '13': {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        '14': {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        '16': {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        '18': {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        '20': {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        '21': {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        '40': {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        '57': {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        buttonTextPrimary: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        buttonTextSecondary: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        buttonTextTertiary: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        modalTopbarSubtitle: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        modalTopbarTitle: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        modalBottomBarButtonText: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
    };
    radii: {
        actionButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        actionButtonInner: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        connectButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        menuButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalMobile: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalActionButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalActionButtonMobile: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        summaryBox: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        youPayYouReceive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputAmountSwitcher: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        qrCode: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        skeleton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        tooltip: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        dropdown: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        dropdownItem: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopbarIcon: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
    };
    borderWidths: {
        activeOptionBorderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
    };
    shadows: {
        connectButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        dialog: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        selectedOption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        selectedWallet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        dropdown: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        notification: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        qrCode: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonShadowTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonFocusedShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonFocusedShadowTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonHoverShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonHoverShadowTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonDisabledShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonDisabledShadowTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonInnerShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonInnerShadowTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonFocusedInnerShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonFocusedInnerShadowTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonHoverInnerShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonHoverInnerShadowTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonDisabledInnerShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        buttonDisabledInnerShadowTertiary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        selectedDropdownItem: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
    };
    spacing: {
        modalBaseHorizontalPadding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalBottomHorizontalPadding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalPaddingBottomUpper: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalPaddingBottomLower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopBarVerticalTextSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
    };
    blurs: {
        modalOverlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
    };
    moonpayTheme: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
export declare const largeScreenMinWidth = 768;
declare const responsiveProperties: {
    conditions: {
        defaultCondition: "smallScreen";
        conditionNames: ("smallScreen" | "largeScreen")[];
    };
    styles: {
        alignItems: {
            values: {
                center: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                "flex-end": {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                "flex-start": {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
            };
        };
        display: {
            values: {
                none: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                flex: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                block: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                inline: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
            };
        };
    };
};
export type ResponsiveValue<Value extends string | number | boolean> = RequiredConditionalValue<typeof responsiveProperties, Value>;
export declare const mapResponsiveValue: <OutputValue extends string | number | boolean | null | undefined, Value extends import("@vanilla-extract/sprinkles").ConditionalValue<{
    conditions: {
        defaultCondition: "smallScreen";
        conditionNames: ("smallScreen" | "largeScreen")[];
    };
    styles: {
        alignItems: {
            values: {
                center: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                "flex-end": {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                "flex-start": {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
            };
        };
        display: {
            values: {
                none: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                flex: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                block: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                inline: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
            };
        };
    };
}, string | number | boolean>>(value: Value, fn: (inputValue: Value extends import("@vanilla-extract/sprinkles").ResponsiveArray<1, string | number | boolean | null> | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2, string | number | boolean | null> | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 3 | 2, string | number | boolean | null> | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 3 | 4 | 2, string | number | boolean | null> | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 3 | 4 | 2 | 5, string | number | boolean | null> | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 3 | 4 | 2 | 5 | 6, string | number | boolean | null> | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 3 | 4 | 2 | 5 | 6 | 7, string | number | boolean | null> | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 3 | 4 | 2 | 5 | 6 | 7 | 8, string | number | boolean | null> ? NonNullable<Value[number]> : Value extends Partial<Record<string, string | number | boolean>> ? NonNullable<Value[keyof Value]> : Value, key: "smallScreen" | "largeScreen") => OutputValue) => Value extends string | number | boolean ? OutputValue : Partial<Record<"smallScreen" | "largeScreen", OutputValue>>;
export declare const normalizeResponsiveValue: <Value extends string | number | boolean>(value: import("@vanilla-extract/sprinkles").ConditionalValue<{
    conditions: {
        defaultCondition: "smallScreen";
        conditionNames: ("smallScreen" | "largeScreen")[];
    };
    styles: {
        alignItems: {
            values: {
                center: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                "flex-end": {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                "flex-start": {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
            };
        };
        display: {
            values: {
                none: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                flex: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                block: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
                inline: {
                    defaultClass: string;
                    conditions: {
                        smallScreen: string;
                        largeScreen: string;
                    };
                };
            };
        };
    };
}, Value>) => Partial<Record<"smallScreen" | "largeScreen", Value>>;
export declare const sprinkles: ((props: {
    background?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "focusedOptionBorder" | "standby" | "success" | "delayedStatusIcon" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "offBackground" | "offBackgroundInverse" | "hoverState" | "lightStroke" | "mediumStroke" | "heavyStroke" | "strokeColor" | "modalTopbarIcon" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextPrimary" | "buttonTextHover" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonBackgroundDisabledTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundPressed" | "buttonBackgroundDisabled" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | "buttonBorderFocusedTertiary" | "buttonFocusedOutline" | "buttonBorderGradient" | "buttonHoverBorderGradient" | "buttonDisabledBorderGradient" | "badgeBackgroundSuccess" | "badgeBorderSuccess" | "badgeTextSuccess" | "newBadgeBackground" | "newBadgeBorder" | "newBadgeText" | "approvedBadgeBackground" | "approvedBadgeBorder" | "approvedBadgeText" | "failedBadgeBackground" | "failedBadgeBorder" | "failedBadgeText" | "inputAmountQuickOptionBaseBackground" | "inputAmountQuickOptionHoverBackground" | "inputAmountQuickOptionActiveBackground" | "inputAmountQuickOptionDisabledBackground" | "inputAmountQuickOptionBaseBorder" | "inputAmountQuickOptionHoverBorder" | "inputAmountQuickOptionActiveBorder" | "inputAmountQuickOptionFocusedBorder" | "youPayYouReceiveBackground" | "youPayYouReceiveBorder" | "youPayYouReceivePrimaryText" | "youPayYouReceiveSecondaryText" | "announceGradientFrom" | "announceGradientTo" | "modalHeaderDivider" | "modalFooterDivider" | "fiatPendingGradientFrom" | "fiatPendingGradientTo" | "fiatSuccessBackgroundFill" | "fiatFailedBackgroundFill" | "fiatStatusIconBorder" | "fiatAccountIconFill" | "fiatAccountGradientFrom" | "fiatAccountGradientTo" | "optionBoxBackground" | "spinnerBackground" | "spinnerIndicator" | "spinnerBackgroundVerifyAccount" | "spinnerIndicatorVerifyAccount" | {
        base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "focusedOptionBorder" | "standby" | "success" | "delayedStatusIcon" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "offBackground" | "offBackgroundInverse" | "hoverState" | "lightStroke" | "mediumStroke" | "heavyStroke" | "strokeColor" | "modalTopbarIcon" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextPrimary" | "buttonTextHover" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonBackgroundDisabledTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundPressed" | "buttonBackgroundDisabled" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | "buttonBorderFocusedTertiary" | "buttonFocusedOutline" | "buttonBorderGradient" | "buttonHoverBorderGradient" | "buttonDisabledBorderGradient" | "badgeBackgroundSuccess" | "badgeBorderSuccess" | "badgeTextSuccess" | "newBadgeBackground" | "newBadgeBorder" | "newBadgeText" | "approvedBadgeBackground" | "approvedBadgeBorder" | "approvedBadgeText" | "failedBadgeBackground" | "failedBadgeBorder" | "failedBadgeText" | "inputAmountQuickOptionBaseBackground" | "inputAmountQuickOptionHoverBackground" | "inputAmountQuickOptionActiveBackground" | "inputAmountQuickOptionDisabledBackground" | "inputAmountQuickOptionBaseBorder" | "inputAmountQuickOptionHoverBorder" | "inputAmountQuickOptionActiveBorder" | "inputAmountQuickOptionFocusedBorder" | "youPayYouReceiveBackground" | "youPayYouReceiveBorder" | "youPayYouReceivePrimaryText" | "youPayYouReceiveSecondaryText" | "announceGradientFrom" | "announceGradientTo" | "modalHeaderDivider" | "modalFooterDivider" | "fiatPendingGradientFrom" | "fiatPendingGradientTo" | "fiatSuccessBackgroundFill" | "fiatFailedBackgroundFill" | "fiatStatusIconBorder" | "fiatAccountIconFill" | "fiatAccountGradientFrom" | "fiatAccountGradientTo" | "optionBoxBackground" | "spinnerBackground" | "spinnerIndicator" | "spinnerBackgroundVerifyAccount" | "spinnerIndicatorVerifyAccount" | undefined;
        hover?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "focusedOptionBorder" | "standby" | "success" | "delayedStatusIcon" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "offBackground" | "offBackgroundInverse" | "hoverState" | "lightStroke" | "mediumStroke" | "heavyStroke" | "strokeColor" | "modalTopbarIcon" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextPrimary" | "buttonTextHover" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonBackgroundDisabledTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundPressed" | "buttonBackgroundDisabled" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | "buttonBorderFocusedTertiary" | "buttonFocusedOutline" | "buttonBorderGradient" | "buttonHoverBorderGradient" | "buttonDisabledBorderGradient" | "badgeBackgroundSuccess" | "badgeBorderSuccess" | "badgeTextSuccess" | "newBadgeBackground" | "newBadgeBorder" | "newBadgeText" | "approvedBadgeBackground" | "approvedBadgeBorder" | "approvedBadgeText" | "failedBadgeBackground" | "failedBadgeBorder" | "failedBadgeText" | "inputAmountQuickOptionBaseBackground" | "inputAmountQuickOptionHoverBackground" | "inputAmountQuickOptionActiveBackground" | "inputAmountQuickOptionDisabledBackground" | "inputAmountQuickOptionBaseBorder" | "inputAmountQuickOptionHoverBorder" | "inputAmountQuickOptionActiveBorder" | "inputAmountQuickOptionFocusedBorder" | "youPayYouReceiveBackground" | "youPayYouReceiveBorder" | "youPayYouReceivePrimaryText" | "youPayYouReceiveSecondaryText" | "announceGradientFrom" | "announceGradientTo" | "modalHeaderDivider" | "modalFooterDivider" | "fiatPendingGradientFrom" | "fiatPendingGradientTo" | "fiatSuccessBackgroundFill" | "fiatFailedBackgroundFill" | "fiatStatusIconBorder" | "fiatAccountIconFill" | "fiatAccountGradientFrom" | "fiatAccountGradientTo" | "optionBoxBackground" | "spinnerBackground" | "spinnerIndicator" | "spinnerBackgroundVerifyAccount" | "spinnerIndicatorVerifyAccount" | undefined;
        active?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "focusedOptionBorder" | "standby" | "success" | "delayedStatusIcon" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "offBackground" | "offBackgroundInverse" | "hoverState" | "lightStroke" | "mediumStroke" | "heavyStroke" | "strokeColor" | "modalTopbarIcon" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextPrimary" | "buttonTextHover" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonBackgroundDisabledTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundPressed" | "buttonBackgroundDisabled" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | "buttonBorderFocusedTertiary" | "buttonFocusedOutline" | "buttonBorderGradient" | "buttonHoverBorderGradient" | "buttonDisabledBorderGradient" | "badgeBackgroundSuccess" | "badgeBorderSuccess" | "badgeTextSuccess" | "newBadgeBackground" | "newBadgeBorder" | "newBadgeText" | "approvedBadgeBackground" | "approvedBadgeBorder" | "approvedBadgeText" | "failedBadgeBackground" | "failedBadgeBorder" | "failedBadgeText" | "inputAmountQuickOptionBaseBackground" | "inputAmountQuickOptionHoverBackground" | "inputAmountQuickOptionActiveBackground" | "inputAmountQuickOptionDisabledBackground" | "inputAmountQuickOptionBaseBorder" | "inputAmountQuickOptionHoverBorder" | "inputAmountQuickOptionActiveBorder" | "inputAmountQuickOptionFocusedBorder" | "youPayYouReceiveBackground" | "youPayYouReceiveBorder" | "youPayYouReceivePrimaryText" | "youPayYouReceiveSecondaryText" | "announceGradientFrom" | "announceGradientTo" | "modalHeaderDivider" | "modalFooterDivider" | "fiatPendingGradientFrom" | "fiatPendingGradientTo" | "fiatSuccessBackgroundFill" | "fiatFailedBackgroundFill" | "fiatStatusIconBorder" | "fiatAccountIconFill" | "fiatAccountGradientFrom" | "fiatAccountGradientTo" | "optionBoxBackground" | "spinnerBackground" |