@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 CourierInboxFont = {
    family?: string;
    weight?: string;
    size?: string;
    color?: string;
};
export type CourierInboxIcon = {
    color?: string;
    svg?: string;
};
export type CourierInboxFilterItem = {
    icon?: CourierInboxIcon;
    text?: string;
};
export type CourierInboxUnreadIndicator = {
    font?: CourierInboxFont;
    backgroundColor?: string;
    borderRadius?: string;
};
export type CourierInboxIconButton = {
    icon?: CourierInboxIcon;
    backgroundColor?: string;
    hoverBackgroundColor?: string;
    activeBackgroundColor?: string;
};
export type CourierInboxButton = {
    font?: CourierInboxFont;
    text?: string;
    shadow?: string;
    border?: string;
    borderRadius?: string;
    backgroundColor?: string;
    hoverBackgroundColor?: string;
    activeBackgroundColor?: string;
};
export type CourierInboxMenuButton = CourierInboxIconButton & {
    unreadIndicator?: CourierInboxUnreadIndicator;
};
export type CourierInboxPopup = {
    backgroundColor?: string;
    border?: string;
    borderRadius?: string;
    shadow?: string;
    list?: {
        font?: CourierInboxFont;
        selectionIcon?: CourierInboxIcon;
        hoverBackgroundColor?: string;
        activeBackgroundColor?: string;
        divider?: string;
    };
};
export type CourierInboxListItem = {
    unreadIndicatorColor?: string;
    backgroundColor?: string;
    hoverBackgroundColor?: string;
    activeBackgroundColor?: string;
    title?: CourierInboxFont;
    subtitle?: CourierInboxFont;
    time?: CourierInboxFont;
    archiveIcon?: CourierInboxIcon;
    divider?: string;
    actions?: {
        backgroundColor?: string;
        hoverBackgroundColor?: string;
        activeBackgroundColor?: string;
        border?: string;
        borderRadius?: string;
        shadow?: string;
        font?: CourierInboxFont;
    };
    menu?: {
        enabled?: boolean;
        backgroundColor?: string;
        border?: string;
        borderRadius?: string;
        shadow?: string;
        longPress?: {
            displayDuration?: number;
            vibrationDuration?: number;
        };
        item?: {
            hoverBackgroundColor?: string;
            activeBackgroundColor?: string;
            borderRadius?: string;
            read?: CourierInboxIcon;
            unread?: CourierInboxIcon;
            archive?: CourierInboxIcon;
            unarchive?: CourierInboxIcon;
        };
    };
};
export type CourierInboxSkeletonLoadingState = {
    animation?: {
        barColor?: string;
        barHeight?: string;
        barBorderRadius?: string;
        duration?: string;
    };
    divider?: string;
};
export type CourierInboxInfoState = {
    title?: {
        font?: CourierInboxFont;
        text?: string;
    };
    button?: CourierInboxButton;
};
export type CourierMenuItem = {
    icon?: CourierInboxIcon;
    text?: string;
};
export type CourierFilterMenu = {
    button?: CourierInboxIconButton;
    inbox?: CourierMenuItem;
    archive?: CourierMenuItem;
};
export type CourierActionMenu = {
    button?: CourierInboxIconButton;
    markAllRead?: CourierMenuItem;
    archiveAll?: CourierMenuItem;
    archiveRead?: CourierMenuItem;
};
export type CourierInboxTheme = {
    popup?: {
        button?: CourierInboxMenuButton;
        window?: {
            backgroundColor?: string;
            borderRadius?: string;
            border?: string;
            shadow?: string;
        };
    };
    inbox?: {
        header?: {
            backgroundColor?: string;
            shadow?: string;
            filters?: {
                font?: CourierInboxFont;
                inbox?: CourierInboxFilterItem;
                archive?: CourierInboxFilterItem;
                unreadIndicator?: CourierInboxUnreadIndicator;
            };
            menus?: {
                popup?: CourierInboxPopup;
                filters?: CourierFilterMenu;
                actions?: CourierActionMenu;
            };
        };
        list?: {
            backgroundColor?: string;
            item?: CourierInboxListItem;
        };
        loading?: CourierInboxSkeletonLoadingState;
        empty?: CourierInboxInfoState;
        error?: CourierInboxInfoState;
    };
};
export declare const defaultLightTheme: CourierInboxTheme;
export declare const defaultDarkTheme: CourierInboxTheme;
export declare const mergeTheme: (mode: SystemThemeMode, theme: CourierInboxTheme) => CourierInboxTheme;