refactor: share memo content styling

apps/mobile/src/screens/WorkspaceMemoDetail.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { resolveMemoContentMarkdown, type MemoDetail } from "@edgeever/shared";
+import { MEMO_CONTENT_STYLE, resolveMemoContentMarkdown, type MemoDetail } from "@edgeever/shared";
 import { ActivityIndicator, Image as RNImage, Platform, ScrollView, StyleSheet, Text as RNText, useWindowDimensions, View, type ImageStyle, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import { Modal } from "react-native";
 import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
@@ -231,7 +231,13 @@ export const MemoDetailModal = ({
   const [activeMatchIndex, setActiveMatchIndex] = useState(0);
   const localePreference = useMobileLocalePreference();
   const themedDetailMarkdownStyles = useMemo(
-    () => resolveMobileThemeStyles(detailMarkdownStyles, resolvedTheme),
+    () => ({
+      ...resolveMobileThemeStyles(detailMarkdownStyles, resolvedTheme),
+      hr: {
+        ...detailMarkdownStyles.hr,
+        backgroundColor: MEMO_CONTENT_STYLE.divider.color[resolvedTheme],
+      },
+    }),
     [resolvedTheme]
   );
   const detailMarkdownRules = useMemo<RenderRules>(() => {
@@ -559,8 +565,8 @@ const HighlightedDetailText = ({
 const detailMarkdownStyles = StyleSheet.create({
   body: {
     color: "#0f172a",
-    fontSize: 17,
-    lineHeight: 27,
+    fontSize: MEMO_CONTENT_STYLE.body.fontSize,
+    lineHeight: MEMO_CONTENT_STYLE.body.lineHeight,
   },
   blockquote: {
     backgroundColor: "#f8fafc",
@@ -613,9 +619,9 @@ const detailMarkdownStyles = StyleSheet.create({
     marginTop: 14,
   },
   hr: {
-    backgroundColor: "#66ca80",
-    height: 1,
-    marginVertical: 24,
+    backgroundColor: MEMO_CONTENT_STYLE.divider.color.light,
+    height: MEMO_CONTENT_STYLE.divider.thickness,
+    marginVertical: MEMO_CONTENT_STYLE.divider.marginVertical,
   },
   link: {
     color: "#059669",

apps/mobile/src/screens/workspace-styles.ts

@@ -1,4 +1,5 @@
 import { StyleSheet } from "react-native";
+import { MEMO_CONTENT_STYLE } from "@edgeever/shared";
 import { MOBILE_UI_METRICS } from "@edgeever/shared/mobile-ui";
 import { resolveMobileThemeStyles, type MobileResolvedTheme } from "../lib/mobile-theme";
 
@@ -1556,8 +1557,8 @@ const baseWorkspaceStyles = StyleSheet.create({
   },
   detailMarkdown: {
     color: "#1f2937",
-    fontSize: 16,
-    lineHeight: 25,
+    fontSize: MEMO_CONTENT_STYLE.body.fontSize,
+    lineHeight: MEMO_CONTENT_STYLE.body.lineHeight,
     marginTop: 20,
   },
   noteSearchPanel: {

apps/web/src/components/EditorPane.tsx

@@ -76,6 +76,7 @@ import { EDITOR_CONTENT_MAX_WIDTH, EDITOR_CONTENT_MAX_WIDTH_COLLAPSED } from "@/
 import {
   countMemoCharacters,
   docToMarkdown,
+  MEMO_CONTENT_STYLE,
   markdownToDoc,
   resolveMemoContentDoc,
   type Notebook,
@@ -2718,8 +2719,12 @@ const RichEditorPane = ({
             ? editorTheme
             : "custom"
         }
-        style={
-          editorTheme !== "default" && editorTheme !== "minimal-emerald" && editorTheme !== "outline-emerald"
+        style={{
+          "--editor-body-font-size": `${MEMO_CONTENT_STYLE.body.fontSize}px`,
+          "--editor-body-line-height": String(MEMO_CONTENT_STYLE.body.lineHeight / MEMO_CONTENT_STYLE.body.fontSize),
+          "--memo-content-divider-color": MEMO_CONTENT_STYLE.divider.color[resolvedTheme],
+          "--memo-content-divider-spacing": `${MEMO_CONTENT_STYLE.divider.marginVertical}px`,
+          ...(editorTheme !== "default" && editorTheme !== "minimal-emerald" && editorTheme !== "outline-emerald"
             ? {
                 "--editor-theme-bg": (resolvedTheme === "dark" ? customEditorTheme.dark : customEditorTheme.light).background,
                 "--editor-theme-text": (resolvedTheme === "dark" ? customEditorTheme.dark : customEditorTheme.light).text,
@@ -2727,9 +2732,9 @@ const RichEditorPane = ({
                 "--editor-theme-accent": (resolvedTheme === "dark" ? customEditorTheme.dark : customEditorTheme.light).accent,
                 "--editor-theme-soft": (resolvedTheme === "dark" ? customEditorTheme.dark : customEditorTheme.light).soft,
                 "--editor-theme-border": (resolvedTheme === "dark" ? customEditorTheme.dark : customEditorTheme.light).border,
-              } as CSSProperties
-            : undefined
-        }
+              }
+            : {}),
+        } as CSSProperties}
         className={cn(
           "edgeever-editor relative min-h-0 flex-1 bg-white",
           useMobilePlainTextEditor ? "overflow-visible" : "overflow-y-auto"

apps/web/src/styles/globals.css

@@ -42,6 +42,8 @@
     --editor-body-font-size: 0.9375rem;
     --editor-body-line-height: 1.6;
     --editor-paragraph-spacing: 0.45rem;
+    --memo-content-divider-color: rgb(var(--brand-green-300-rgb));
+    --memo-content-divider-spacing: 1.5rem;
     --editor-outline-width: 300px;
     --editor-content-max-width: 880px;
 
@@ -565,9 +567,9 @@ textarea {
 }
 
 .ProseMirror hr {
-  margin: 1.5rem 0;
+  margin: var(--memo-content-divider-spacing) 0;
   border: 0;
-  border-top: 1px solid rgb(var(--brand-green-300-rgb));
+  border-top: 1px solid var(--memo-content-divider-color);
 }
 
 .ProseMirror img {

packages/shared/src/index.ts

@@ -3,6 +3,7 @@ export * from "./backup";
 export * from "./github-feedback";
 export * from "./image-display";
 export * from "./memo-safety";
+export * from "./memo-content-style";
 export * from "./note-links";
 export * from "./notebooks";
 export * from "./revision-diff";

packages/shared/src/memo-content-style.test.mjs

@@ -0,0 +1,13 @@
+import { describe, expect, test } from "bun:test";
+import { MEMO_CONTENT_STYLE } from "./memo-content-style.ts";
+
+describe("shared memo content style", () => {
+  test("matches the established mobile PWA reading scale", () => {
+    expect(MEMO_CONTENT_STYLE.body).toEqual({ fontSize: 15, lineHeight: 24 });
+    expect(MEMO_CONTENT_STYLE.divider).toEqual({
+      color: { dark: "#4ade80", light: "#66ca80" },
+      marginVertical: 24,
+      thickness: 1,
+    });
+  });
+});

packages/shared/src/memo-content-style.ts

@@ -0,0 +1,14 @@
+export const MEMO_CONTENT_STYLE = {
+  body: {
+    fontSize: 15,
+    lineHeight: 24,
+  },
+  divider: {
+    color: {
+      dark: "#4ade80",
+      light: "#66ca80",
+    },
+    marginVertical: 24,
+    thickness: 1,
+  },
+} as const;