160 lines
7.3 KiB
TypeScript
160 lines
7.3 KiB
TypeScript
import { cn } from "@/lib/utils"
|
||
|
||
/** Menu déroulant / contextuel Gmail (portail Radix → tokens shadcn). */
|
||
export const MAIL_MENU_SURFACE_CLASS = cn(
|
||
"min-w-[220px] rounded-lg border border-border bg-popover p-0 py-1 text-popover-foreground shadow-lg",
|
||
"[&_[data-slot=dropdown-menu-item]]:gap-3 [&_[data-slot=dropdown-menu-item]]:rounded-none",
|
||
"[&_[data-slot=dropdown-menu-item]]:px-3 [&_[data-slot=dropdown-menu-item]]:py-2 [&_[data-slot=dropdown-menu-item]]:text-sm",
|
||
"[&_[data-slot=dropdown-menu-item]]:focus:bg-accent [&_[data-slot=dropdown-menu-item]]:focus:text-accent-foreground",
|
||
"[&_[data-slot=dropdown-menu-sub-trigger]]:gap-3 [&_[data-slot=dropdown-menu-sub-trigger]]:rounded-none",
|
||
"[&_[data-slot=dropdown-menu-sub-trigger]]:px-3 [&_[data-slot=dropdown-menu-sub-trigger]]:py-2",
|
||
"[&_[data-slot=dropdown-menu-sub-trigger]]:text-sm",
|
||
"[&_[data-slot=dropdown-menu-sub-trigger]]:focus:bg-accent",
|
||
"[&_[data-slot=dropdown-menu-sub-trigger]]:data-[state=open]:bg-accent",
|
||
"[&_[data-slot=dropdown-menu-sub-content]]:min-w-[200px]",
|
||
"[&_[data-slot=dropdown-menu-sub-content]]:rounded-lg",
|
||
"[&_[data-slot=dropdown-menu-sub-content]]:border [&_[data-slot=dropdown-menu-sub-content]]:border-border",
|
||
"[&_[data-slot=dropdown-menu-sub-content]]:bg-popover",
|
||
"[&_[data-slot=dropdown-menu-sub-content]]:p-0 [&_[data-slot=dropdown-menu-sub-content]]:py-1",
|
||
"[&_[data-slot=dropdown-menu-sub-content]]:shadow-lg",
|
||
"[&_[data-slot=dropdown-menu-separator]]:mx-0 [&_[data-slot=dropdown-menu-separator]]:my-1",
|
||
"[&_[data-slot=dropdown-menu-separator]]:bg-border",
|
||
"[&_[data-slot=context-menu-item]]:focus:bg-accent [&_[data-slot=context-menu-item]]:focus:text-accent-foreground",
|
||
"[&_[data-slot=context-menu-sub-trigger]]:focus:bg-accent",
|
||
"[&_[data-slot=context-menu-sub-content]]:border-border [&_[data-slot=context-menu-sub-content]]:bg-popover"
|
||
)
|
||
|
||
export const MAIL_MENU_SURFACE_WIDE_CLASS = cn(
|
||
MAIL_MENU_SURFACE_CLASS,
|
||
"min-w-[280px]"
|
||
)
|
||
|
||
export const MAIL_SIDEBAR_MENU_SURFACE_CLASS = cn(
|
||
"min-w-[240px] border-border bg-popover p-0 py-1.5 text-popover-foreground shadow-md",
|
||
"[&_[data-slot=dropdown-menu-label]]:text-muted-foreground",
|
||
"[&_[data-slot=dropdown-menu-item]]:text-popover-foreground",
|
||
"[&_[data-slot=dropdown-menu-item]]:focus:bg-accent [&_[data-slot=dropdown-menu-item]]:focus:text-accent-foreground",
|
||
"[&_[data-slot=dropdown-menu-sub-trigger]]:text-popover-foreground",
|
||
"[&_[data-slot=dropdown-menu-sub-trigger]]:focus:bg-accent",
|
||
"[&_[data-slot=dropdown-menu-sub-trigger]]:data-[state=open]:bg-accent",
|
||
"[&_[data-slot=context-menu-label]]:text-muted-foreground",
|
||
"[&_[data-slot=context-menu-item]]:text-popover-foreground",
|
||
"[&_[data-slot=context-menu-item]]:focus:bg-accent [&_[data-slot=context-menu-item]]:focus:text-accent-foreground",
|
||
"[&_[data-slot=context-menu-sub-trigger]]:text-popover-foreground",
|
||
"[&_[data-slot=context-menu-sub-trigger]]:focus:bg-accent",
|
||
"[&_[data-slot=context-menu-sub-trigger]]:data-[state=open]:bg-accent"
|
||
)
|
||
|
||
export const MAIL_SIDEBAR_MENU_ITEM_CLASS = cn(
|
||
"mx-1 flex cursor-pointer items-center justify-between gap-3 px-3 py-2 text-sm text-popover-foreground",
|
||
"focus:bg-accent focus:text-accent-foreground"
|
||
)
|
||
|
||
export const MAIL_SIDEBAR_MENU_SUB_TRIGGER_CLASS = cn(
|
||
"mx-1 cursor-pointer rounded-sm px-2 py-2 text-popover-foreground",
|
||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent"
|
||
)
|
||
|
||
export const MAIL_SIDEBAR_MENU_PLAIN_ITEM_CLASS = cn(
|
||
"mx-1 cursor-pointer px-3 py-2 text-sm text-popover-foreground focus:bg-accent focus:text-accent-foreground"
|
||
)
|
||
|
||
export const MAIL_SIDEBAR_MENU_SEPARATOR_CLASS = "my-1.5 bg-border"
|
||
|
||
export const MAIL_SIDEBAR_COLOR_SWATCH_RING_CLASS =
|
||
"border-border bg-mail-surface ring-offset-background hover:ring-muted-foreground focus-visible:ring-ring"
|
||
|
||
export const MAIL_SIDEBAR_COLOR_PICKER_CLASS = cn(
|
||
"min-w-[180px] border-border bg-popover p-2 text-popover-foreground shadow-md"
|
||
)
|
||
|
||
export const MAIL_ICON_BTN =
|
||
"text-muted-foreground hover:bg-accent hover:text-accent-foreground"
|
||
|
||
/** Panneaux header (favoris, comptes) — gris mail, pas le noir `popover`. */
|
||
export const MAIL_HEADER_DROPDOWN_CLASS = cn(
|
||
"border border-border bg-mail-surface-elevated text-foreground shadow-xl",
|
||
)
|
||
|
||
export const MAIL_TOOLBAR_ICON_BTN = cn(
|
||
"h-9 w-9 shrink-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
|
||
)
|
||
|
||
/** Onglets catégorie boîte — libellés / icônes blancs en dark ; le soulignement garde la couleur d’accent. */
|
||
export const MAIL_INBOX_CATEGORY_TAB_CONTENT_DARK_CLASS = "dark:!text-white"
|
||
|
||
export const MAIL_PREVIEW_SCROLL_CLASS =
|
||
"min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-y-contain outline-none max-sm:pb-16 " +
|
||
"[scrollbar-color:color-mix(in_srgb,var(--muted-foreground)_55%,transparent)_transparent] [scrollbar-width:auto] " +
|
||
"[&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/45"
|
||
|
||
export const MAIL_REPLY_BAR_CLASS =
|
||
"bg-gradient-to-b from-transparent via-mail-surface/90 to-mail-surface pt-3"
|
||
|
||
export const MAIL_REPLY_BUTTON_CLASS = cn(
|
||
"inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-full border border-border",
|
||
"bg-mail-surface px-6 py-2.5 text-sm font-medium text-foreground shadow-sm",
|
||
"transition-shadow hover:bg-accent hover:shadow-md"
|
||
)
|
||
|
||
export const MAIL_INVITATION_CARD_CLASS = cn(
|
||
"mx-6 mb-4 rounded-xl border border-border bg-mail-invitation px-4 py-3 shadow-sm"
|
||
)
|
||
|
||
export const MAIL_MESSAGE_HOVER_CLASS = "hover:bg-accent/60"
|
||
|
||
export const MAIL_COMPOSE_TITLEBAR_CLASS = cn(
|
||
"flex h-10 shrink-0 cursor-pointer items-center rounded-t-lg bg-muted px-3",
|
||
"dark:bg-[#2d2e30]"
|
||
)
|
||
|
||
export const MAIL_COMPOSE_POPOVER_CLASS = cn(
|
||
"border-border bg-popover p-3 text-popover-foreground shadow-lg"
|
||
)
|
||
|
||
export const MAIL_COMPOSE_MENU_SELECTED_CLASS = "bg-accent text-accent-foreground"
|
||
|
||
/** Bouton pilule xs (barres flottantes liste / lecture). */
|
||
export const XS_FLOATING_CONTROL_BTN = cn(
|
||
"pointer-events-auto size-9 shrink-0 rounded-full border border-border",
|
||
"bg-mail-surface/80 text-muted-foreground shadow-md backdrop-blur",
|
||
"hover:bg-accent hover:text-accent-foreground"
|
||
)
|
||
|
||
/** Barre overlay xs : pas de fond opaque, contrôles flottants seulement. */
|
||
export const XS_FLOATING_CHROME_BAR =
|
||
"pointer-events-none absolute inset-x-0 top-0 z-20 flex items-center gap-2 px-3 pt-2 sm:hidden"
|
||
|
||
export const MAIL_TOOLTIP_CONTENT_CLASS =
|
||
"border border-border bg-popover text-popover-foreground shadow-md"
|
||
|
||
/** En-tête sujet : pas de fond propre (aligné sur le panneau). */
|
||
export const MAIL_PREVIEW_SUBJECT_HEADER_CLASS = ""
|
||
|
||
export const MAIL_TOAST_SURFACE_CLASS = cn(
|
||
"relative box-border w-full max-w-full overflow-hidden rounded-xl border border-border",
|
||
"bg-mail-surface text-foreground shadow-md ring-1 ring-primary/15"
|
||
)
|
||
|
||
export function mailNavRowClass(opts: {
|
||
isSelected: boolean
|
||
isOver?: boolean
|
||
rowHoverHeld?: boolean
|
||
hasUnread?: boolean
|
||
extra?: string
|
||
}) {
|
||
return cn(
|
||
"transition-colors",
|
||
opts.isSelected
|
||
? "bg-mail-nav-selected text-mail-nav-selected font-medium"
|
||
: opts.isOver
|
||
? "bg-mail-nav-drop text-foreground"
|
||
: opts.rowHoverHeld
|
||
? "bg-mail-nav-hover text-foreground"
|
||
: opts.hasUnread
|
||
? "text-foreground hover:bg-mail-nav-hover"
|
||
: "text-muted-foreground hover:bg-mail-nav-hover",
|
||
opts.extra
|
||
)
|
||
}
|