@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;
        /**
         * Optional CSS `background` painted as a *translucent overlay* on top of
         * the modal background when the post-checkout success screen renders for
         * a *completed* checkout. Falls back to `modalBackground` so non-
         * overriding themes paint nothing extra (the overlay color matches what
         * was already there). Customers (e.g. Aave) set a multi-stop
         * `linear-gradient(...)` stack here; use `rgba(..., 0)` stops (no opaque
         * base) so it composites correctly on both light and dark backgrounds.
         */
        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;
};
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})`;
        modalBackgroundCheckoutComplete: `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})`;
        secondaryBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopbarIcon: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopbarIconBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopbarIconBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopbarIconBackgroundPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopbarIconStroke: `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})`;
        inputLabel: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputBackgroundHover: `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})`;
        activeTabBorderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        activeTabBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inactiveTabBorderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inactiveTabBackgroundBase: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inactiveTabBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inactiveTabBackgroundActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        activeTabText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inactiveTabTextBase: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inactiveTabHover: `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})`;
        buttonBorderTertiary: `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})`;
        inputAmountFiatDecimalsColor: `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})`;
        optionBoxBorderedBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        optionBoxBackgroundUninteractive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        optionBoxBorderBase: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        optionBoxBorderHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        optionBoxDefaultModeNotActiveBorderBase: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        optionBoxDefaultModeNotActiveBorderHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        openDropdownBackgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        dropdownActiveItemBackgroundBase: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        dropdownActiveItemBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        dropdownActiveItemBackgroundDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        dropdownActiveItemBorderBase: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        dropdownActiveItemBorderHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        dropdownGroupHeader: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        selectedDropdownItemBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        alwaysVisibleLabelBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        selectedDropdownItemText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        useConnectedBackgroundBase: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        useConnectedBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        copyButtonBackgroundBase: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        copyButtonBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        copyButtonBackgroundActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        copyButtonBorderBase: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        copyButtonBorderHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        funFeatureListBackgroundBase: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        funFeatureListBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        funFeatureListBorderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        funFeatureListBorderColorHover: `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})`;
        txSummaryBoxBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        txSummaryBoxBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        counterRingColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        cryptoCashToggleContainerBorderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        cryptoCashToggleBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        qrCodeBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        qrCodeForeground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        withdrawalYouWillReceiveLabel: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        withdrawalYouWillReceiveValueCrypto: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        withdrawalYouWillReceiveValueUsd: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
    };
    dimensions: {
        connectExchangeIconSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        cryptoCashToggleIconSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        dollarValueSkeletonHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        dollarValueSkeletonWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputAmountQuickOptionButtonHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputAmountMinHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalBottomBarButtonHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalBottomBarCloseButtonHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopBarHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopbarIconSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopbarIconWrapperSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        paymentAmountSkeletonBlockHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        paymentAmountSkeletonBlockWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        paymentAmountSkeletonCircleSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        paymentMethodItemIconSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        selectAssetItemIconSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        sourceListGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        txBreakdownSkeletonWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        txSummaryLineSkeletonHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        txSummaryLineSkeletonWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
    };
    fonts: {
        amountValue: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        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})`;
        dropdownGroupHeader: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        header: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputAmount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        modalTopbarTitle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        txStatusDescription: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        txStatusTitle: `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})`;
        cryptoCashToggle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        dropdownGroupHeader: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputAmount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputLabel: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        inputValue: `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})`;
        paymentMethodItemSubtitle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        paymentMethodItemTitle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        selectAssetItemSubtitle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        selectAssetItemTitle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        sourceListSectionLabelFontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        txBreakdown: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        txStatusDescription: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        txStatusTitle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        txSummaryLabel: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        txSummaryValue: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        formOfPaymentsListSectionLabelFontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        withdrawalYouWillReceiveLabel: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        withdrawalYouWillReceiveValueCrypto: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        withdrawalYouWillReceiveValueUsd: `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})`;
        };
        body: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        cryptoCashToggle: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        'header-14': {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        'header-36': {
            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})`;
        };
        dollarValue: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        dropdownGroupHeader: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        inputAmount: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        inputLabel: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        inputValue: {
            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})`;