react-chrono/dist/types/styles/system/recipes.css.d.ts

A Modern Timeline component for React

import { RecipeVariants } from '@vanilla-extract/recipes';
export declare const interactive: import('@vanilla-extract/recipes').RuntimeFn<{
    hover: {
        scale: {
            transform: "scale(1.02)";
            selectors: {
                '&:hover': {
                    transform: "scale(1.05)";
                };
                '&:active': {
                    transform: "scale(0.98)";
                };
            };
        };
        lift: {
            selectors: {
                '&:hover': {
                    transform: "translateY(-1px)";
                };
                '&:active': {
                    transform: "translateY(0px)";
                };
            };
        };
        opacity: {
            selectors: {
                '&:hover': {
                    opacity: number;
                };
            };
        };
        none: {};
    };
}>;
export declare const flexContainer: import('@vanilla-extract/recipes').RuntimeFn<{
    direction: {
        row: string;
        column: string;
    };
    align: {
        start: string;
        center: string;
        end: string;
        stretch: string;
    };
    justify: {
        start: string;
        center: string;
        end: string;
        between: string;
        around: string;
    };
    gap: {
        none: string;
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    wrap: {
        true: string;
        false: string;
    };
}>;
export declare const card: import('@vanilla-extract/recipes').RuntimeFn<{
    size: {
        sm: string;
        md: string;
        lg: string;
    };
    elevation: {
        flat: {
            boxShadow: "none";
        };
        low: {
            boxShadow: `var(--${string})`;
        };
        high: {
            boxShadow: `var(--${string})`;
        };
    };
    interactive: {
        true: {
            selectors: {
                '&:hover': {
                    boxShadow: `var(--${string})`;
                    transform: "translateY(-1px)";
                };
            };
        };
        false: {};
    };
    fullWidth: {
        true: string;
        false: {};
    };
}>;
export declare const button: import('@vanilla-extract/recipes').RuntimeFn<{
    variant: {
        primary: {
            backgroundColor: `var(--${string})`;
            borderColor: `var(--${string})`;
            color: `var(--${string})`;
            selectors: {
                '&:hover': {
                    backgroundColor: `var(--${string})`;
                    borderColor: `var(--${string})`;
                };
            };
        };
        secondary: {
            backgroundColor: "transparent";
            borderColor: `var(--${string})`;
            color: `var(--${string})`;
            selectors: {
                '&:hover': {
                    backgroundColor: `var(--${string})`;
                };
            };
        };
        ghost: {
            backgroundColor: "transparent";
            borderColor: "transparent";
            color: `var(--${string})`;
            selectors: {
                '&:hover': {
                    backgroundColor: `var(--${string})`;
                };
            };
        };
    };
    size: {
        sm: string;
        md: string;
        lg: string;
    };
    shape: {
        square: {};
        rounded: string;
        pill: string;
    };
    fullWidth: {
        true: string;
        false: {};
    };
}>;
export declare const text: import('@vanilla-extract/recipes').RuntimeFn<{
    variant: {
        h1: string;
        h2: string;
        h3: string;
        body: string;
        caption: string;
    };
    color: {
        primary: {
            color: `var(--${string})`;
        };
        secondary: {
            color: `var(--${string})`;
        };
        muted: {
            color: `var(--${string})`;
        };
        inverse: {
            color: `var(--${string})`;
        };
        interactive: {
            color: `var(--${string})`;
        };
    };
    align: {
        left: string;
        center: string;
        right: string;
    };
    truncate: {
        true: {
            overflow: "hidden";
            textOverflow: "ellipsis";
            whiteSpace: "nowrap";
        };
        false: {};
    };
}>;
export declare const input: import('@vanilla-extract/recipes').RuntimeFn<{
    size: {
        sm: string;
        md: string;
        lg: string;
    };
}>;
export declare const timelineCard: import('@vanilla-extract/recipes').RuntimeFn<{
    mode: {
        vertical: {
            width: `var(--${string})`;
            marginBottom: `var(--${string})`;
        };
        horizontal: {
            width: `var(--${string})`;
            marginRight: `var(--${string})`;
        };
    };
    active: {
        true: {
            borderColor: `var(--${string})`;
            boxShadow: `var(--${string})`;
        };
        false: {};
    };
}>;
export declare const timelinePoint: import('@vanilla-extract/recipes').RuntimeFn<{
    size: {
        sm: {
            width: `var(--${string})`;
            height: `var(--${string})`;
        };
        md: {
            width: `var(--${string})`;
            height: `var(--${string})`;
        };
        lg: {
            width: `var(--${string})`;
            height: `var(--${string})`;
        };
    };
    state: {
        inactive: {
            borderColor: `var(--${string})`;
            backgroundColor: `var(--${string})`;
        };
        active: {
            borderColor: `var(--${string})`;
            backgroundColor: `var(--${string})`;
        };
        hover: {
            borderColor: `var(--${string})`;
            backgroundColor: `var(--${string})`;
        };
    };
    interactive: {
        true: (string | {
            selectors: {
                '&:hover': {
                    borderColor: `var(--${string})`;
                };
            };
        })[];
        false: {};
    };
}>;
export declare const toolbarButton: import('@vanilla-extract/recipes').RuntimeFn<{
    active: {
        true: {
            backgroundColor: `var(--${string})`;
            color: `var(--${string})`;
        };
        false: {};
    };
}>;
export declare const utilityPatterns: {
    visuallyHidden: string;
    resetButton: string;
    resetList: string;
    focusRing: string;
};
export type InteractiveVariants = RecipeVariants<typeof interactive>;
export type FlexContainerVariants = RecipeVariants<typeof flexContainer>;
export type CardVariants = RecipeVariants<typeof card>;
export type ButtonVariants = RecipeVariants<typeof button>;
export type TextVariants = RecipeVariants<typeof text>;
export type InputVariants = RecipeVariants<typeof input>;
export type TimelineCardVariants = RecipeVariants<typeof timelineCard>;
export type TimelinePointVariants = RecipeVariants<typeof timelinePoint>;
export type ToolbarButtonVariants = RecipeVariants<typeof toolbarButton>;
export declare const patterns: {
    interactive: import('@vanilla-extract/recipes').RuntimeFn<{
        hover: {
            scale: {
                transform: "scale(1.02)";
                selectors: {
                    '&:hover': {
                        transform: "scale(1.05)";
                    };
                    '&:active': {
                        transform: "scale(0.98)";
                    };
                };
            };
            lift: {
                selectors: {
                    '&:hover': {
                        transform: "translateY(-1px)";
                    };
                    '&:active': {
                        transform: "translateY(0px)";
                    };
                };
            };
            opacity: {
                selectors: {
                    '&:hover': {
                        opacity: number;
                    };
                };
            };
            none: {};
        };
    }>;
    flexContainer: import('@vanilla-extract/recipes').RuntimeFn<{
        direction: {
            row: string;
            column: string;
        };
        align: {
            start: string;
            center: string;
            end: string;
            stretch: string;
        };
        justify: {
            start: string;
            center: string;
            end: string;
            between: string;
            around: string;
        };
        gap: {
            none: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
        };
        wrap: {
            true: string;
            false: string;
        };
    }>;
    card: import('@vanilla-extract/recipes').RuntimeFn<{
        size: {
            sm: string;
            md: string;
            lg: string;
        };
        elevation: {
            flat: {
                boxShadow: "none";
            };
            low: {
                boxShadow: `var(--${string})`;
            };
            high: {
                boxShadow: `var(--${string})`;
            };
        };
        interactive: {
            true: {
                selectors: {
                    '&:hover': {
                        boxShadow: `var(--${string})`;
                        transform: "translateY(-1px)";
                    };
                };
            };
            false: {};
        };
        fullWidth: {
            true: string;
            false: {};
        };
    }>;
    button: import('@vanilla-extract/recipes').RuntimeFn<{
        variant: {
            primary: {
                backgroundColor: `var(--${string})`;
                borderColor: `var(--${string})`;
                color: `var(--${string})`;
                selectors: {
                    '&:hover': {
                        backgroundColor: `var(--${string})`;
                        borderColor: `var(--${string})`;
                    };
                };
            };
            secondary: {
                backgroundColor: "transparent";
                borderColor: `var(--${string})`;
                color: `var(--${string})`;
                selectors: {
                    '&:hover': {
                        backgroundColor: `var(--${string})`;
                    };
                };
            };
            ghost: {
                backgroundColor: "transparent";
                borderColor: "transparent";
                color: `var(--${string})`;
                selectors: {
                    '&:hover': {
                        backgroundColor: `var(--${string})`;
                    };
                };
            };
        };
        size: {
            sm: string;
            md: string;
            lg: string;
        };
        shape: {
            square: {};
            rounded: string;
            pill: string;
        };
        fullWidth: {
            true: string;
            false: {};
        };
    }>;
    text: import('@vanilla-extract/recipes').RuntimeFn<{
        variant: {
            h1: string;
            h2: string;
            h3: string;
            body: string;
            caption: string;
        };
        color: {
            primary: {
                color: `var(--${string})`;
            };
            secondary: {
                color: `var(--${string})`;
            };
            muted: {
                color: `var(--${string})`;
            };
            inverse: {
                color: `var(--${string})`;
            };
            interactive: {
                color: `var(--${string})`;
            };
        };
        align: {
            left: string;
            center: string;
            right: string;
        };
        truncate: {
            true: {
                overflow: "hidden";
                textOverflow: "ellipsis";
                whiteSpace: "nowrap";
            };
            false: {};
        };
    }>;
    input: import('@vanilla-extract/recipes').RuntimeFn<{
        size: {
            sm: string;
            md: string;
            lg: string;
        };
    }>;
    timelineCard: import('@vanilla-extract/recipes').RuntimeFn<{
        mode: {
            vertical: {
                width: `var(--${string})`;
                marginBottom: `var(--${string})`;
            };
            horizontal: {
                width: `var(--${string})`;
                marginRight: `var(--${string})`;
            };
        };
        active: {
            true: {
                borderColor: `var(--${string})`;
                boxShadow: `var(--${string})`;
            };
            false: {};
        };
    }>;
    timelinePoint: import('@vanilla-extract/recipes').RuntimeFn<{
        size: {
            sm: {
                width: `var(--${string})`;
                height: `var(--${string})`;
            };
            md: {
                width: `var(--${string})`;
                height: `var(--${string})`;
            };
            lg: {
                width: `var(--${string})`;
                height: `var(--${string})`;
            };
        };
        state: {
            inactive: {
                borderColor: `var(--${string})`;
                backgroundColor: `var(--${string})`;
            };
            active: {
                borderColor: `var(--${string})`;
                backgroundColor: `var(--${string})`;
            };
            hover: {
                borderColor: `var(--${string})`;
                backgroundColor: `var(--${string})`;
            };
        };
        interactive: {
            true: (string | {
                selectors: {
                    '&:hover': {
                        borderColor: `var(--${string})`;
                    };
                };
            })[];
            false: {};
        };
    }>;
    toolbarButton: import('@vanilla-extract/recipes').RuntimeFn<{
        active: {
            true: {
                backgroundColor: `var(--${string})`;
                color: `var(--${string})`;
            };
            false: {};
        };
    }>;
    utils: {
        visuallyHidden: string;
        resetButton: string;
        resetList: string;
        focusRing: string;
    };
};
//# sourceMappingURL=recipes.css.d.ts.map