207 lines
8.1 KiB
TypeScript
207 lines
8.1 KiB
TypeScript
import { cn } from "@/lib/utils"
|
|
|
|
/** Fond page contacts : canvas mail (#fafbfc / #202124), pas le noir `background`. */
|
|
export const CONTACTS_SHELL_CLASS = "bg-app-canvas text-foreground"
|
|
|
|
export const CONTACTS_SIDEBAR_CLASS = cn(
|
|
"flex h-full w-60 shrink-0 flex-col border-r border-border bg-mail-surface",
|
|
"transition-transform duration-200 ease-out"
|
|
)
|
|
|
|
export const CONTACTS_CREATE_BTN_CLASS = cn(
|
|
"flex h-14 w-full items-center gap-3 rounded-2xl bg-mail-surface px-4",
|
|
"shadow-md ring-1 ring-border transition-shadow hover:bg-accent hover:shadow-lg"
|
|
)
|
|
|
|
export const CONTACTS_NAV_ACTIVE_CLASS =
|
|
"bg-mail-nav-selected font-medium text-mail-nav-selected"
|
|
|
|
export const CONTACTS_NAV_ITEM_CLASS =
|
|
"text-foreground hover:bg-mail-nav-hover"
|
|
|
|
export const CONTACTS_NAV_ICON_MUTED = "text-muted-foreground"
|
|
|
|
export const CONTACTS_MUTED_TEXT = "text-muted-foreground"
|
|
|
|
export const CONTACTS_HEADING_TEXT = "text-foreground"
|
|
|
|
export const CONTACTS_SEARCH_BAR_CLASS = cn(
|
|
"flex h-10 w-full max-w-[720px] items-center gap-2 rounded-full border border-transparent bg-muted px-3",
|
|
"transition-[background-color,border-color,box-shadow]",
|
|
"focus-within:border-ring focus-within:bg-mail-surface focus-within:ring-1 focus-within:ring-ring sm:h-12 sm:gap-3 sm:px-4",
|
|
)
|
|
|
|
export const CONTACTS_SEARCH_INPUT_CLASS =
|
|
"flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
|
|
|
|
export const CONTACTS_ICON_BTN_CLASS =
|
|
"text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
|
|
export const CONTACTS_TABLE_HEADER_CLASS =
|
|
"grid gap-2 border-b border-border py-2 text-xs font-medium text-muted-foreground"
|
|
|
|
export const CONTACTS_TABLE_ROW_CLASS = cn(
|
|
"grid w-full cursor-pointer items-center gap-2 border-b border-border py-2.5 text-left text-sm",
|
|
"text-foreground transition-colors hover:bg-accent/50"
|
|
)
|
|
|
|
export const CONTACTS_FIELD_CLASS = cn(
|
|
"rounded border border-mail-border bg-mail-surface px-2 py-1 text-sm text-foreground outline-none",
|
|
"focus:border-ring focus:ring-1 focus:ring-ring"
|
|
)
|
|
|
|
export const CONTACTS_PRIMARY_BTN_CLASS = cn(
|
|
"rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
|
|
)
|
|
|
|
export const CONTACTS_OUTLINE_BTN_CLASS = cn(
|
|
"inline-flex h-9 items-center gap-2 rounded-full border border-border bg-mail-surface px-5",
|
|
"text-sm font-medium text-foreground transition-colors hover:bg-accent"
|
|
)
|
|
|
|
/** Volet contacts (Sheet latéral dans la messagerie) */
|
|
export const CONTACTS_PANEL_SHELL_CLASS =
|
|
"flex h-full flex-col bg-mail-surface text-foreground"
|
|
|
|
export const CONTACTS_PANEL_HEADER_CLASS =
|
|
"flex h-12 shrink-0 items-center justify-between border-b border-border px-4"
|
|
|
|
export const CONTACTS_PANEL_HEADER_COMPACT_CLASS =
|
|
"flex h-12 shrink-0 items-center justify-between border-b border-border px-2"
|
|
|
|
export const CONTACTS_PANEL_HEADER_SEARCH_CLASS =
|
|
"flex h-12 shrink-0 items-center gap-2 border-b border-border px-4"
|
|
|
|
export const CONTACTS_PANEL_TITLE_CLASS = "text-lg font-medium text-foreground"
|
|
|
|
export const CONTACTS_PANEL_ICON_BTN_CLASS =
|
|
"h-8 w-8 rounded-full text-muted-foreground"
|
|
|
|
export const CONTACTS_PANEL_SECTION_LABEL_CLASS =
|
|
"px-4 py-2 text-xs font-medium text-muted-foreground"
|
|
|
|
export const CONTACTS_PANEL_LETTER_CLASS =
|
|
"px-4 py-1 text-xs font-medium uppercase text-muted-foreground"
|
|
|
|
export const CONTACTS_PANEL_ROW_CLASS =
|
|
"hover:bg-accent cursor-pointer"
|
|
|
|
export const CONTACTS_PANEL_CREATE_ROW_CLASS = cn(
|
|
"flex w-full items-center gap-3 px-4 h-12",
|
|
CONTACTS_PANEL_ROW_CLASS
|
|
)
|
|
|
|
export const CONTACTS_PANEL_LINK_TEXT_CLASS = "text-sm font-medium text-primary"
|
|
|
|
export const CONTACTS_PANEL_SEARCH_INPUT_CLASS = cn(
|
|
"flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_SAVE_BTN_CLASS = cn(
|
|
"rounded-full bg-muted px-5 h-9 text-sm font-medium text-foreground",
|
|
"hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_TAG_CLASS = cn(
|
|
"inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2.5 py-0.5 text-xs text-foreground"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_ADD_TAG_BTN_CLASS = cn(
|
|
"inline-flex items-center gap-1 rounded-full border border-border px-2.5 py-0.5 text-xs text-muted-foreground hover:bg-accent"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_AVATAR_PLACEHOLDER_CLASS =
|
|
"flex h-20 w-20 items-center justify-center rounded-full bg-muted text-muted-foreground"
|
|
|
|
export const CONTACTS_PANEL_CARD_CLASS = "space-y-2 rounded-lg border border-mail-border p-3"
|
|
|
|
export const CONTACTS_PANEL_DIVIDER_CLASS = "border-t border-border"
|
|
|
|
export const CONTACTS_PANEL_MUTED_ICON_CLASS = "text-muted-foreground"
|
|
|
|
export const CONTACTS_PANEL_PRIMARY_ACTION_CLASS = cn(
|
|
"inline-flex h-9 items-center gap-2 rounded-full bg-primary/15 px-5 text-sm font-medium text-primary",
|
|
"transition-colors hover:bg-primary/25"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_SECONDARY_ICON_BTN_CLASS = cn(
|
|
"flex h-9 w-9 items-center justify-center rounded-full border border-border text-muted-foreground hover:bg-accent"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_FLOATING_INPUT_CLASS = cn(
|
|
"peer h-[42px] w-full rounded border border-mail-border bg-mail-surface px-3 pt-4 pb-1 text-sm text-foreground outline-none transition-colors",
|
|
"focus:border-ring focus:ring-1 focus:ring-ring"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_FLOATING_TEXTAREA_CLASS = cn(
|
|
"peer w-full rounded border border-mail-border bg-mail-surface px-3 pt-5 pb-2 text-sm text-foreground outline-none transition-colors resize-none",
|
|
"focus:border-ring focus:ring-1 focus:ring-ring"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_FLOATING_LABEL_CLASS =
|
|
"pointer-events-none absolute left-3 bg-mail-surface transition-all duration-150"
|
|
|
|
export const CONTACTS_PANEL_SELECT_TRIGGER_CLASS = cn(
|
|
"!h-[42px] !min-h-[42px] w-full rounded border border-mail-border bg-mail-surface px-3 py-0 text-sm text-foreground shadow-none",
|
|
"data-[size=default]:!h-[42px] focus:border-ring focus:ring-1 focus:ring-ring"
|
|
)
|
|
|
|
export const CONTACTS_PANEL_POPOVER_ITEM_CLASS =
|
|
"flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
|
|
|
|
/** Page /contacts (plein écran) */
|
|
export const CONTACTS_PAGE_ICON_BTN_CLASS =
|
|
"h-10 w-10 rounded-full text-muted-foreground"
|
|
|
|
export const CONTACTS_PAGE_SAVE_BTN_CLASS = cn(
|
|
CONTACTS_PANEL_SAVE_BTN_CLASS,
|
|
"px-6 py-2.5",
|
|
)
|
|
|
|
export const CONTACTS_PAGE_TITLE_CLASS = "text-2xl font-normal text-foreground"
|
|
|
|
export const CONTACTS_PAGE_SECTION_TITLE_CLASS = "text-lg font-normal text-foreground"
|
|
|
|
export const CONTACTS_PAGE_HEADING_CLASS = cn("font-normal", CONTACTS_HEADING_TEXT)
|
|
|
|
export const CONTACTS_PAGE_CARD_CLASS = "rounded-xl border border-border p-5"
|
|
|
|
export const CONTACTS_PAGE_CARD_INNER_DIVIDER_CLASS = "mt-3 border-t border-border pt-3"
|
|
|
|
export const CONTACTS_PAGE_LINK_BTN_CLASS =
|
|
"text-sm font-medium text-primary hover:text-primary/80"
|
|
|
|
export const CONTACTS_PAGE_AVATAR_PLACEHOLDER_LARGE_CLASS =
|
|
"flex h-28 w-28 items-center justify-center rounded-full bg-muted text-muted-foreground"
|
|
|
|
export const CONTACTS_PAGE_AVATAR_ADD_BADGE_CLASS =
|
|
"absolute -bottom-1 -right-1 flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground shadow"
|
|
|
|
export const CONTACTS_PAGE_TAG_CLASS = cn(
|
|
"inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-xs text-foreground",
|
|
)
|
|
|
|
export const CONTACTS_PAGE_BANNER_CLASS =
|
|
"mb-4 flex items-center justify-between rounded-lg bg-muted px-4 py-3"
|
|
|
|
export const CONTACTS_PAGE_INFO_BANNER_CLASS =
|
|
"mb-6 flex items-start gap-4 rounded-xl bg-muted p-5"
|
|
|
|
export const CONTACTS_PAGE_INFO_BANNER_ICON_CLASS =
|
|
"flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary/15"
|
|
|
|
export const CONTACTS_PAGE_TAB_ACTIVE_CLASS =
|
|
"rounded-full bg-primary/20 px-4 py-2 text-sm font-medium text-foreground"
|
|
|
|
export const CONTACTS_PAGE_TAB_INACTIVE_CLASS = cn(
|
|
"rounded-full bg-muted px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent",
|
|
)
|
|
|
|
export const CONTACTS_PAGE_TEXTAREA_CLASS = cn(
|
|
CONTACTS_FIELD_CLASS,
|
|
"h-24 w-full rounded-lg px-3 py-2",
|
|
)
|
|
|
|
export const CONTACTS_CREATE_BTN_LABEL_CLASS =
|
|
"flex-1 text-left text-sm font-medium text-foreground"
|