diff --git a/packages/app-expo/src/screens/ReaderScreen.tsx b/packages/app-expo/src/screens/ReaderScreen.tsx index a87fe5edc..b2e53c7cd 100644 --- a/packages/app-expo/src/screens/ReaderScreen.tsx +++ b/packages/app-expo/src/screens/ReaderScreen.tsx @@ -155,7 +155,8 @@ import { SCREEN_WIDTH, } from "./reader/reader-constants"; import { BatteryIcon, ListIcon, SettingsIcon } from "./reader/reader-icons"; -import { makeStyles, noteTooltipMdStyles } from "./reader/reader-styles"; +import { createNoteTooltipTheme } from "./reader/note-tooltip-theme"; +import { makeStyles } from "./reader/reader-styles"; import { useReaderBookmark } from "./reader/useReaderBookmark"; import { useReaderSearch } from "./reader/useReaderSearch"; import { useReaderSystemInfo } from "./reader/useReaderSystemInfo"; @@ -208,6 +209,7 @@ export function ReaderScreen({ route, navigation }: Props) { const colors = useColors(); const { mode: themeMode } = useTheme(); const s = makeStyles(colors); + const noteTooltipTheme = createNoteTooltipTheme(colors); const { bookId, cfi, highlight: shouldHighlight, openTTS } = route.params; const { t, i18n } = useTranslation(); const isWideLayout = SCREEN_WIDTH >= 768; @@ -1729,7 +1731,7 @@ export function ReaderScreen({ route, navigation }: Props) { diff --git a/packages/app-expo/src/screens/reader/note-tooltip-theme.test.ts b/packages/app-expo/src/screens/reader/note-tooltip-theme.test.ts new file mode 100644 index 000000000..5e1dbfd84 --- /dev/null +++ b/packages/app-expo/src/screens/reader/note-tooltip-theme.test.ts @@ -0,0 +1,24 @@ +import { describe, expect, it } from "vitest"; +import { createNoteTooltipTheme } from "./note-tooltip-theme"; + +describe("reader note tooltip theme", () => { + it("uses the active sepia surface and readable foreground colors", () => { + const colors = { + card: "#f5ebd7", + foreground: "#3d2b1f", + muted: "#e6d9c3", + mutedForeground: "#7a6652", + border: "#d4c4a8", + primary: "#6b4c2a", + }; + + const theme = createNoteTooltipTheme(colors); + + expect(theme.surface.backgroundColor).toBe(colors.card); + expect(theme.surface.borderColor).toBe(colors.border); + expect(theme.markdown.body.color).toBe(colors.foreground); + expect(theme.markdown.text.color).toBe(colors.foreground); + expect(theme.markdown.link.color).toBe(colors.primary); + expect(JSON.stringify(theme)).not.toContain("rgba(15, 23, 42, 0.95)"); + }); +}); diff --git a/packages/app-expo/src/screens/reader/note-tooltip-theme.ts b/packages/app-expo/src/screens/reader/note-tooltip-theme.ts new file mode 100644 index 000000000..1a1e31830 --- /dev/null +++ b/packages/app-expo/src/screens/reader/note-tooltip-theme.ts @@ -0,0 +1,76 @@ +import type { ThemeColors } from "@/styles/theme"; + +type NoteTooltipColors = Pick< + ThemeColors, + "card" | "foreground" | "muted" | "mutedForeground" | "border" | "primary" +>; + +export function createNoteTooltipTheme(colors: NoteTooltipColors) { + const text = { color: colors.foreground, fontSize: 13, lineHeight: 19 }; + const code = { + backgroundColor: colors.muted, + color: colors.foreground, + fontSize: 14, + fontFamily: "Menlo", + }; + + return { + surface: { + backgroundColor: colors.card, + borderColor: colors.border, + }, + content: { + maxHeight: 140, + overflow: "hidden" as const, + }, + markdown: { + body: text, + textgroup: text, + text, + paragraph: { ...text, marginBottom: 4, marginTop: 0 }, + heading1: { + color: colors.foreground, + fontSize: 15, + fontWeight: "600" as const, + marginBottom: 4, + marginTop: 4, + }, + heading2: { + color: colors.foreground, + fontSize: 14, + fontWeight: "600" as const, + marginBottom: 3, + marginTop: 3, + }, + heading3: { + color: colors.foreground, + fontSize: 13, + fontWeight: "600" as const, + marginBottom: 2, + marginTop: 2, + }, + strong: { fontWeight: "700" as const, color: colors.foreground }, + em: { fontStyle: "italic" as const, color: colors.mutedForeground }, + link: { color: colors.primary }, + code_inline: code, + code_block: { ...code, padding: 8 }, + fence: { ...code, padding: 8 }, + blockquote: { + borderLeftWidth: 2, + borderLeftColor: colors.mutedForeground, + paddingLeft: 10, + backgroundColor: "transparent", + color: colors.foreground, + }, + bullet_list: { marginVertical: 2 }, + ordered_list: { marginVertical: 2 }, + list_item: { marginBottom: 2, flexDirection: "row" as const }, + bullet_list_icon: { color: colors.foreground, marginLeft: 0, marginRight: 8 }, + bullet_list_content: { color: colors.foreground, flex: 1 }, + ordered_list_icon: { color: colors.foreground, marginLeft: 0, marginRight: 8 }, + ordered_list_content: { color: colors.foreground, flex: 1 }, + hardbreak: { color: colors.foreground }, + softbreak: { color: colors.foreground }, + }, + }; +} diff --git a/packages/app-expo/src/screens/reader/reader-styles.ts b/packages/app-expo/src/screens/reader/reader-styles.ts index 8c75dc070..d6744083c 100644 --- a/packages/app-expo/src/screens/reader/reader-styles.ts +++ b/packages/app-expo/src/screens/reader/reader-styles.ts @@ -7,8 +7,6 @@ import { makeToolbarStyles } from "./styles/reader-base-styles"; import { makeSheetStyles } from "./styles/reader-sheet-styles"; import { makeNoteStyles } from "./styles/reader-note-styles"; -export { TOOLTIP_FG, TOOLTIP_MUTED, noteTooltipMdStyles } from "./styles/reader-note-styles"; - export const makeStyles = (colors: ThemeColors) => ({ ...makeToolbarStyles(colors), ...makeSheetStyles(colors), diff --git a/packages/app-expo/src/screens/reader/styles/index.ts b/packages/app-expo/src/screens/reader/styles/index.ts index dbea95eba..3f3bc9a26 100644 --- a/packages/app-expo/src/screens/reader/styles/index.ts +++ b/packages/app-expo/src/screens/reader/styles/index.ts @@ -1,3 +1,3 @@ export { makeToolbarStyles } from "./reader-base-styles"; export { makeSheetStyles } from "./reader-sheet-styles"; -export { makeNoteStyles, noteTooltipMdStyles, TOOLTIP_FG, TOOLTIP_MUTED } from "./reader-note-styles"; +export { makeNoteStyles } from "./reader-note-styles"; diff --git a/packages/app-expo/src/screens/reader/styles/reader-note-styles.ts b/packages/app-expo/src/screens/reader/styles/reader-note-styles.ts index ac9cdf3cc..64a5f6dd7 100644 --- a/packages/app-expo/src/screens/reader/styles/reader-note-styles.ts +++ b/packages/app-expo/src/screens/reader/styles/reader-note-styles.ts @@ -3,44 +3,14 @@ */ import { Dimensions, StyleSheet } from "react-native"; import { type ThemeColors, fontSize, fontWeight, radius } from "@/styles/theme"; +import { createNoteTooltipTheme } from "../note-tooltip-theme"; const SCREEN_HEIGHT = Dimensions.get("window").height; -export const TOOLTIP_FG = "#f1f5f9"; -export const TOOLTIP_MUTED = "rgba(148, 163, 184, 0.5)"; +export const makeNoteStyles = (colors: ThemeColors) => { + const tooltipTheme = createNoteTooltipTheme(colors); -/** Markdown styles used inside note tooltip */ -export const noteTooltipMdStyles = { - body: { color: TOOLTIP_FG, fontSize: 13, lineHeight: 19 }, - textgroup: { color: TOOLTIP_FG, fontSize: 13, lineHeight: 19 }, - text: { color: TOOLTIP_FG, fontSize: 13, lineHeight: 19 }, - paragraph: { color: TOOLTIP_FG, fontSize: 13, lineHeight: 19, marginBottom: 4, marginTop: 0 }, - heading1: { color: "#fff", fontSize: 15, fontWeight: "600" as const, marginBottom: 4, marginTop: 4 }, - heading2: { color: "#fff", fontSize: 14, fontWeight: "600" as const, marginBottom: 3, marginTop: 3 }, - heading3: { color: "#fff", fontSize: 13, fontWeight: "600" as const, marginBottom: 2, marginTop: 2 }, - strong: { fontWeight: "700" as const, color: "#fff" }, - em: { fontStyle: "italic" as const, color: "#e2e8f0" }, - link: { color: "#60a5fa" }, - code_inline: { backgroundColor: "rgba(255,255,255,0.1)", color: TOOLTIP_FG, fontSize: 14, fontFamily: "Menlo" }, - code_block: { backgroundColor: "rgba(0,0,0,0.3)", color: TOOLTIP_FG, fontSize: 14, fontFamily: "Menlo", padding: 8 }, - fence: { backgroundColor: "rgba(0,0,0,0.3)", color: TOOLTIP_FG, fontSize: 14, fontFamily: "Menlo", padding: 8 }, - blockquote: { - borderLeftWidth: 2, borderLeftColor: TOOLTIP_MUTED, - paddingLeft: 10, backgroundColor: "transparent", color: TOOLTIP_FG, - }, - bullet_list: { marginVertical: 2 }, - ordered_list: { marginVertical: 2 }, - list_item: { marginBottom: 2, flexDirection: "row" as const }, - bullet_list_icon: { color: TOOLTIP_FG, marginLeft: 0, marginRight: 8 }, - bullet_list_content: { color: TOOLTIP_FG, flex: 1 }, - ordered_list_icon: { color: TOOLTIP_FG, marginLeft: 0, marginRight: 8 }, - ordered_list_content: { color: TOOLTIP_FG, flex: 1 }, - hardbreak: { color: TOOLTIP_FG }, - softbreak: { color: TOOLTIP_FG }, -}; - -export const makeNoteStyles = (colors: ThemeColors) => - StyleSheet.create({ + return StyleSheet.create({ // ── Note view modal ─────────────────────────────────────────────────────── noteViewOverlay: { flex: 1, justifyContent: "flex-end", @@ -101,15 +71,16 @@ export const makeNoteStyles = (colors: ThemeColors) => noteTooltip: { position: "absolute", width: 300, maxHeight: 200, - backgroundColor: "rgba(15, 23, 42, 0.95)", + ...tooltipTheme.surface, borderRadius: radius.lg, padding: 12, shadowColor: "#000", shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.3, shadowRadius: 16, elevation: 12, - borderWidth: 1, borderColor: "rgba(100, 116, 139, 0.3)", + borderWidth: 1, zIndex: 90, }, - noteTooltipContent: { maxHeight: 140, overflow: "hidden" }, + noteTooltipContent: tooltipTheme.content, }); +};