import { CSSProperties } from 'react';

declare enum ComponentSize {
    Large = "large",
    Medium = "medium",
    Small = "small",
    XSmall = "xsmall"
}

declare type Theme = {
    name: string;
    fontSizes: number[];
    fontWeights: number[];
    lineHeights: number[];
    mediaQueries: ThemeBreakpoints;
    radius: {
        regular: string;
    };
    zIndex: {
        modal: number;
        overlay: number;
    };
    colors: ThemeColors;
    component: ThemeComponent;
    typography: ThemeTypography;
    fonts: ThemeFonts;
    assets: ThemeAssets;
};
declare type ThemeBreakpoints = {
    mobile: number;
    tablet?: number;
    desktop: number;
};
declare type ThemeBasicPallete = {
    color: string;
    contrast: string;
};
declare type ThemeColorPallete = ThemeBasicPallete & {
    soft?: ThemeBasicPallete;
};
declare type ThemeColorPrimaryPallete = ThemeColorPallete & {
    20: ThemeColorPallete;
    40: ThemeColorPallete;
    60: ThemeColorPallete;
    80: ThemeColorPallete;
};
declare type ThemeColors = {
    pallete: {
        primary: ThemeColorPrimaryPallete;
        secondary: ThemeColorPrimaryPallete;
        tertiary?: ThemeColorPrimaryPallete;
    } & Partial<Record<string, ThemeColorPallete>>;
    shades: {
        black: ThemeBasicPallete;
        white: ThemeBasicPallete;
        5: ThemeBasicPallete;
        10: ThemeBasicPallete;
        50: ThemeBasicPallete;
        100: ThemeBasicPallete;
        150: ThemeBasicPallete;
        175: ThemeBasicPallete;
        200: ThemeBasicPallete;
        250: ThemeBasicPallete;
        300: ThemeBasicPallete;
        350: ThemeBasicPallete;
        400: ThemeBasicPallete;
        450: ThemeBasicPallete;
        500: ThemeBasicPallete;
        550: ThemeBasicPallete;
        600: ThemeBasicPallete;
        650: ThemeBasicPallete;
        700: ThemeBasicPallete;
        750: ThemeBasicPallete;
        800: ThemeBasicPallete;
        850: ThemeBasicPallete;
        900: ThemeBasicPallete;
        950: ThemeBasicPallete;
        990: ThemeBasicPallete;
    };
    semantic: {
        positive: ThemeBasicPallete;
        urgent: ThemeBasicPallete;
        attention: ThemeBasicPallete;
        informative: ThemeBasicPallete;
    };
    border: {
        color: string;
        disabled: string;
        highlight: string;
        shadow?: string;
        isChecked?: string;
    };
    background: {
        color: string;
        disabled: string;
    };
    text: {
        color: string;
        disabled: string;
    };
};
declare type ThemeComponent = {
    button: {
        border: string;
        borderRadius: string;
        fontWeight: number;
        lineHeight: string;
        letterSpacing: string;
        minWidth: string;
        minHeight: string;
        size: {
            small: {
                fontSize: string;
                padding: string;
            };
            medium: {
                fontSize: string;
                padding: string;
            };
            large: {
                fontSize: string;
                padding: string;
            };
        };
        primary: {
            active: {
                backgroundColor: string;
                color: string;
            };
            hover: {
                backgroundColor: string;
                color: string;
            };
        };
        secondary: {
            active: {
                backgroundColor: string;
                color: string;
            };
            hover: {
                backgroundColor: string;
                color: string;
            };
        };
    };
    input: {
        background: string;
        color: string;
        placeholderColor: string;
        borderRadius: string;
        fontSize: string;
        fontWeight: number;
        padding: string;
        lineHeight: string;
        border: string;
        boxShadow: string;
        errorBorder: string;
    };
    inputPlaceholder: {
        fontSize: string;
        padding: string;
        focusBorder: string;
    };
    inputCustom: {
        button: {
            borderRadius: string;
        };
        input: {
            borderRadius: string;
        };
    };
    selector: {
        size: {
            small: {
                padding: string;
                borderRadius: string;
            };
            medium: {
                padding: string;
                borderRadius: string;
            };
        };
        default: {
            fontWeight: number;
            border: string;
            background: string;
            color: string;
        };
        hover: {
            fontWeight: number;
            background: string;
            border: string;
            color: string;
        };
        noStock: {
            fontWeight: number;
            background: string;
            border: string;
            color: string;
        };
        disabled: {
            border: string;
        };
        fontSize: string;
    };
    rating: {
        fontWeight: number;
        size: {
            xsmall: {
                fontSize: string;
                lineHeight: string;
            };
            small: {
                fontSize: string;
                lineHeight: string;
            };
            medium: {
                fontSize: string;
                lineHeight: string;
            };
            large: {
                fontSize: string;
                lineHeight: string;
            };
        };
    };
    stars: {
        element: {
            color: string;
            xsmall: {
                width: string;
                height: string;
                marginRight: string;
            };
            small: {
                width: string;
                height: string;
                marginRight: string;
            };
            medium: {
                width: string;
                height: string;
                marginRight: string;
            };
            large: {
                width: string;
                height: string;
                marginRight: string;
            };
        };
    };
    card: {
        borderRadius: string;
        backgroundColor: string;
    };
    radio: {
        borderColor: string;
        background: string;
        textSize: string;
        lineHeight: string;
        size: {
            small: {
                borderWidth: string;
                margin: string;
                height: string;
                active: {
                    borderWidth: string;
                };
            };
            medium: {
                borderWidth: string;
                margin: string;
                height: string;
                active: {
                    borderWidth: string;
                };
            };
            large: {
                borderWidth: string;
                margin: string;
                height: string;
                active: {
                    borderWidth: string;
                };
            };
        };
    };
    label: {
        color: string;
        fontSize: {
            small: string;
            medium: string;
            large: string;
        };
        lineHeight: {
            small: string;
            medium: string;
            large: string;
        };
    };
    checkbox: {
        background: string;
        borderColor: string;
        active: {
            background: string;
        };
        size: {
            large: {
                width: string;
                height: string;
                borderRadius: string;
                borderWidth: string;
                margin: string;
                icon: {
                    width: string;
                    height: string;
                };
            };
            medium: {
                width: string;
                height: string;
                borderRadius: string;
                borderWidth: string;
                margin: string;
                icon: {
                    width: string;
                    height: string;
                };
            };
            small: {
                width: string;
                height: string;
                borderRadius: string;
                borderWidth: string;
                margin: string;
                icon: {
                    width: string;
                    height: string;
                };
            };
        };
    };
    accordion: {
        variant: {
            box: {
                container: {
                    border: string;
                    borderColor: string;
                    borderRadius: string;
                    padding: string;
                };
                summary: {
                    fontWeight: number;
                    fontSize: string;
                    lineHeight: string;
                    color: string;
                };
                details: {
                    margin: string;
                };
                icon: {
                    width: number;
                    height: number;
                    color: string;
                };
            };
            simple: {
                container: {
                    borderTop: string;
                    borderBottom: string;
                    borderColor: string;
                    borderRadius: string;
                    padding: string;
                };
                summary: {
                    fontWeight: number;
                    fontSize: string;
                    lineHeight: string;
                    color: string;
                };
                details: {
                    margin: string;
                };
                icon: {
                    width: number;
                    height: number;
                    color: string;
                };
            };
        };
    };
    dropdown: {
        borderRadius: string;
        fontSize: string;
        fontWeight: number;
        lineHeight: string;
        padding: string;
        optionPadding: string;
        color: string;
        fill: string;
        borderWidth?: string;
        options: {
            borderColor: string;
            color: string;
            borderRadius: string;
            borderRadiusV2?: string;
            backgroundColor?: string;
        };
        optionsWrapper: {
            borderRadius: string;
            overflow: string;
        };
    };
    modal: {
        minWidth: string;
    };
    packSelector: {
        borderRadius: string;
        borderColor: string;
        highlightColor: string;
        selectedColor: string;
        selectedContrast: string;
        tagColor: string;
    };
    slideNavigation: {
        slideDots: {
            unselectedDotColor: string;
            selectedDotColor: string;
            dotsOpacity: number;
        };
    };
    beforeAfter: {
        size: {
            small: {
                image: {
                    minHeight: string;
                    minWidth: string;
                    mobile: {
                        minHeight: string;
                        minWidth: string;
                    };
                };
                imageContainer: {
                    maxWidth: string;
                    padding: string;
                    mobile: {
                        maxWidth: string;
                    };
                };
                userInfoText: {
                    fontSize: string;
                    mobile: {
                        fontSize: string;
                    };
                };
            };
            medium: {
                image: {
                    minHeight: string;
                    minWidth: string;
                    mobile: {
                        minHeight: string;
                        minWidth: string;
                    };
                };
                imageContainer: {
                    maxWidth: string;
                    padding: string;
                    mobile: {
                        maxWidth: string;
                    };
                };
                userInfoText: {
                    fontSize: string;
                    mobile: {
                        fontSize: string;
                    };
                };
            };
            large: {
                image: {
                    minHeight: string;
                    minWidth: string;
                    mobile: {
                        minHeight: string;
                        minWidth: string;
                    };
                };
                imageContainer: {
                    maxWidth: string;
                    padding: string;
                    mobile: {
                        maxWidth: string;
                    };
                };
                userInfoText: {
                    fontSize: string;
                    mobile: {
                        fontSize: string;
                    };
                };
            };
        };
    };
    total: {
        basicTotal: {
            amount: {
                color: string;
                fontSize: string;
            };
            currency: {
                color: string;
                fontSize: string;
                lineHeight: string;
                alignSelf?: string;
            };
            savings: {
                amountFontWeight: number;
                color?: string;
            };
        };
    };
    subTotal: {
        basicSubTotal: {
            family: string;
            size: string;
            weight: number;
            lineHeight: string;
            color: string;
        };
    };
    pricing: {
        priceLabel: {
            price: {
                size: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
                originalPriceColor: string;
                actualPriceColor: string;
                defaultFontSize?: {
                    large: string;
                    medium: string;
                    small: string;
                };
                smallFontSize?: {
                    large: string;
                    medium: string;
                    small: string;
                };
                largeFontSize?: {
                    large: string;
                    medium: string;
                    small: string;
                };
                discountFontSize?: {
                    large: string;
                    medium: string;
                    small: string;
                };
            };
        };
    };
    orderSummary: {
        headingTextAlign: string;
        backgroundColor?: string;
        padding?: string;
        borderRadius?: string;
        maxWidth?: string;
        onMobile: {
            maxWidth?: string;
            padding?: string;
            backgroundColor?: string;
        };
    };
    expressCheckout: {
        button: {
            borderRadius: string;
        };
    };
    copyrightText: {
        fontSize: string;
        fontWeight: number;
        lineHeight: string;
        color: string;
    };
    thankyouFooterText: {
        fontSize: string;
        fontWeight: string;
        lineHeight: string;
    };
    textButton: {
        fontWeight: number;
        lineHeight: string;
    };
    deliveryDetails: {
        title: {
            fontSize: string;
            lineHeight: string;
            fontWeight: number;
        };
        note: {
            accentColor: string;
            color: string;
            backgroundColor: string;
        };
        sectionTitle: {
            fontSize: string;
            lineHeight: string;
            fontWeight: number;
        };
        sectionDetails: {
            fontSize: string;
            lineHeight: string;
            fontWeight: number;
            marginLeft?: string;
        };
    };
    text: {
        orderHeader: {
            color: string;
        };
        fitGuarantee: {
            titleFontSize?: string;
            titleFontWeight?: number | string;
            fontWeight: number | string;
        };
        offerBanner: {
            borderRadius: string;
        };
    };
    orderBar: {
        backgroundColor: string;
        fontColor: string;
    };
    banner: {
        outlineColor: string;
        filledColor: string;
        fontColor: string;
    };
    offerTitleText: {
        size: string;
        weight: number;
        lineHeight: string;
    };
    linePrice: {
        color: string;
        badge: {
            color: string;
            borderRadius: string;
        };
    };
    divider: {
        color: string;
    };
    checkout: {
        paymentInformation: {
            borderRadius?: string;
        };
        creditCardSection: {
            borderRadius?: string;
        };
    };
    upsell: {
        banner: {
            outlined: {
                color?: string;
            };
        };
        price: {
            colors: {
                regular: string;
                deal: string;
                each: string;
                badgeBG: string;
                badgeColor: string;
            };
        };
        hurryTimeCard: {
            backgroundColor: string;
        };
        guaranteedFit?: {
            backgroundColor: string;
        };
    };
    thankyou: {
        orderBanner?: {
            text: {
                left: string;
            };
        };
        emailSection: {
            backgroundColor?: string;
        };
        socialIcon: {
            color?: string;
        };
        orderId: {
            color: string;
        };
    };
    hurryUp: {
        borderRadius?: string;
    };
    qtyPicker: {
        borderRadius: string;
    };
};
declare type ThemeTypography = {
    config: {
        weight: {
            heavy: number;
            bold: number;
            demi: number;
            regular: number;
        };
    };
    variants: Record<string, CSSProperties>;
};
declare type ThemeFonts = {
    url: string;
    config: Array<{
        src: string;
        family: string;
        weight?: number | string;
        style?: string;
        stretch?: string;
    }>;
};
declare type ThemeAssets = {
    cdn: string;
    images: {
        favicon: string;
        logo: string;
        logoSize?: {
            width: string;
            height: string;
        };
        logoMobile?: string;
        checkoutLogo?: {
            url: string;
            width: string;
            height: string;
        };
        upsellLogo?: {
            url: string;
            width: string;
            height: string;
        };
        tyLogo?: {
            url: string;
            width: string;
            height: string;
        };
    };
    [key: string]: any;
};

declare const revel: Theme;

export { revel as default };
