react-chrono/dist/types/styles/tokens/semantic-tokens.css.d.ts

A Modern Timeline component for React

/**
 * @deprecated This file is deprecated and no longer used.
 *
 * All semantic tokens have been consolidated into the unified token system.
 * This file is kept only to prevent build errors during migration.
 *
 * Use `tokens` from '@/styles/tokens/index.css' instead.
 */
export declare const semanticTokens: {
    timeline: {
        point: {
            background: {
                active: `var(--${string})`;
                inactive: `var(--${string})`;
                hover: `var(--${string})`;
            };
        };
    };
    color: {
        text: {
            primary: `var(--${string})`;
            secondary: `var(--${string})`;
            muted: `var(--${string})`;
            inverse: `var(--${string})`;
        };
        background: {
            primary: `var(--${string})`;
            secondary: `var(--${string})`;
            elevated: `var(--${string})`;
            overlay: `var(--${string})`;
        };
        interactive: {
            primary: `var(--${string})`;
            primaryHover: `var(--${string})`;
            primaryActive: `var(--${string})`;
            secondary: `var(--${string})`;
            secondaryHover: `var(--${string})`;
            muted: `var(--${string})`;
            mutedHover: `var(--${string})`;
            toolbarBg: `var(--${string})`;
            toolbarText: `var(--${string})`;
            buttonBg: `var(--${string})`;
            buttonBorder: `var(--${string})`;
            focusRing: `var(--${string})`;
        };
        border: {
            default: `var(--${string})`;
            muted: `var(--${string})`;
            emphasis: `var(--${string})`;
            interactive: `var(--${string})`;
        };
        status: {
            success: `var(--${string})`;
            warning: `var(--${string})`;
            error: `var(--${string})`;
            info: `var(--${string})`;
        };
        icon: {
            default: `var(--${string})`;
            muted: `var(--${string})`;
            emphasis: `var(--${string})`;
        };
        card: {
            bg: `var(--${string})`;
            border: `var(--${string})`;
            title: `var(--${string})`;
            subtitle: `var(--${string})`;
            details: `var(--${string})`;
        };
        primary: `var(--${string})`;
        muted: `var(--${string})`;
        nestedCardBg: `var(--${string})`;
        nestedCardTitle: `var(--${string})`;
        nestedCardSubtitle: `var(--${string})`;
        nestedCardDetails: `var(--${string})`;
        buttonBorder: `var(--${string})`;
    };
    spacing: {
        xs: `var(--${string})`;
        sm: `var(--${string})`;
        md: `var(--${string})`;
        lg: `var(--${string})`;
        xl: `var(--${string})`;
        '2xl': `var(--${string})`;
        '3xl': `var(--${string})`;
    };
    typography: {
        fontSize: {
            caption: `var(--${string})`;
            body: `var(--${string})`;
            base: `var(--${string})`;
            heading3: `var(--${string})`;
            heading2: `var(--${string})`;
            heading1: `var(--${string})`;
            cardTitle: `var(--${string})`;
            cardText: `var(--${string})`;
            title: `var(--${string})`;
            sm: `var(--${string})`;
            md: `var(--${string})`;
            xs: `var(--${string})`;
            lg: `var(--${string})`;
            xl: `var(--${string})`;
        };
        lineHeight: {
            tight: `var(--${string})`;
            normal: `var(--${string})`;
            relaxed: `var(--${string})`;
        };
        fontWeight: {
            normal: `var(--${string})`;
            medium: `var(--${string})`;
            semibold: `var(--${string})`;
            bold: `var(--${string})`;
        };
    };
    borderRadius: {
        sm: `var(--${string})`;
        md: `var(--${string})`;
        lg: `var(--${string})`;
        xl: `var(--${string})`;
        full: `var(--${string})`;
    };
    shadow: {
        card: `var(--${string})`;
        cardHover: `var(--${string})`;
        cardActive: `var(--${string})`;
        toolbar: `var(--${string})`;
        modal: `var(--${string})`;
        none: `var(--${string})`;
    };
    zIndex: {
        timelineCard: `var(--${string})`;
        controls: `var(--${string})`;
        popover: `var(--${string})`;
        outline: `var(--${string})`;
    };
    motion: {
        duration: {
            fast: `var(--${string})`;
            normal: `var(--${string})`;
            slow: `var(--${string})`;
        };
        easing: {
            standard: `var(--${string})`;
            emphasized: `var(--${string})`;
            easeIn: `var(--${string})`;
            easeOut: `var(--${string})`;
            easeInOut: `var(--${string})`;
        };
    };
    card: {
        background: {
            default: `var(--${string})`;
            hover: `var(--${string})`;
            active: `var(--${string})`;
            gradient: `var(--${string})`;
        };
        border: {
            color: `var(--${string})`;
            gradient: `var(--${string})`;
            radius: {
                sm: `var(--${string})`;
                md: `var(--${string})`;
                lg: `var(--${string})`;
            };
        };
        shadow: {
            default: `var(--${string})`;
            hover: `var(--${string})`;
            active: `var(--${string})`;
            flat: `var(--${string})`;
            low: `var(--${string})`;
            medium: `var(--${string})`;
            high: `var(--${string})`;
            interactive: `var(--${string})`;
        };
        content: {
            spacing: {
                tight: `var(--${string})`;
                normal: `var(--${string})`;
                loose: `var(--${string})`;
            };
        };
    };
    toolbar: {
        background: {
            default: `var(--${string})`;
            hover: `var(--${string})`;
        };
        text: {
            default: `var(--${string})`;
            muted: `var(--${string})`;
        };
        button: {
            background: {
                default: `var(--${string})`;
                hover: `var(--${string})`;
                active: `var(--${string})`;
            };
            border: {
                default: `var(--${string})`;
                hover: `var(--${string})`;
            };
            text: {
                default: `var(--${string})`;
                disabled: `var(--${string})`;
            };
            size: {
                sm: `var(--${string})`;
                md: `var(--${string})`;
                lg: `var(--${string})`;
            };
        };
    };
    states: {
        focus: {
            outline: `var(--${string})`;
            ring: {
                color: `var(--${string})`;
                width: `var(--${string})`;
                offset: `var(--${string})`;
                outline: `var(--${string})`;
            };
        };
        disabled: {
            opacity: `var(--${string})`;
            filter: `var(--${string})`;
        };
        hover: {
            opacity: `var(--${string})`;
            transform: `var(--${string})`;
            background: `var(--${string})`;
            border: `var(--${string})`;
        };
        active: {
            opacity: `var(--${string})`;
            transform: `var(--${string})`;
            background: `var(--${string})`;
            border: `var(--${string})`;
        };
    };
    layout: {
        container: {
            maxWidth: {
                sm: `var(--${string})`;
                md: `var(--${string})`;
                lg: `var(--${string})`;
                xl: `var(--${string})`;
            };
        };
    };
};
export declare const defaultSemanticTheme: {
    timeline: {
        point: {
            background: {
                active: `var(--${string})`;
                inactive: `var(--${string})`;
                hover: `var(--${string})`;
            };
        };
    };
    color: {
        text: {
            primary: `var(--${string})`;
            secondary: `var(--${string})`;
            muted: `var(--${string})`;
            inverse: `var(--${string})`;
        };
        background: {
            primary: `var(--${string})`;
            secondary: `var(--${string})`;
            elevated: `var(--${string})`;
            overlay: `var(--${string})`;
        };
        interactive: {
            primary: `var(--${string})`;
            primaryHover: `var(--${string})`;
            primaryActive: `var(--${string})`;
            secondary: `var(--${string})`;
            secondaryHover: `var(--${string})`;
            muted: `var(--${string})`;
            mutedHover: `var(--${string})`;
            toolbarBg: `var(--${string})`;
            toolbarText: `var(--${string})`;
            buttonBg: `var(--${string})`;
            buttonBorder: `var(--${string})`;
            focusRing: `var(--${string})`;
        };
        border: {
            default: `var(--${string})`;
            muted: `var(--${string})`;
            emphasis: `var(--${string})`;
            interactive: `var(--${string})`;
        };
        status: {
            success: `var(--${string})`;
            warning: `var(--${string})`;
            error: `var(--${string})`;
            info: `var(--${string})`;
        };
        icon: {
            default: `var(--${string})`;
            muted: `var(--${string})`;
            emphasis: `var(--${string})`;
        };
        card: {
            bg: `var(--${string})`;
            border: `var(--${string})`;
            title: `var(--${string})`;
            subtitle: `var(--${string})`;
            details: `var(--${string})`;
        };
        primary: `var(--${string})`;
        muted: `var(--${string})`;
        nestedCardBg: `var(--${string})`;
        nestedCardTitle: `var(--${string})`;
        nestedCardSubtitle: `var(--${string})`;
        nestedCardDetails: `var(--${string})`;
        buttonBorder: `var(--${string})`;
    };
    spacing: {
        xs: `var(--${string})`;
        sm: `var(--${string})`;
        md: `var(--${string})`;
        lg: `var(--${string})`;
        xl: `var(--${string})`;
        '2xl': `var(--${string})`;
        '3xl': `var(--${string})`;
    };
    typography: {
        fontSize: {
            caption: `var(--${string})`;
            body: `var(--${string})`;
            base: `var(--${string})`;
            heading3: `var(--${string})`;
            heading2: `var(--${string})`;
            heading1: `var(--${string})`;
            cardTitle: `var(--${string})`;
            cardText: `var(--${string})`;
            title: `var(--${string})`;
            sm: `var(--${string})`;
            md: `var(--${string})`;
            xs: `var(--${string})`;
            lg: `var(--${string})`;
            xl: `var(--${string})`;
        };
        lineHeight: {
            tight: `var(--${string})`;
            normal: `var(--${string})`;
            relaxed: `var(--${string})`;
        };
        fontWeight: {
            normal: `var(--${string})`;
            medium: `var(--${string})`;
            semibold: `var(--${string})`;
            bold: `var(--${string})`;
        };
    };
    borderRadius: {
        sm: `var(--${string})`;
        md: `var(--${string})`;
        lg: `var(--${string})`;
        xl: `var(--${string})`;
        full: `var(--${string})`;
    };
    shadow: {
        card: `var(--${string})`;
        cardHover: `var(--${string})`;
        cardActive: `var(--${string})`;
        toolbar: `var(--${string})`;
        modal: `var(--${string})`;
        none: `var(--${string})`;
    };
    zIndex: {
        timelineCard: `var(--${string})`;
        controls: `var(--${string})`;
        popover: `var(--${string})`;
        outline: `var(--${string})`;
    };
    motion: {
        duration: {
            fast: `var(--${string})`;
            normal: `var(--${string})`;
            slow: `var(--${string})`;
        };
        easing: {
            standard: `var(--${string})`;
            emphasized: `var(--${string})`;
            easeIn: `var(--${string})`;
            easeOut: `var(--${string})`;
            easeInOut: `var(--${string})`;
        };
    };
    card: {
        background: {
            default: `var(--${string})`;
            hover: `var(--${string})`;
            active: `var(--${string})`;
            gradient: `var(--${string})`;
        };
        border: {
            color: `var(--${string})`;
            gradient: `var(--${string})`;
            radius: {
                sm: `var(--${string})`;
                md: `var(--${string})`;
                lg: `var(--${string})`;
            };
        };
        shadow: {
            default: `var(--${string})`;
            hover: `var(--${string})`;
            active: `var(--${string})`;
            flat: `var(--${string})`;
            low: `var(--${string})`;
            medium: `var(--${string})`;
            high: `var(--${string})`;
            interactive: `var(--${string})`;
        };
        content: {
            spacing: {
                tight: `var(--${string})`;
                normal: `var(--${string})`;
                loose: `var(--${string})`;
            };
        };
    };
    toolbar: {
        background: {
            default: `var(--${string})`;
            hover: `var(--${string})`;
        };
        text: {
            default: `var(--${string})`;
            muted: `var(--${string})`;
        };
        button: {
            background: {
                default: `var(--${string})`;
                hover: `var(--${string})`;
                active: `var(--${string})`;
            };
            border: {
                default: `var(--${string})`;
                hover: `var(--${string})`;
            };
            text: {
                default: `var(--${string})`;
                disabled: `var(--${string})`;
            };
            size: {
                sm: `var(--${string})`;
                md: `var(--${string})`;
                lg: `var(--${string})`;
            };
        };
    };
    states: {
        focus: {
            outline: `var(--${string})`;
            ring: {
                color: `var(--${string})`;
                width: `var(--${string})`;
                offset: `var(--${string})`;
                outline: `var(--${string})`;
            };
        };
        disabled: {
            opacity: `var(--${string})`;
            filter: `var(--${string})`;
        };
        hover: {
            opacity: `var(--${string})`;
            transform: `var(--${string})`;
            background: `var(--${string})`;
            border: `var(--${string})`;
        };
        active: {
            opacity: `var(--${string})`;
            transform: `var(--${string})`;
            background: `var(--${string})`;
            border: `var(--${string})`;
        };
    };
    layout: {
        container: {
            maxWidth: {
                sm: `var(--${string})`;
                md: `var(--${string})`;
                lg: `var(--${string})`;
                xl: `var(--${string})`;
            };
        };
    };
};
//# sourceMappingURL=semantic-tokens.css.d.ts.map