Apply paper-and-ink design system across all surfaces

Replaces the generic shadcn/ui gray theme + horizontal top-bar shell with the paper-and-ink language from the Claude Design handoff bundle: warm off-white paper, near-black ink, Source Serif 4 + Inter, hairline borders, muted ink accents (clay/indigo/sage/plum/ochre) used functionally for calendars and share scopes. Theme switcher expanded from 2 dimensions (theme × mode) to 7: palette × mode × fontPair × density × dashLayout × calView × navStyle. All exposed in Settings → Appearance and persisted on the users row. Pre-paint script applies all four data-* attributes from localStorage so reload doesn't flash. App shell restructured to a CSS-grid driven by data-nav on <html>: sidebar on desktop, bottom-nav + FAB under 760px. Four desktop nav modes wired (sidebar/rail/top/fab-only). Topbar gets a search-→-CommandPalette button, notification bell, "+ New" quick-add, avatar. Dashboard, calendar, lists, notes, settings, login, public share viewer, and quick-add sheet all reskinned. Dashboard editor gains a Preset menu (classic/split/glance) that fills the layout from the registered widgets. FullCalendar wrapped in .fc-skin and inherits all paper-and-ink tokens via CSS variable overrides. Public share viewer (/s/<token>) rebuilt around ShareFrame: expiration banner, brand strip, eyebrow chip, 38px serif title, mini-day + mini-map cards, share-rows. Schema: drops users.theme; adds theme_palette, theme_font_pair, theme_density, theme_dash_layout, theme_cal_view, theme_nav_style with defaults that match the design (clay / serif-sans / regular / classic / month / rail-desktop). Migration 0014_paper_ink_theme. Middleware sets x-pathname so the AppShell server component can render bare for /s/* and /login without a route-group refactor. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-07 01:03:21 -05:00
parent e130cda6c5
commit 9612a54e52
61 changed files with 4173 additions and 894 deletions
@@ -62,13 +62,16 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
  }

  return (
-    <div className="mx-auto grid w-full max-w-5xl gap-6 p-4">
+    <div className="mx-auto grid w-full max-w-5xl gap-6">
      <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
        <div>
-          <h1 className="text-2xl font-semibold">Lists</h1>
-          <p className="text-sm text-muted-foreground">Shopping, tasks, and whatever comes next.</p>
+          <h2 className="serif text-[22px] tracking-tight">Lists</h2>
+          <p className="muted text-[13px] mt-1">Shopping, tasks, and whatever comes next.</p>
        </div>
-        <div className="grid gap-2 rounded-lg border bg-background p-3 sm:grid-cols-[140px_220px_auto]">
+        <div
+          className="grid gap-2 rounded-[var(--r-md)] border-[0.5px] bg-[var(--card)] p-3 sm:grid-cols-[140px_220px_auto]"
+          style={{ borderColor: "var(--hair)" }}
+        >
          <div className="space-y-1">
            <Label htmlFor="new-list-type">Type</Label>
            <Input
@@ -86,7 +89,7 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
            />
          </div>
          <Button className="self-end" onClick={addList} disabled={!type || !name}>
-            <Plus />
+            <Plus className="size-3.5" />
            New list
          </Button>
        </div>
@@ -95,9 +98,7 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
      <div className="grid gap-6">
        {grouped.map(([groupType, groupLists]) => (
          <section key={groupType} className="grid gap-3">
-            <h2 className="text-sm font-medium uppercase tracking-normal text-muted-foreground">
-              {groupType}
-            </h2>
+            <div className="eyebrow">{groupType}</div>
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {groupLists.map((list) => (
                <ListCard key={list.id} list={list} onToggle={handleToggle} />
@@ -120,25 +121,32 @@ function ListCard({
  const [expanded, setExpanded] = useState(true);

  return (
-    <div className="rounded-lg border bg-card text-card-foreground">
-      <div className="flex items-center gap-2 p-4">
-        <button
-          type="button"
-          onClick={() => setExpanded((v) => !v)}
-          className="text-muted-foreground hover:text-foreground transition-colors"
-          aria-label={expanded ? "Collapse" : "Expand"}
-        >
-          {expanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
-        </button>
-        <div className="min-w-0 flex-1">
-          <div className="font-medium truncate">{list.name}</div>
-          <div className="text-xs text-muted-foreground">
-            {list.openCount} open · {list.doneCount} done
+    <div
+      className="rounded-[var(--r-lg)] border-[0.5px] bg-[var(--card)] text-[var(--ink)] shadow-[var(--shadow-1)]"
+      style={{ borderColor: "var(--hair)" }}
+    >
+      <div className="card-h">
+        <div className="flex items-center gap-2 min-w-0">
+          <button
+            type="button"
+            onClick={() => setExpanded((v) => !v)}
+            className="text-[var(--ink-mute)] hover:text-[var(--ink)] transition-colors"
+            aria-label={expanded ? "Collapse" : "Expand"}
+          >
+            {expanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
+          </button>
+          <div className="min-w-0">
+            <h3 className="serif text-[15px] truncate text-[var(--ink)] m-0 font-medium">
+              {list.name}
+            </h3>
+            <div className="meta">
+              {list.openCount} open · {list.doneCount} done
+            </div>
          </div>
        </div>
        <Link
          href={`/lists/${list.id}`}
-          className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+          className="shrink-0 text-[var(--ink-mute)] hover:text-[var(--ink)] transition-colors"
          aria-label={`Open ${list.name}`}
        >
          <ExternalLink className="size-4" />
@@ -146,42 +154,55 @@ function ListCard({
      </div>

      {expanded && (
-        <div className="border-t">
+        <div>
          {list.items.length === 0 ? (
-            <p className="px-4 py-3 text-sm text-muted-foreground">
+            <p className="muted px-[14px] py-3 text-[13px]">
              {list.openCount === 0 ? "All done!" : "No items to show."}
            </p>
          ) : (
-            <ul className="divide-y">
+            <div>
              {list.items.map((item) => (
-                <li key={item.id} className="flex items-center gap-3 px-4 py-2">
-                  <input
-                    type="checkbox"
+                <div
+                  key={item.id}
+                  className={`list-row ${item.done ? "checked" : ""}`}
+                  style={{ padding: "8px 14px" }}
+                >
+                  <button
+                    type="button"
                    aria-label={`Complete ${item.text}`}
-                    className="size-4 accent-primary shrink-0"
-                    checked={item.done}
-                    onChange={(e) => onToggle(list.id, item, e.target.checked)}
-                  />
-                  <span
-                    className={`text-sm truncate transition-colors ${
-                      item.done ? "text-muted-foreground line-through" : ""
-                    }`}
+                    aria-pressed={item.done}
+                    className={`checkbox ${item.done ? "on" : ""}`}
+                    onClick={() => onToggle(list.id, item, !item.done)}
                  >
-                    {item.text}
-                  </span>
-                </li>
+                    {item.done && (
+                      <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="white"
+                        strokeWidth="2.4"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <path d="M5 12l5 5L20 7" />
+                      </svg>
+                    )}
+                  </button>
+                  <span className="row-text flex-1 text-[13.5px] truncate">{item.text}</span>
+                </div>
              ))}
              {list.openCount > list.items.filter((i) => !i.done).length && (
-                <li className="px-4 py-2">
+                <div className="px-[14px] py-2">
                  <Link
                    href={`/lists/${list.id}`}
-                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                    className="text-[12px] text-[var(--ink-mute)] hover:text-[var(--ink)] transition-colors"
                  >
                    +{list.openCount - list.items.filter((i) => !i.done).length} more — open list
                  </Link>
-                </li>
+                </div>
              )}
-            </ul>
+            </div>
          )}
        </div>
      )}