@trycourier/courier-ui-inbox/dist/types/courier-inbox-theme.d.ts

Inbox components for the Courier web UI

import { SystemThemeMode, CourierFontTheme, CourierIconTheme, CourierButtonTheme, CourierIconButtonTheme } from '@trycourier/courier-ui-core';
export type CourierInboxFontTheme = CourierFontTheme;
export type CourierInboxIconTheme = CourierIconTheme;
export type CourierInboxButtonTheme = CourierButtonTheme;
export type CourierInboxIconButtonTheme = CourierIconButtonTheme;
export type CourierInboxUnreadDotIndicatorTheme = {
    backgroundColor?: string;
    borderRadius?: string;
    height?: string;
    width?: string;
};
export type CourierInboxUnreadCountIndicatorTheme = {
    font?: CourierInboxFontTheme;
    backgroundColor?: string;
    borderRadius?: string;
    padding?: string;
};
export type CourierInboxMenuButtonTheme = CourierInboxIconButtonTheme & {
    unreadDotIndicator?: CourierInboxUnreadDotIndicatorTheme;
};
export type CourierInboxAnimationTheme = {
    transition?: string;
    initialTransform?: string;
    visibleTransform?: string;
};
export type CourierInboxPopupTheme = {
    backgroundColor?: string;
    border?: string;
    borderRadius?: string;
    shadow?: string;
    animation?: CourierInboxAnimationTheme;
    list?: {
        font?: CourierInboxFontTheme;
        selectedIcon?: CourierInboxIconTheme;
        hoverBackgroundColor?: string;
        activeBackgroundColor?: string;
        divider?: string;
    };
};
export type CourierInboxSubtitleLinkTheme = {
    color?: string;
    textDecoration?: string;
    hoverColor?: string;
};
export type CourierInboxListItemTheme = {
    unreadIndicatorColor?: string;
    backgroundColor?: string;
    hoverBackgroundColor?: string;
    activeBackgroundColor?: string;
    transition?: string;
    title?: CourierInboxFontTheme;
    subtitle?: CourierInboxFontTheme;
    /** Styles for inline links inside the subtitle/body text */
    subtitleLink?: CourierInboxSubtitleLinkTheme;
    time?: CourierInboxFontTheme;
    archiveIcon?: CourierInboxIconTheme;
    divider?: string;
    actions?: {
        backgroundColor?: string;
        hoverBackgroundColor?: string;
        activeBackgroundColor?: string;
        border?: string;
        borderRadius?: string;
        shadow?: string;
        font?: CourierInboxFontTheme;
    };
    menu?: {
        enabled?: boolean;
        backgroundColor?: string;
        border?: string;
        borderRadius?: string;
        shadow?: string;
        animation?: CourierInboxAnimationTheme;
        longPress?: {
            displayDuration?: number;
            vibrationDuration?: number;
        };
        item?: {
            hoverBackgroundColor?: string;
            activeBackgroundColor?: string;
            borderRadius?: string;
            read?: CourierInboxIconTheme;
            unread?: CourierInboxIconTheme;
            archive?: CourierInboxIconTheme;
            unarchive?: CourierInboxIconTheme;
        };
    };
};
export type CourierInboxSkeletonLoadingStateTheme = {
    animation?: {
        barColor?: string;
        barHeight?: string;
        barBorderRadius?: string;
        duration?: string;
    };
    divider?: string;
};
export type CourierInboxInfoStateTheme = {
    title?: {
        font?: CourierInboxFontTheme;
        text?: string;
    };
    button?: CourierInboxButtonTheme;
};
export type CourierMenuItemTheme = {
    icon?: CourierInboxIconTheme;
    text?: string;
};
export type CourierActionMenuTheme = {
    button?: CourierInboxIconButtonTheme;
    markAllRead?: CourierMenuItemTheme;
    archiveAll?: CourierMenuItemTheme;
    archiveRead?: CourierMenuItemTheme;
    animation?: CourierInboxAnimationTheme;
    menu?: CourierInboxPopupTheme;
};
export type CourierInboxTabsBorderRadius = string | {
    topLeft?: string;
    topRight?: string;
    bottomLeft?: string;
    bottomRight?: string;
};
export type CourierInboxListScrollbarTheme = {
    trackBackgroundColor?: string;
    thumbColor?: string;
    thumbHoverColor?: string;
    width?: string;
    height?: string;
    borderRadius?: string;
};
export type CourierInboxTabsTheme = {
    borderRadius?: CourierInboxTabsBorderRadius;
    transition?: string;
    default?: {
        backgroundColor?: string;
        hoverBackgroundColor?: string;
        activeBackgroundColor?: string;
        font?: CourierInboxFontTheme;
        indicatorColor?: string;
        indicatorHeight?: string;
        unreadIndicator?: CourierInboxUnreadCountIndicatorTheme;
    };
    selected?: {
        backgroundColor?: string;
        hoverBackgroundColor?: string;
        activeBackgroundColor?: string;
        font?: CourierInboxFontTheme;
        indicatorColor?: string;
        indicatorHeight?: string;
        unreadIndicator?: CourierInboxUnreadCountIndicatorTheme;
    };
};
export type CourierInboxTheme = {
    popup?: {
        button?: CourierInboxMenuButtonTheme;
        window?: {
            backgroundColor?: string;
            borderRadius?: string;
            border?: string;
            shadow?: string;
            animation?: CourierInboxAnimationTheme;
        };
    };
    inbox?: {
        header?: {
            backgroundColor?: string;
            shadow?: string;
            border?: string;
            feeds?: {
                button?: {
                    selectedFeedIconColor?: string;
                    font?: CourierInboxFontTheme;
                    changeFeedIcon?: CourierIconTheme;
                    unreadCountIndicator?: CourierInboxUnreadCountIndicatorTheme;
                    hoverBackgroundColor?: string;
                    activeBackgroundColor?: string;
                    transition?: string;
                };
                menu?: CourierInboxPopupTheme;
                tabs?: CourierInboxTabsTheme;
            };
            tabs?: CourierInboxTabsTheme;
            actions?: CourierActionMenuTheme;
        };
        list?: {
            backgroundColor?: string;
            scrollbar?: CourierInboxListScrollbarTheme;
            item?: CourierInboxListItemTheme;
        };
        loading?: CourierInboxSkeletonLoadingStateTheme;
        empty?: CourierInboxInfoStateTheme;
        error?: CourierInboxInfoStateTheme;
    };
};
export declare const defaultLightTheme: CourierInboxTheme;
export declare const defaultDarkTheme: CourierInboxTheme;
export declare const mergeTheme: (mode: SystemThemeMode, theme: CourierInboxTheme) => CourierInboxTheme;