FlowyLabs/llink
1
0
Fork 0
Code Issues 71 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add warm sand theme colors and light / dark mode toggle (#302)

Browse Source
This commit was merged in pull request #302.
This commit is contained in:
Arjun Patel
2026-06-21 10:56:59 -07:00
committed by GitHub
parent 3d80ac2993
commit d14cec5885
43 changed files with 540 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/desktop/src/features/compose/markdown-editor.css
+32 -25
View File
@@ -1,13 +1,14 @@
/* Theme Milkdown Crepe to blend into the app's translucent "glass" surfaces.
* Crepe's frame-dark theme is a grayscale palette driven by --crepe-* custom
* properties; we override those to white-on-transparent with a blue accent so
* the editor (and the read-only display, which uses the same engine) sits on
/* 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 <body>, 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. */
* unreadable over the content behind it. Our tokens resolve against the
* :root/.dark cascade on <html>, so the portaled menus stay themed too. */
.llink-crepe .milkdown,
.milkdown-slash-menu,
.milkdown-toolbar,
@@ -15,24 +16,30 @@
.milkdown-link-preview,
.milkdown-block-handle {
--crepe-color-background: transparent;
--crepe-color-on-background: rgb(255 255 255 / 0.92);
/* Surface backs code blocks, tables, and the floating menus — keep it
* (near-)opaque so menus read clearly over content. */
--crepe-color-surface: rgb(24 24 28 / 0.96);
--crepe-color-surface-low: rgb(42 42 50 / 0.96);
--crepe-color-on-surface: #ffffff;
--crepe-color-on-surface-variant: rgb(255 255 255 / 0.65);
--crepe-color-outline: rgb(255 255 255 / 0.2);
--crepe-color-primary: #60a5fa;
--crepe-color-secondary: rgb(96 165 250 / 0.25);
--crepe-color-on-secondary: #ffffff;
--crepe-color-inverse: #ffffff;
--crepe-color-on-inverse: #0b0b0b;
--crepe-color-inline-code: #fca5a5;
--crepe-color-inline-area: rgb(255 255 255 / 0.1);
--crepe-color-error: #f87171;
--crepe-color-hover: rgb(255 255 255 / 0.08);
--crepe-color-selected: rgb(96 165 250 / 0.25);
--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;
@@ -57,7 +64,7 @@
.llink-crepe .milkdown .ProseMirror {
padding: 0;
outline: none;
caret-color: white;
caret-color: var(--foreground);
}
/* Crepe's default heading scale (42px h1) is sized for a document editor;
@@ -103,7 +110,7 @@
line-height: 1.375rem;
font-weight: 700;
margin-top: 12px;
color: rgb(255 255 255 / 0.7);
color: var(--muted-foreground);
}
.llink-crepe .milkdown .ProseMirror > :first-child {