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.
| 4 | * |
| 5 | * Light menus ride the --popover token; dark menus go deeper than the theme |
| 6 | * overlay (#141417) so they sit below the interface, not at card level. |
| 7 | * Crisp hairline edge and deep, diffuse shadows. No translucency, no blur, |
| 8 | * no inset lighting. Hover state lives in the flat sliding pill |
| 9 | * (see menu-highlight). |
| 10 | */ |
| 11 | export const liquidMenuSurfaceClasses = |
| 12 | "rounded-2xl bg-popover/75 dark:bg-zinc-900/75 backdrop-blur-[3px] border border-black/[0.08] text-popover-foreground" + |
| 13 | " shadow-[0_4px_16px_-4px_rgba(0,0,0,0.08),0_16px_48px_-12px_rgba(0,0,0,0.28)]" + |
| 14 | " dark:border-white/[0.09] dark:bg-[#141417]" + |
| 15 | " dark:shadow-[0_4px_16px_-4px_rgba(0,0,0,0.4),0_16px_48px_-12px_rgba(0,0,0,0.7)]"; |
| 16 |