The Coline design system: accessible React components for Coline Apps, themed live by the host workspace, and for Coline Sites in light and dark. Tailwind v4 stylesheet included. MIT.
| * {@link ContextMenuContent}, {@link SelectContent} and {@link TooltipContent}. |
| 6 | * |
| 7 | * Light menus ride the --popover token; dark menus go deeper than the theme |
| 8 | * overlay (#141417) so they sit below the interface, not at card level. |
| 9 | * Crisp hairline edge and deep, diffuse shadows. No translucency, no blur, |
| 10 | * no inset lighting. Hover state lives in the flat sliding pill |
| 11 | * (see menu-highlight). |
| 12 | */ |
| 13 | export const liquidMenuSurfaceClasses = |
| 14 | "rounded-2xl bg-popover/75 dark:bg-zinc-900/75 backdrop-blur-[3px] border border-black/[0.08] text-popover-foreground" + |
| 15 | " shadow-[0_4px_16px_-4px_rgba(0,0,0,0.08),0_16px_48px_-12px_rgba(0,0,0,0.28)]" + |
| 16 | " dark:border-white/[0.09] dark:bg-[#141417]" + |
| 17 | " dark:shadow-[0_4px_16px_-4px_rgba(0,0,0,0.4),0_16px_48px_-12px_rgba(0,0,0,0.7)]"; |
| 18 |
| 19 | /** The menu surface, or Liquid Glass with nothing painted over it. */ |
| 20 | export function menuSurfaceClasses(liquid: boolean) { |
| 21 | return liquid ? `rounded-2xl text-popover-foreground ${LIQUID_GLASS_SURFACE}` : liquidMenuSurfaceClasses; |
| 22 | } |
| 23 |