/* Theme Milkdown Crepe to the app's design tokens so it follows light/dark. * Crepe's theme is a palette driven by --crepe-* custom properties; we map * those onto our CSS variables (globals.css) so the editor (and the read-only * display, which uses the same engine) inherits the active theme and sits on * top of the existing card instead of painting its own opaque background. * * The floating menus (slash menu, selection toolbar, link tooltip) are portaled * to , OUTSIDE .milkdown — so the variables must be declared on those * selectors too, otherwise they fall back to transparent and the menu is * unreadable over the content behind it. Our tokens resolve against the * :root/.dark cascade on , so the portaled menus stay themed too. */ .llink-crepe .milkdown, .milkdown-slash-menu, .milkdown-toolbar, .milkdown-link-edit, .milkdown-link-preview, .milkdown-block-handle { --crepe-color-background: transparent; --crepe-color-on-background: var(--card-foreground); /* Surface backs code blocks, tables, and the floating menus — use an opaque * themed surface so menus read clearly over content. */ --crepe-color-surface: var(--popover); --crepe-color-surface-low: var(--muted); --crepe-color-on-surface: var(--popover-foreground); --crepe-color-on-surface-variant: var(--muted-foreground); --crepe-color-outline: var(--border); --crepe-color-primary: var(--primary); --crepe-color-secondary: color-mix(in oklch, var(--primary) 22%, transparent); --crepe-color-on-secondary: var(--foreground); --crepe-color-inverse: var(--foreground); --crepe-color-on-inverse: var(--background); --crepe-color-inline-code: var(--primary); --crepe-color-inline-area: var(--muted); --crepe-color-error: var(--destructive); --crepe-color-hover: var(--accent); --crepe-color-selected: color-mix(in oklch, var(--primary) 22%, transparent); /* frame-dark ships white "glow" shadows that vanish on light surfaces; * use a conventional dark drop shadow so floating menus lift in both themes. */ --crepe-shadow-1: 0px 1px 2px 0px rgb(0 0 0 / 0.12), 0px 1px 3px 1px rgb(0 0 0 / 0.08); --crepe-shadow-2: 0px 1px 2px 0px rgb(0 0 0 / 0.16), 0px 2px 6px 2px rgb(0 0 0 / 0.12); /* Use the application font, not Crepe's bundled Noto Sans / Noto Serif. */ --crepe-font-default: inherit; --crepe-font-title: inherit; --crepe-font-code: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; } /* Glassy floating menus over content. */ .milkdown-slash-menu, .milkdown-toolbar, .milkdown-link-edit, .milkdown-link-preview { backdrop-filter: blur(12px); } .llink-crepe .milkdown { background: transparent; box-shadow: none; } .llink-crepe .milkdown .ProseMirror { padding: 0; outline: none; caret-color: var(--foreground); } /* Crepe's default heading scale (42px h1) is sized for a document editor; * tighten it to message-card proportions. Applies to compose and read-only * alike so the editing view matches the posted card. */ .llink-crepe .milkdown .ProseMirror h1 { font-size: 1.875rem; line-height: 2.375rem; font-weight: 600; margin-top: 24px; } .llink-crepe .milkdown .ProseMirror h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; margin-top: 20px; } .llink-crepe .milkdown .ProseMirror h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; margin-top: 16px; } .llink-crepe .milkdown .ProseMirror h4 { font-size: 1.125rem; line-height: 1.625rem; font-weight: 600; margin-top: 12px; } .llink-crepe .milkdown .ProseMirror h5 { font-size: 1rem; line-height: 1.5rem; font-weight: 600; margin-top: 12px; } .llink-crepe .milkdown .ProseMirror h6 { font-size: 0.875rem; line-height: 1.375rem; font-weight: 700; margin-top: 12px; color: var(--muted-foreground); } .llink-crepe .milkdown .ProseMirror > :first-child { margin-top: 0; } /* Image *links* render through the base commonmark schema (the ImageBlock * feature is off — see markdown-editor.tsx). Keep them within the content * column and softly rounded. */ .llink-crepe .milkdown .ProseMirror img { max-width: 100%; max-height: 420px; border-radius: 8px; } /* Editing context: fill the compose card and scroll internally so a long * message stays inside the card rather than growing the whole overlay. */ .llink-crepe--fill, .llink-crepe--fill .milkdown { height: 100%; } .llink-crepe--fill .milkdown { overflow-y: auto; } /* Pad the content (not the card) so the slash menu — which Crepe appends to * .milkdown — can use the full card width/height before clipping. The shared * layout variables (globals.css) keep the editor's content column identical * to the posted card's, and the gutter fits the block drag handle. */ .llink-crepe--fill .milkdown .ProseMirror { min-height: 100%; padding: var(--message-card-padding) var(--message-editor-gutter); }