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

Inbox components for the Courier web UI

import { SystemThemeMode } from '@trycourier/courier-ui-core';
export type CourierInboxFontTheme = {
    family?: string;
    weight?: string;
    size?: string;
    color?: string;
};
export type CourierInboxIconTheme = {
    color?: string;
    svg?: string;
};
export type CourierInboxFilterItemTheme = {
    icon?: CourierInboxIconTheme;
    text?: string;
};
export type CourierInboxUnreadDotIndicatorTheme = {
    backgroundColor?: string;
    borderRadius?: string;
    height?: string;
    width?: string;
};
export type CourierInboxUnreadCountIndicatorTheme = {
    font?: CourierInboxFontTheme;
    backgroundColor?: string;
    borderRadius?: string;
    padding?: string;
};
export type CourierInboxIconButtonTheme = {
    icon?: CourierInboxIconTheme;
    backgroundColor?: string;
    hoverBackgroundColor?: string;
    activeBackgroundColor?: string;
};
export type CourierInboxButtonTheme = {
    font?: CourierInboxFontTheme;
    text?: string;
    shadow?: string;
    border?: string;
    borderRadius?: string;
    backgroundColor?: string;
    hoverBackgroundColor?: string;
    activeBackgroundColor?: string;
};
export type CourierInboxMenuButtonTheme = CourierInboxIconButtonTheme & {
    unreadDotIndicator?: CourierInboxUnreadDotIndicatorTheme;
};
export type CourierInboxPopupTheme = {
    backgroundColor?: string;
    border?: string;
    borderRadius?: string;
    shadow?: string;
    list?: {
        font?: CourierInboxFontTheme;
        selectionIcon?: CourierInboxIconTheme;
        hoverBackgroundColor?: string;
        activeBackgroundColor?: string;
        divider?: string;
    };
};
export type CourierInboxListItemTheme = {
    unreadIndicatorColor?: string;
    backgroundColor?: string;
    hoverBackgroundColor?: string;
    activeBackgroundColor?: string;
    title?: CourierInboxFontTheme;
    subtitle?: CourierInboxFontTheme;
    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;
        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 CourierFilterMenuTheme = {
    button?: CourierInboxIconButtonTheme;
    inbox?: CourierMenuItemTheme;
    archive?: CourierMenuItemTheme;
};
export type CourierActionMenuTheme = {
    button?: CourierInboxIconButtonTheme;
    markAllRead?: CourierMenuItemTheme;
    archiveAll?: CourierMenuItemTheme;
    archiveRead?: CourierMenuItemTheme;
};
export type CourierInboxTheme = {
    popup?: {
        button?: CourierInboxMenuButtonTheme;
        window?: {
            backgroundColor?: string;
            borderRadius?: string;
            border?: string;
            shadow?: string;
        };
    };
    inbox?: {
        header?: {
            backgroundColor?: string;
            shadow?: string;
            filters?: {
                font?: CourierInboxFontTheme;
                inbox?: CourierInboxFilterItemTheme;
                archive?: CourierInboxFilterItemTheme;
                unreadIndicator?: CourierInboxUnreadCountIndicatorTheme;
            };
            menus?: {
                popup?: CourierInboxPopupTheme;
                filters?: CourierFilterMenuTheme;
                actions?: CourierActionMenuTheme;
            };
        };
        list?: {
            backgroundColor?: string;
            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;