File size: 3,560 Bytes
a070805 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | import { cn } from "#/utils/utils";
import { formControlShellClassName } from "#/utils/form-control-classes";
/** Snap hover colors instantly — no transition-colors delay on menus/dropdowns. */
export const dropdownInstantColorClassName = "transition-none";
/** 2px vertical gap between rows in a dropdown/context menu list. */
export const dropdownMenuListGapClassName = "gap-0.5";
/** Standard horizontal gap between a row icon and its label. */
export const dropdownMenuRowGapClassName = "gap-2";
/** Flex column shell for a dropdown menu item list. */
export const dropdownMenuListClassName = cn(
"flex flex-col",
dropdownMenuListGapClassName,
);
/** Combobox/select trigger shell with instant hover colors. */
export const dropdownTriggerShellClassName = cn(
"bg-tertiary border border-[var(--oh-border-input)] rounded p-2",
"flex items-center gap-2",
formControlShellClassName,
dropdownInstantColorClassName,
"group w-full gap-2 px-3 text-[var(--oh-muted)] hover:text-white",
);
/** Standard white-label menu row. */
export const dropdownMenuRowClassName = cn(
"group flex w-full cursor-pointer items-center rounded px-2 py-2 text-left text-sm font-normal text-white",
dropdownMenuRowGapClassName,
"hover:bg-[var(--oh-interactive-hover)] disabled:cursor-not-allowed disabled:opacity-60",
dropdownInstantColorClassName,
);
/** Menu row using foreground token (context menus). */
export const dropdownMenuRowForegroundClassName = cn(
"group flex w-full cursor-pointer items-center rounded px-2 py-2 text-start text-sm font-normal",
dropdownMenuRowGapClassName,
"text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]",
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
dropdownInstantColorClassName,
);
/** Icon inside a menu row — muted until row hover/focus. */
export const dropdownMenuRowIconClassName = cn(
"shrink-0 text-[var(--oh-muted)] group-hover:text-white group-focus-visible:text-white",
dropdownInstantColorClassName,
);
/** Wrapper for SVG/React icon nodes inside a menu row. */
export const dropdownMenuRowIconWrapperClassName = cn(
"flex size-4 shrink-0 items-center justify-center [&_svg]:text-current",
dropdownMenuRowIconClassName,
);
/** Enum/filter dropdown trigger chip. */
export const dropdownFilterTriggerClassName = cn(
"inline-flex cursor-pointer items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium",
"border-[var(--oh-border)] bg-base-secondary text-white",
"focus-visible:border-white/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20",
dropdownInstantColorClassName,
);
/**
* Scroll cap for the switch-profile menu: four two-line rows
* (p-2 + leading-5 title + gap-0.5 + leading-4 subtitle) plus list gaps.
*/
export const switchProfileMenuListScrollClassName = cn(
dropdownMenuListClassName,
"overflow-y-auto custom-scrollbar-always",
"max-h-[13.875rem]",
);
/**
* Tall sidebar/context menus: cap height to the viewport and scroll with the
* custom scrollbar when content overflows (no scrollbar when everything fits).
*/
export const dropdownMenuViewportScrollClassName = cn(
"overflow-y-auto custom-scrollbar",
"max-h-[min(60vh,calc(100dvh-5rem))]",
);
/** Footer action row inside a dropdown panel. */
export const dropdownFooterActionClassName = cn(
"group flex w-full items-center rounded-md px-2 py-2 text-sm font-normal text-white",
dropdownMenuRowGapClassName,
"hover:bg-[var(--oh-interactive-hover)]",
dropdownInstantColorClassName,
);
|