diff --git a/apps/web/src/lib/custom-editor-theme.test.mjs b/apps/web/src/lib/custom-editor-theme.test.mjs
index cd2a0922..1d56e704 100644
--- a/apps/web/src/lib/custom-editor-theme.test.mjs
+++ b/apps/web/src/lib/custom-editor-theme.test.mjs
@@ -3,8 +3,10 @@ import {
CUSTOM_EDITOR_THEME_FILE_SCHEMA,
CUSTOM_EDITOR_THEME_FILE_VERSION,
CustomEditorThemeFileError,
+ DEFAULT_CUSTOM_EDITOR_THEME_NAME,
DEFAULT_CUSTOM_LIGHT_COLORS,
DEFAULT_CUSTOM_DARK_COLORS,
+ localizeStoredCustomThemeName,
normalizeThemeColors,
customEditorThemeFileName,
getEditorThemeContrastIssues,
@@ -106,4 +108,11 @@ describe("custom editor theme files", () => {
test("creates a filesystem-safe descriptive filename", () => {
expect(customEditorThemeFileName(theme.name)).toBe("EdgeEver-Calm - Green.json");
});
+
+ test("localizes factory custom theme names without rewriting user names", () => {
+ const copy = { defaultName: "自定义主题", newName: (index) => `新主题 ${index}` };
+ expect(localizeStoredCustomThemeName(DEFAULT_CUSTOM_EDITOR_THEME_NAME, copy)).toBe("自定义主题");
+ expect(localizeStoredCustomThemeName("New theme 2", copy)).toBe("新主题 2");
+ expect(localizeStoredCustomThemeName("Calm / Green", copy)).toBe("Calm / Green");
+ });
});
diff --git a/apps/web/src/lib/custom-editor-theme.ts b/apps/web/src/lib/custom-editor-theme.ts
index fe5d5a59..363c26ea 100644
--- a/apps/web/src/lib/custom-editor-theme.ts
+++ b/apps/web/src/lib/custom-editor-theme.ts
@@ -41,14 +41,28 @@ export const DEFAULT_CUSTOM_DARK_COLORS: ThemeColors = {
border: "#44403c",
};
+export const DEFAULT_CUSTOM_EDITOR_THEME_NAME = "My custom theme";
+
export const DEFAULT_CUSTOM_EDITOR_THEME: CustomEditorTheme = {
id: "custom-default",
- name: "My custom theme",
+ name: DEFAULT_CUSTOM_EDITOR_THEME_NAME,
light: DEFAULT_CUSTOM_LIGHT_COLORS,
dark: DEFAULT_CUSTOM_DARK_COLORS,
customCss: "",
};
+const NEW_THEME_NAME_PATTERN = /^New theme (\d+)$/;
+
+export const localizeStoredCustomThemeName = (
+ name: string,
+ copy: { defaultName: string; newName: (index: number) => string },
+) => {
+ if (name === DEFAULT_CUSTOM_EDITOR_THEME_NAME) return copy.defaultName;
+ const match = NEW_THEME_NAME_PATTERN.exec(name);
+ if (match) return copy.newName(Number(match[1]));
+ return name;
+};
+
export const CUSTOM_EDITOR_THEME_FILE_SCHEMA = "edgeever.editor-theme";
export const CUSTOM_EDITOR_THEME_FILE_VERSION = 1;
export const MAX_CUSTOM_EDITOR_THEME_FILE_BYTES = 64 * 1024;
diff --git a/apps/web/src/lib/dark-theme.test.mjs b/apps/web/src/lib/dark-theme.test.mjs
index bf481429..21387acb 100644
--- a/apps/web/src/lib/dark-theme.test.mjs
+++ b/apps/web/src/lib/dark-theme.test.mjs
@@ -12,7 +12,6 @@ const BUILT_IN_EDITOR_THEMES = [
"outline-emerald",
"wechat-green",
"modern-mint",
- "marxico",
];
const readDarkThemeTokens = (theme) => {
@@ -107,15 +106,6 @@ describe("dark theme contracts", () => {
}
});
- test("Marxico keeps note content legible in dark mode", () => {
- const { css, tokens } = readDarkThemeTokens("marxico");
-
- expect(css).toContain(':root.dark .edgeever-editor[data-editor-theme="marxico"]');
- expect(css).toContain("color: var(--editor-theme-text);");
- expect(contrastRatio(tokens.text, "#191e1b")).toBeGreaterThanOrEqual(4.5);
- expect(contrastRatio(tokens.heading, "#191e1b")).toBeGreaterThanOrEqual(4.5);
- });
-
test("automatic Mermaid themes follow the resolved appearance", () => {
expect(resolveMermaidTheme("auto", "light")).toBe("zinc-light");
expect(resolveMermaidTheme("auto", "dark")).toBe("zinc-dark");
diff --git a/apps/web/src/lib/publish-layout.test.mjs b/apps/web/src/lib/publish-layout.test.mjs
index 4d0c3165..0e553c95 100644
--- a/apps/web/src/lib/publish-layout.test.mjs
+++ b/apps/web/src/lib/publish-layout.test.mjs
@@ -3,6 +3,8 @@ import { readFileSync } from "node:fs";
import {
DEFAULT_PUBLISH_LAYOUT,
DEFAULT_PUBLISH_PALETTE,
+ PAPER_EDITOR_THEME_PALETTES,
+ PUBLISH_LAYOUT_CHROME,
PUBLISH_LAYOUT_IDS,
PUBLISH_LAYOUT_RHYTHM,
PUBLISH_PALETTE_IDS,
@@ -19,7 +21,7 @@ import {
} from "./publish-layout.ts";
describe("publish layout catalog", () => {
- test("keeps ten paper editor themes and eight palettes", () => {
+ test("keeps ten paper editor themes and a palette per layout", () => {
expect(PUBLISH_LAYOUT_IDS).toEqual([
"letter",
"guide",
@@ -32,15 +34,46 @@ describe("publish layout catalog", () => {
"zen",
"grove",
]);
- expect(PUBLISH_PALETTE_IDS).toHaveLength(8);
+ expect(PUBLISH_PALETTE_IDS).toEqual([
+ "emerald",
+ "ink",
+ "dawn",
+ "clay",
+ "navy",
+ "slate",
+ "plum",
+ "forest",
+ "azure",
+ "amber",
+ "teal",
+ "violet",
+ "mist",
+ ]);
expect(DEFAULT_PUBLISH_LAYOUT).toBe("letter");
expect(DEFAULT_PUBLISH_PALETTE).toBe("emerald");
expect(PUBLISH_PALETTES.emerald.accent).toBe("#16A06E");
+ expect(PUBLISH_PALETTES.dawn.accent).toBe("#D9A521");
+ expect(PUBLISH_PALETTES.azure.accent).toBe("#2F80ED");
+ expect(PUBLISH_PALETTES.azure.surface).toBe("#F5F8FC");
+ expect(PUBLISH_PALETTES.azure.surface).not.toBe("#F0FDF4");
+ expect(PUBLISH_PALETTES.clay.accent).toBe("#E02D32");
});
test("maps paper editor themes to a fixed layout and palette", () => {
expect(resolvePaperEditorTheme("letter")).toEqual({ layout: "letter", palette: "dawn" });
- expect(resolvePaperEditorTheme("guide")).toEqual({ layout: "guide", palette: "emerald" });
+ expect(resolvePaperEditorTheme("guide")).toEqual({ layout: "guide", palette: "azure" });
+ expect(PAPER_EDITOR_THEME_PALETTES).toEqual({
+ letter: "dawn",
+ guide: "azure",
+ blueprint: "navy",
+ journal: "slate",
+ stance: "clay",
+ stub: "amber",
+ brief: "teal",
+ outline: "violet",
+ zen: "mist",
+ grove: "forest",
+ });
expect(resolvePaperEditorTheme("default")).toBeNull();
});
@@ -51,13 +84,18 @@ describe("publish layout catalog", () => {
expect(resolveStoredPublishPalette("dawn")).toBe("dawn");
});
- test("numbers letter and blueprint chapters without CSS counters", () => {
+ test("numbers magazine chapters without CSS counters", () => {
expect(formatChapterIndex(0)).toBe("01");
expect(planHeadingDecoration("h2", "letter", 0)).toEqual({ kind: "chapter", chapterLabel: "01" });
- expect(planHeadingDecoration("h2", "blueprint", 1)).toEqual({ kind: "chapter", chapterLabel: "02" });
+ expect(planHeadingDecoration("h2", "guide", 0)).toEqual({ kind: "chapter", chapterLabel: "01" });
+ expect(planHeadingDecoration("h2", "blueprint", 1)).toEqual({ kind: "none" });
expect(planHeadingDecoration("h2", "stub", 0)).toEqual({ kind: "chapter", chapterLabel: "01" });
- expect(planHeadingDecoration("h2", "guide", 0)).toEqual({ kind: "none" });
+ expect(planHeadingDecoration("h2", "grove", 0)).toEqual({ kind: "none" });
expect(planHeadingDecoration("h1", "letter", 0)).toEqual({ kind: "title" });
+ expect(PUBLISH_LAYOUT_CHROME.letter.chapter).toBe("aside-serif");
+ expect(PUBLISH_LAYOUT_CHROME.letter.quote).toBe("grid-card");
+ expect(PUBLISH_LAYOUT_CHROME.brief.quoteBanner).toBe("EDITOR'S NOTE");
+ expect(PUBLISH_LAYOUT_CHROME.grove.small).toBe("slash");
});
});
@@ -67,24 +105,43 @@ describe("publish layout CSS", () => {
const desktop = buildPublishStyles("letter", PUBLISH_PALETTES.emerald, "desktop");
expect(phone.p).toContain("font-size: 15px");
- expect(phone.p).toContain("line-height: 1.9");
- expect(phone.p).toContain("margin: 0 0 16px");
+ expect(phone.p).toContain("line-height: 2");
+ expect(phone.p).toContain("letter-spacing: 0.06em");
+ expect(phone.p).toContain("margin: 0 0 28px");
expect(phone.h1).toContain("font-size: 24px");
expect(phone.h2).toContain("font-size: 20px");
expect(desktop.p).toContain("font-size: 15px");
- expect(desktop.p).toContain("line-height: 1.9");
+ expect(desktop.p).toContain("line-height: 2");
});
test("uses a looser reading rhythm than the note editor contract", () => {
- const letter = buildPublishStyles("letter", PUBLISH_PALETTES.emerald);
- const guide = buildPublishStyles("guide", PUBLISH_PALETTES.emerald);
+ const letter = buildPublishStyles("letter", PUBLISH_PALETTES.dawn);
+ const blueprint = buildPublishStyles("blueprint", PUBLISH_PALETTES.navy);
- expect(letter.p).toContain("line-height: 1.9");
- expect(letter.p).toContain("margin: 0 0 24px");
+ expect(letter.p).toContain("line-height: 2");
+ expect(letter.p).toContain("letter-spacing: 0.06em");
+ expect(letter.p).toContain("margin: 0 0 28px");
expect(letter.h1).toContain("text-align: center");
- expect(guide.h2).toContain("border-left: 4px solid #16A06E");
- expect(letter.blockquote).toContain("border-radius: 12px");
- expect(letter.strong).toContain("color: #16A06E");
+ expect(letter.h1).toContain("letter-spacing: 0.08em");
+ expect(blueprint.h2).toContain("border-left: 3px solid #4271B3");
+ expect(letter.blockquote).toContain("border-radius: 18px");
+ expect(letter.strong).toContain("color: #D9A521");
+ expect(letter.th).toContain("background: #FFF7DF");
+ expect(letter.a).toContain("color: #7C5500");
+ });
+
+ test("gives each paper theme its own line height and tracking", () => {
+ const stance = buildPublishStyles("stance", PUBLISH_PALETTES.clay);
+ const zen = buildPublishStyles("zen", PUBLISH_PALETTES.mist);
+ const stub = buildPublishStyles("stub", PUBLISH_PALETTES.amber);
+
+ expect(PUBLISH_LAYOUT_RHYTHM.stance.lineHeight).toBe("1.68");
+ expect(PUBLISH_LAYOUT_RHYTHM.zen.lineHeight).toBe("2.2");
+ expect(stance.p).toContain("letter-spacing: 0em");
+ expect(zen.p).toContain("letter-spacing: 0.1em");
+ expect(stub.h1).toContain("letter-spacing: 0.14em");
+ expect(new Set(Object.values(PUBLISH_LAYOUT_RHYTHM).map((rhythm) => rhythm.lineHeight)).size).toBe(10);
+ expect(new Set(Object.values(PUBLISH_LAYOUT_RHYTHM).map((rhythm) => rhythm.letterSpacing)).size).toBe(10);
});
test("keeps WeChat-safe inline CSS for every layout and palette", () => {
@@ -110,11 +167,12 @@ describe("copy pipeline wiring", () => {
expect(source).toContain("ProseMirror-separator");
expect(source).toContain("findOriginalImage");
expect(source).toContain("svgToWeChatImage");
+ expect(source).toContain("rasterizePublishOrnamentsForWeChat");
expect(source).toContain('fillStyle = "#ffffff"');
expect(source).toContain("image/jpeg");
expect(source).toContain("text-align: center");
expect(preferenceCard).not.toContain('t("settings.publishLayoutTitle")');
- expect(preferenceCard).toContain('t("settings.editorThemes.letter")');
+ expect(preferenceCard).not.toContain('t("settings.editorThemeTitle")');
});
test("drives the rich editor rhythm from paper editor themes", () => {
@@ -122,10 +180,19 @@ describe("copy pipeline wiring", () => {
const css = readFileSync(new URL("../styles/publish-layout.css", import.meta.url), "utf8");
const vars = publishEditorCssVars("letter", "dawn");
- expect(PUBLISH_LAYOUT_RHYTHM.letter.lineHeight).toBe("1.9");
- expect(PUBLISH_LAYOUT_RHYTHM.letter.paragraphSpacing).toBe("24px");
- expect(vars["--editor-body-line-height"]).toBe("1.9");
- expect(vars["--publish-accent"]).toBe("#C49A3C");
+ expect(PUBLISH_LAYOUT_RHYTHM.letter.lineHeight).toBe("2");
+ expect(PUBLISH_LAYOUT_RHYTHM.letter.paragraphSpacing).toBe("28px");
+ expect(vars["--editor-body-line-height"]).toBe("2");
+ expect(vars["--editor-letter-spacing"]).toBe("0.06em");
+ expect(vars["--editor-heading-letter-spacing"]).toBe("0.08em");
+ expect(css).toContain("letter-spacing: var(--editor-letter-spacing)");
+ expect(css).toContain("letter-spacing: var(--editor-heading-letter-spacing)");
+ expect(vars["--publish-accent"]).toBe("#D9A521");
+ expect(vars["--publish-accent-grid"]).toBe("rgba(217,165,33,0.14)");
+ expect(vars["--brand-green-rgb"]).toBe("217 165 33");
+ expect(vars["--publish-ornament-brush"]).toContain("url(\"data:image/svg+xml");
+ expect(css).toContain("--editor-theme-accent: var(--publish-accent)");
+ expect(css).toContain("--brand-green: var(--publish-accent)");
expect(editorPane).toContain("isPaperEditorTheme(editorTheme)");
expect(editorPane).toContain('data-paper-theme={isPaperEditorTheme(editorTheme) ? "true" : undefined}');
expect(editorPane).toContain("publishEditorCssVars");
@@ -135,7 +202,7 @@ describe("copy pipeline wiring", () => {
expect(css).toContain('[data-editor-theme="letter"]');
expect(css).toContain('[data-editor-theme="stance"]');
expect(css).toContain('[data-editor-theme="grove"]');
- expect(css).not.toMatch(/\.ProseMirror p\s*\{[^}]*line-height\s*:/);
+ expect(css).toContain("line-height: var(--editor-body-line-height)");
});
test("phone preview markup applies the paper layout instead of raw editor chrome", () => {
diff --git a/apps/web/src/lib/publish-layout.ts b/apps/web/src/lib/publish-layout.ts
index 37a6b7be..cc6eb2e3 100644
--- a/apps/web/src/lib/publish-layout.ts
+++ b/apps/web/src/lib/publish-layout.ts
@@ -1,3 +1,10 @@
+import {
+ PUBLISH_LAYOUT_ORNAMENTS,
+ publishOrnamentCssVars,
+ publishOrnamentDataUri,
+ type PublishOrnamentId,
+} from "./publish-ornaments";
+
export const PAPER_EDITOR_THEME_IDS = [
"letter",
"guide",
@@ -22,6 +29,11 @@ export const PUBLISH_PALETTE_IDS = [
"slate",
"plum",
"forest",
+ "azure",
+ "amber",
+ "teal",
+ "violet",
+ "mist",
] as const;
export type PublishPaletteId = (typeof PUBLISH_PALETTE_IDS)[number];
@@ -30,14 +42,14 @@ export const DEFAULT_PUBLISH_PALETTE: PublishPaletteId = "emerald";
export const PAPER_EDITOR_THEME_PALETTES = {
letter: "dawn",
- guide: "emerald",
+ guide: "azure",
blueprint: "navy",
journal: "slate",
stance: "clay",
- stub: "dawn",
- brief: "forest",
- outline: "ink",
- zen: "slate",
+ stub: "amber",
+ brief: "teal",
+ outline: "violet",
+ zen: "mist",
grove: "forest",
} as const satisfies Record
;
@@ -58,6 +70,7 @@ export type PublishPalette = {
accent: string;
accentSoft: string;
accentBorder: string;
+ accentGrid: string;
text: string;
textStrong: string;
textMuted: string;
@@ -69,12 +82,17 @@ export type PublishPalette = {
bg: string;
};
+const palette = (
+ id: PublishPaletteId,
+ colors: Omit,
+): PublishPalette => ({ id, ...colors });
+
export const PUBLISH_PALETTES: Record = {
- emerald: {
- id: "emerald",
+ emerald: palette("emerald", {
accent: "#16A06E",
accentSoft: "#E8F6F0",
accentBorder: "#B7E0CC",
+ accentGrid: "rgba(22,160,110,0.14)",
text: "#2C3A34",
textStrong: "#14241C",
textMuted: "#5C6F66",
@@ -84,12 +102,12 @@ export const PUBLISH_PALETTES: Record = {
codeBg: "#F3F7F5",
codeText: "#0F7A54",
bg: "#FFFFFF",
- },
- ink: {
- id: "ink",
+ }),
+ ink: palette("ink", {
accent: "#1A5C4A",
accentSoft: "#E7F2EE",
accentBorder: "#B5D2C8",
+ accentGrid: "rgba(26,92,74,0.14)",
text: "#24332E",
textStrong: "#12201B",
textMuted: "#5A6C65",
@@ -99,72 +117,72 @@ export const PUBLISH_PALETTES: Record = {
codeBg: "#EEF4F1",
codeText: "#164C3E",
bg: "#FFFFFF",
- },
- dawn: {
- id: "dawn",
- accent: "#C49A3C",
- accentSoft: "#FBF6EA",
- accentBorder: "#E8D7A8",
- text: "#3D3426",
- textStrong: "#2A2418",
- textMuted: "#7A6E58",
- surface: "#FFFCF6",
- divider: "#EFE3C8",
- link: "#8A6420",
- codeBg: "#FBF6EA",
- codeText: "#8A6420",
+ }),
+ dawn: palette("dawn", {
+ accent: "#D9A521",
+ accentSoft: "#FFF7DF",
+ accentBorder: "#EAD89F",
+ accentGrid: "rgba(217,165,33,0.14)",
+ text: "#3D2A1B",
+ textStrong: "#3A3020",
+ textMuted: "#74613C",
+ surface: "#FFFDF8",
+ divider: "#F0E3BD",
+ link: "#7C5500",
+ codeBg: "#FFFAF0",
+ codeText: "#7C5500",
bg: "#FFFFFF",
- },
- clay: {
- id: "clay",
- accent: "#C45C3E",
- accentSoft: "#FBEFEA",
- accentBorder: "#E8C4B6",
- text: "#3D2E29",
- textStrong: "#271C18",
- textMuted: "#7A635B",
- surface: "#FDF8F6",
- divider: "#EEDDD6",
- link: "#9A3E28",
- codeBg: "#F8EEE9",
- codeText: "#9A3E28",
+ }),
+ clay: palette("clay", {
+ accent: "#E02D32",
+ accentSoft: "#FFF1F1",
+ accentBorder: "#FFC2C2",
+ accentGrid: "rgba(224,45,50,0.14)",
+ text: "#374151",
+ textStrong: "#1C1917",
+ textMuted: "#374151",
+ surface: "#FFF7F7",
+ divider: "#FFD6D6",
+ link: "#B42318",
+ codeBg: "#FFF1F1",
+ codeText: "#B42318",
bg: "#FFFFFF",
- },
- navy: {
- id: "navy",
- accent: "#3B6B9A",
- accentSoft: "#EAF1F8",
- accentBorder: "#B7C9DC",
- text: "#2C3640",
- textStrong: "#162029",
- textMuted: "#5C6A78",
- surface: "#F5F8FB",
- divider: "#D7E1EB",
- link: "#2A5278",
+ }),
+ navy: palette("navy", {
+ accent: "#4271B3",
+ accentSoft: "#F3F4F7",
+ accentBorder: "#C8D0DB",
+ accentGrid: "rgba(66,113,179,0.14)",
+ text: "#3D4650",
+ textStrong: "#272D35",
+ textMuted: "#495464",
+ surface: "#F9FAFA",
+ divider: "#D7DDE5",
+ link: "#2F578A",
codeBg: "#EEF3F8",
- codeText: "#2A5278",
+ codeText: "#2F578A",
bg: "#FFFFFF",
- },
- slate: {
- id: "slate",
- accent: "#5A6B73",
- accentSoft: "#EEF1F2",
- accentBorder: "#C5CED2",
- text: "#2F373B",
- textStrong: "#1A2023",
- textMuted: "#66747B",
- surface: "#F7F8F9",
- divider: "#DEE3E6",
- link: "#3E4C53",
- codeBg: "#F0F2F3",
- codeText: "#3E4C53",
+ }),
+ slate: palette("slate", {
+ accent: "#89798B",
+ accentSoft: "#F5F4F6",
+ accentBorder: "#D4CDD5",
+ accentGrid: "rgba(137,121,139,0.14)",
+ text: "#5C505E",
+ textStrong: "#312A32",
+ textMuted: "#5C505E",
+ surface: "#FAFAFA",
+ divider: "#E0DBE1",
+ link: "#6B5C6D",
+ codeBg: "#F5F4F6",
+ codeText: "#6B5C6D",
bg: "#FFFFFF",
- },
- plum: {
- id: "plum",
+ }),
+ plum: palette("plum", {
accent: "#7A4E6E",
accentSoft: "#F5EEF3",
accentBorder: "#D4BCCB",
+ accentGrid: "rgba(122,78,110,0.14)",
text: "#3A2E36",
textStrong: "#241820",
textMuted: "#746068",
@@ -174,22 +192,97 @@ export const PUBLISH_PALETTES: Record = {
codeBg: "#F4ECF1",
codeText: "#5E3A54",
bg: "#FFFFFF",
- },
- forest: {
- id: "forest",
- accent: "#4A7C4E",
- accentSoft: "#EAF3EB",
- accentBorder: "#BDD4BF",
- text: "#2E3A2F",
- textStrong: "#172017",
- textMuted: "#5E6E5F",
- surface: "#F5F9F5",
- divider: "#D6E4D7",
- link: "#37633B",
- codeBg: "#EEF4EE",
- codeText: "#37633B",
+ }),
+ forest: palette("forest", {
+ accent: "#4D9D7F",
+ accentSoft: "#F3F6F5",
+ accentBorder: "#CAD8D3",
+ accentGrid: "rgba(77,157,127,0.14)",
+ text: "#4D6159",
+ textStrong: "#29332F",
+ textMuted: "#4D6159",
+ surface: "#FAFAFA",
+ divider: "#D9E3DF",
+ link: "#3B7A62",
+ codeBg: "#F3F6F5",
+ codeText: "#3B7A62",
bg: "#FFFFFF",
- },
+ }),
+ azure: palette("azure", {
+ accent: "#2F80ED",
+ accentSoft: "#EEF6FF",
+ accentBorder: "#B9D7FF",
+ accentGrid: "rgba(47,128,237,0.14)",
+ text: "#374151",
+ textStrong: "#111827",
+ textMuted: "#4B5563",
+ surface: "#F5F8FC",
+ divider: "#D7E8FF",
+ link: "#1D64C7",
+ codeBg: "#EEF6FF",
+ codeText: "#1D64C7",
+ bg: "#FFFFFF",
+ }),
+ amber: palette("amber", {
+ accent: "#E3A321",
+ accentSoft: "#FFF8E8",
+ accentBorder: "#F4D58B",
+ accentGrid: "rgba(227,163,33,0.14)",
+ text: "#555555",
+ textStrong: "#1A1A1A",
+ textMuted: "#555555",
+ surface: "#FFFEF8",
+ divider: "#F7E3B4",
+ link: "#B07C12",
+ codeBg: "#FFF8E8",
+ codeText: "#B07C12",
+ bg: "#FFFFFF",
+ }),
+ teal: palette("teal", {
+ accent: "#22B8A7",
+ accentSoft: "#ECFBF8",
+ accentBorder: "#A8E5DD",
+ accentGrid: "rgba(34,184,167,0.14)",
+ text: "#4D4F46",
+ textStrong: "#23251D",
+ textMuted: "#4D4F46",
+ surface: "#EEEFE9",
+ divider: "#CDEFEA",
+ link: "#1A8F82",
+ codeBg: "#ECFBF8",
+ codeText: "#1A8F82",
+ bg: "#FFFFFF",
+ }),
+ violet: palette("violet", {
+ accent: "#7567F8",
+ accentSoft: "#F3F1FF",
+ accentBorder: "#CFC9FF",
+ accentGrid: "rgba(117,103,248,0.14)",
+ text: "#3F3F46",
+ textStrong: "#18181B",
+ textMuted: "#3F3F46",
+ surface: "#F4F4F5",
+ divider: "#E1DEFF",
+ link: "#5B4EE0",
+ codeBg: "#F3F1FF",
+ codeText: "#5B4EE0",
+ bg: "#FFFFFF",
+ }),
+ mist: palette("mist", {
+ accent: "#35A7B8",
+ accentSoft: "#EEF9FA",
+ accentBorder: "#B7E3E8",
+ accentGrid: "rgba(53,167,184,0.14)",
+ text: "#525252",
+ textStrong: "#26352D",
+ textMuted: "#526359",
+ surface: "#F7FAFA",
+ divider: "#D4EEF1",
+ link: "#2A8492",
+ codeBg: "#EEF9FA",
+ codeText: "#2A8492",
+ bg: "#FFFFFF",
+ }),
};
export const isPublishLayoutId = (value: string | null | undefined): value is PublishLayoutId =>
@@ -246,6 +339,144 @@ export const writePublishPalettePreference = (palette: PublishPaletteId) => {
export const formatChapterIndex = (index: number) => String(index + 1).padStart(2, "0");
export type PublishHeadingKind = "title" | "chapter" | "small" | "none";
+export type PublishChapterStyle =
+ | "none"
+ | "aside-serif"
+ | "aside-part"
+ | "badge"
+ | "badge-section"
+ | "stacked-section"
+ | "kicker"
+ | "issue";
+export type PublishQuoteStyle =
+ | "grid-card"
+ | "rule"
+ | "panel"
+ | "marks"
+ | "rule-thick"
+ | "banner"
+ | "labeled"
+ | "italic-center"
+ | "italic-rule";
+export type PublishSmallHeadingStyle = "bookmark" | "slash" | "bar" | "dash" | "plain";
+export type PublishTitleRule = "none" | "short" | "brush";
+
+export type PublishLayoutChrome = {
+ kicker: string | null;
+ h1Align: "left" | "center";
+ h1Rule: PublishTitleRule;
+ h1Vol: boolean;
+ chapter: PublishChapterStyle;
+ small: PublishSmallHeadingStyle;
+ quote: PublishQuoteStyle;
+ quoteBanner?: string;
+ strongAccent: boolean;
+};
+
+export const PUBLISH_LAYOUT_CHROME: Record = {
+ letter: {
+ kicker: null,
+ h1Align: "center",
+ h1Rule: "brush",
+ h1Vol: false,
+ chapter: "aside-serif",
+ small: "bookmark",
+ quote: "grid-card",
+ strongAccent: true,
+ },
+ guide: {
+ kicker: "GUIDE · ARTICLE",
+ h1Align: "left",
+ h1Rule: "short",
+ h1Vol: false,
+ chapter: "aside-part",
+ small: "plain",
+ quote: "rule",
+ strongAccent: true,
+ },
+ blueprint: {
+ kicker: null,
+ h1Align: "left",
+ h1Rule: "short",
+ h1Vol: true,
+ chapter: "none",
+ small: "bookmark",
+ quote: "panel",
+ strongAccent: true,
+ },
+ journal: {
+ kicker: null,
+ h1Align: "left",
+ h1Rule: "short",
+ h1Vol: true,
+ chapter: "issue",
+ small: "dash",
+ quote: "italic-rule",
+ strongAccent: true,
+ },
+ stance: {
+ kicker: "ARTICLE",
+ h1Align: "left",
+ h1Rule: "none",
+ h1Vol: false,
+ chapter: "badge-section",
+ small: "bar",
+ quote: "marks",
+ strongAccent: true,
+ },
+ stub: {
+ kicker: "EDITION · FIELD NOTES",
+ h1Align: "left",
+ h1Rule: "short",
+ h1Vol: false,
+ chapter: "badge",
+ small: "bar",
+ quote: "rule-thick",
+ strongAccent: false,
+ },
+ brief: {
+ kicker: "EDITION · FIELD NOTES",
+ h1Align: "left",
+ h1Rule: "none",
+ h1Vol: false,
+ chapter: "aside-part",
+ small: "plain",
+ quote: "banner",
+ quoteBanner: "EDITOR'S NOTE",
+ strongAccent: true,
+ },
+ outline: {
+ kicker: "MINIMAL · ARTICLE",
+ h1Align: "left",
+ h1Rule: "none",
+ h1Vol: false,
+ chapter: "stacked-section",
+ small: "plain",
+ quote: "labeled",
+ quoteBanner: "QUOTE",
+ strongAccent: false,
+ },
+ zen: {
+ kicker: "FIELD NOTES",
+ h1Align: "left",
+ h1Rule: "short",
+ h1Vol: false,
+ chapter: "kicker",
+ small: "bar",
+ quote: "italic-center",
+ strongAccent: false,
+ },
+ grove: {
+ kicker: null,
+ h1Align: "left",
+ h1Rule: "none",
+ h1Vol: false,
+ chapter: "none",
+ small: "slash",
+ quote: "marks",
+ strongAccent: true,
+ },
+};
export const planHeadingDecoration = (
tag: string,
@@ -254,7 +485,7 @@ export const planHeadingDecoration = (
): { kind: PublishHeadingKind; chapterLabel?: string } => {
if (tag === "h1") return { kind: "title" };
if (tag === "h3") return { kind: "small" };
- if (tag === "h2" && (layout === "letter" || layout === "blueprint" || layout === "stub" || layout === "outline")) {
+ if (tag === "h2" && PUBLISH_LAYOUT_CHROME[layout].chapter !== "none") {
return { kind: "chapter", chapterLabel: formatChapterIndex(chapterIndex) };
}
return { kind: "none" };
@@ -266,42 +497,144 @@ export type PublishRhythm = {
fontSize: string;
lineHeight: string;
paragraphSpacing: string;
+ letterSpacing: string;
+ headingLetterSpacing: string;
headingAlign: "left" | "center";
};
export const PHONE_ARTICLE_RHYTHM = {
- fontSize: "15px",
- lineHeight: "1.9",
- paragraphSpacing: "16px",
h1Size: "24px",
h2Size: "20px",
h3Size: "15px",
} as const;
-const resolvePublishRhythm = (layout: PublishLayoutId, surface: PublishSurface): PublishRhythm => {
- const desktop = PUBLISH_LAYOUT_RHYTHM[layout];
- if (surface !== "phone") return desktop;
- return {
- fontSize: PHONE_ARTICLE_RHYTHM.fontSize,
- lineHeight: PHONE_ARTICLE_RHYTHM.lineHeight,
- paragraphSpacing: PHONE_ARTICLE_RHYTHM.paragraphSpacing,
- headingAlign: desktop.headingAlign,
- };
-};
+const resolvePublishRhythm = (layout: PublishLayoutId, _surface: PublishSurface): PublishRhythm =>
+ PUBLISH_LAYOUT_RHYTHM[layout];
export const PUBLISH_LAYOUT_RHYTHM: Record = {
- letter: { fontSize: "15px", lineHeight: "1.9", paragraphSpacing: "24px", headingAlign: "center" },
- guide: { fontSize: "15px", lineHeight: "1.8", paragraphSpacing: "16px", headingAlign: "left" },
- blueprint: { fontSize: "16px", lineHeight: "1.8", paragraphSpacing: "20px", headingAlign: "left" },
- journal: { fontSize: "16px", lineHeight: "1.9", paragraphSpacing: "26px", headingAlign: "left" },
- stance: { fontSize: "16px", lineHeight: "1.8", paragraphSpacing: "20px", headingAlign: "left" },
- stub: { fontSize: "15px", lineHeight: "1.9", paragraphSpacing: "32px", headingAlign: "left" },
- brief: { fontSize: "15px", lineHeight: "1.9", paragraphSpacing: "24px", headingAlign: "left" },
- outline: { fontSize: "16px", lineHeight: "1.8", paragraphSpacing: "22px", headingAlign: "left" },
- zen: { fontSize: "16px", lineHeight: "2", paragraphSpacing: "32px", headingAlign: "left" },
- grove: { fontSize: "15px", lineHeight: "1.9", paragraphSpacing: "24px", headingAlign: "left" },
+ letter: {
+ fontSize: "15px",
+ lineHeight: "2",
+ paragraphSpacing: "28px",
+ letterSpacing: "0.06em",
+ headingLetterSpacing: "0.08em",
+ headingAlign: "center",
+ },
+ guide: {
+ fontSize: "15px",
+ lineHeight: "1.72",
+ paragraphSpacing: "14px",
+ letterSpacing: "0.01em",
+ headingLetterSpacing: "0.02em",
+ headingAlign: "left",
+ },
+ blueprint: {
+ fontSize: "16px",
+ lineHeight: "1.78",
+ paragraphSpacing: "18px",
+ letterSpacing: "0.02em",
+ headingLetterSpacing: "0.04em",
+ headingAlign: "left",
+ },
+ journal: {
+ fontSize: "16px",
+ lineHeight: "1.95",
+ paragraphSpacing: "28px",
+ letterSpacing: "0.04em",
+ headingLetterSpacing: "0.06em",
+ headingAlign: "left",
+ },
+ stance: {
+ fontSize: "16px",
+ lineHeight: "1.68",
+ paragraphSpacing: "16px",
+ letterSpacing: "0em",
+ headingLetterSpacing: "0.01em",
+ headingAlign: "left",
+ },
+ stub: {
+ fontSize: "15px",
+ lineHeight: "1.88",
+ paragraphSpacing: "30px",
+ letterSpacing: "0.08em",
+ headingLetterSpacing: "0.14em",
+ headingAlign: "left",
+ },
+ brief: {
+ fontSize: "15px",
+ lineHeight: "1.82",
+ paragraphSpacing: "22px",
+ letterSpacing: "0.03em",
+ headingLetterSpacing: "0.05em",
+ headingAlign: "left",
+ },
+ outline: {
+ fontSize: "16px",
+ lineHeight: "1.76",
+ paragraphSpacing: "20px",
+ letterSpacing: "0.05em",
+ headingLetterSpacing: "0.1em",
+ headingAlign: "left",
+ },
+ zen: {
+ fontSize: "16px",
+ lineHeight: "2.2",
+ paragraphSpacing: "36px",
+ letterSpacing: "0.1em",
+ headingLetterSpacing: "0.12em",
+ headingAlign: "left",
+ },
+ grove: {
+ fontSize: "15px",
+ lineHeight: "1.98",
+ paragraphSpacing: "26px",
+ letterSpacing: "0.045em",
+ headingLetterSpacing: "0.06em",
+ headingAlign: "left",
+ },
};
+const hexToRgbChannels = (hex: string) => {
+ const value = hex.replace("#", "");
+ if (!/^[0-9a-fA-F]{6}$/.test(value)) return "22 160 110";
+ return [0, 2, 4].map((offset) => Number.parseInt(value.slice(offset, offset + 2), 16)).join(" ");
+};
+
+export const publishColorCssVars = (
+ palette: PublishPalette,
+ host: "editor" | "article" = "editor",
+): Record => ({
+ "--publish-accent": palette.accent,
+ "--publish-accent-soft": palette.accentSoft,
+ "--publish-accent-border": palette.accentBorder,
+ "--publish-accent-grid": palette.accentGrid,
+ "--publish-text": palette.text,
+ "--publish-text-strong": palette.textStrong,
+ "--publish-text-muted": palette.textMuted,
+ "--publish-surface": palette.surface,
+ "--publish-divider": palette.divider,
+ "--publish-link": palette.link,
+ "--publish-code-bg": palette.codeBg,
+ "--publish-code-text": palette.codeText,
+ "--publish-bg": palette.bg,
+ "--brand-green-rgb": hexToRgbChannels(palette.accent),
+ "--brand-green-hover-rgb": hexToRgbChannels(palette.link),
+ "--brand-green-200-rgb": hexToRgbChannels(palette.accentBorder),
+ "--brand-green-300-rgb": hexToRgbChannels(palette.accent),
+ "--brand-green-600-rgb": hexToRgbChannels(palette.link),
+ "--memo-content-divider-color": palette.accentBorder,
+ ...(host === "article"
+ ? {
+ "--brand-green": palette.accent,
+ "--brand-green-hover": palette.link,
+ "--brand-green-muted": palette.accentSoft,
+ "--brand-green-soft": palette.surface,
+ "--brand-green-border": palette.accentBorder,
+ "--brand-green-text": palette.link,
+ }
+ : {}),
+});
+
export const publishEditorCssVars = (
layout: PublishLayoutId,
paletteId: PublishPaletteId,
@@ -313,18 +646,10 @@ export const publishEditorCssVars = (
"--editor-body-font-size": rhythm.fontSize,
"--editor-body-line-height": rhythm.lineHeight,
"--editor-paragraph-spacing": rhythm.paragraphSpacing,
- "--publish-accent": palette.accent,
- "--publish-accent-soft": palette.accentSoft,
- "--publish-accent-border": palette.accentBorder,
- "--publish-text": palette.text,
- "--publish-text-strong": palette.textStrong,
- "--publish-text-muted": palette.textMuted,
- "--publish-surface": palette.surface,
- "--publish-divider": palette.divider,
- "--publish-link": palette.link,
- "--publish-code-bg": palette.codeBg,
- "--publish-code-text": palette.codeText,
- "--publish-bg": palette.bg,
+ "--editor-letter-spacing": rhythm.letterSpacing,
+ "--editor-heading-letter-spacing": rhythm.headingLetterSpacing,
+ ...publishColorCssVars(palette),
+ ...publishOrnamentCssVars(),
};
};
@@ -336,6 +661,102 @@ const css = (declarations: Record) =>
export type PublishTagStyles = Record;
+const quoteStyleRules = (
+ layout: PublishLayoutId,
+ palette: PublishPalette,
+ phone: boolean,
+): Record => {
+ const chrome = PUBLISH_LAYOUT_CHROME[layout];
+ const bottom = phone ? "14px" : "28px";
+ const pad = phone ? "10px 12px" : "16px 18px";
+ switch (chrome.quote) {
+ case "grid-card":
+ return {
+ margin: `0 0 ${bottom}`,
+ padding: phone ? "14px 14px 16px 18px" : "18px 16px 20px 22px",
+ border: `1px solid ${palette.accentBorder}`,
+ "border-radius": "18px",
+ "background-color": palette.surface,
+ "background-image": `linear-gradient(to right, ${palette.accentGrid} 1px, transparent 1px), linear-gradient(to bottom, ${palette.accentGrid} 1px, transparent 1px)`,
+ "background-size": "30px 30px",
+ color: palette.textMuted,
+ };
+ case "panel":
+ return {
+ margin: `0 0 ${bottom}`,
+ padding: pad,
+ border: `1px solid ${palette.accentBorder}`,
+ "border-radius": "10px",
+ background: palette.surface,
+ color: palette.textMuted,
+ };
+ case "marks":
+ return {
+ margin: `0 0 ${bottom}`,
+ padding: phone ? "12px 14px 14px" : "16px 18px 18px",
+ border: `1px solid ${palette.accentBorder}`,
+ "border-radius": "12px",
+ background: palette.accentSoft,
+ color: palette.textMuted,
+ };
+ case "rule-thick":
+ return {
+ margin: `0 0 ${bottom}`,
+ padding: phone ? "8px 0 8px 14px" : "6px 0 6px 16px",
+ "border-left": `4px solid ${palette.accent}`,
+ background: "transparent",
+ color: palette.textMuted,
+ };
+ case "banner":
+ return {
+ margin: "0",
+ padding: phone ? "12px 14px 14px" : "14px 16px 16px",
+ border: "0",
+ background: palette.accentSoft,
+ color: palette.textMuted,
+ };
+ case "labeled":
+ return {
+ margin: `0 0 ${bottom}`,
+ padding: "0",
+ border: "0",
+ background: "transparent",
+ color: palette.textStrong,
+ "text-align": "center",
+ "font-weight": "600",
+ };
+ case "italic-center":
+ return {
+ margin: `0 0 ${bottom}`,
+ padding: phone ? "4px 8px" : "4px 24px",
+ border: "0",
+ background: "transparent",
+ color: palette.textMuted,
+ "font-style": "italic",
+ "text-align": "center",
+ };
+ case "italic-rule":
+ return {
+ margin: `0 0 ${bottom}`,
+ padding: phone ? "12px 4px" : "18px 8px",
+ "border-top": `1px solid ${palette.accentBorder}`,
+ "border-bottom": `1px solid ${palette.accentBorder}`,
+ background: palette.surface,
+ color: palette.textMuted,
+ "font-style": "italic",
+ };
+ case "rule":
+ default:
+ return {
+ margin: `0 0 ${bottom}`,
+ padding: phone ? "4px 0 4px 12px" : "4px 0 4px 16px",
+ "border-left": `3px solid ${palette.accent}`,
+ background: "transparent",
+ color: palette.textMuted,
+ };
+ }
+};
+
export const buildPublishStyles = (
layout: PublishLayoutId,
palette: PublishPalette,
@@ -343,132 +764,30 @@ export const buildPublishStyles = (
): PublishTagStyles => {
const rhythm = resolvePublishRhythm(layout, surface);
const phone = surface === "phone";
- const align = rhythm.headingAlign;
- const h1AlignRules =
- layout === "letter"
- ? {
- "text-align": "center",
- "border-bottom": `3px solid ${palette.accent}`,
- "padding-bottom": "10px",
- }
- : layout === "blueprint"
- ? {
- "text-align": "left",
- "border-top": `3px solid ${palette.accent}`,
- "padding-top": "10px",
- }
- : layout === "stance"
- ? {
- "text-align": "left",
- "border-bottom": `6px solid ${palette.accent}`,
- "padding-bottom": "10px",
- }
- : layout === "stub"
- ? {
- "text-align": "left",
- "letter-spacing": "0.12em",
- "border-bottom": `1px dashed ${palette.accent}`,
- "padding-bottom": "10px",
- }
- : layout === "outline"
- ? {
- "text-align": "left",
- "letter-spacing": "0.06em",
- "border-bottom": `1px solid ${palette.divider}`,
- "padding-bottom": "10px",
- }
- : layout === "zen"
- ? { "text-align": "left", "font-weight": "600" }
- : { "text-align": align };
-
+ const chrome = PUBLISH_LAYOUT_CHROME[layout];
+ const h1Weight = layout === "letter" || layout === "guide" || layout === "stance" ? "800" : "700";
const h2Rules =
- layout === "guide" || layout === "blueprint" || layout === "stance"
- ? {
- "border-left": layout === "stance" ? `6px solid ${palette.accent}` : `4px solid ${palette.accent}`,
- "padding-left": "12px",
- }
- : layout === "journal" || layout === "grove"
- ? {
- "border-bottom": `1px solid ${palette.divider}`,
- "padding-bottom": "8px",
- }
- : layout === "stub"
- ? {
- "border-bottom": `1px dashed ${palette.accentBorder}`,
- "padding-bottom": "8px",
- }
- : {};
-
+ layout === "blueprint"
+ ? { "border-left": `3px solid ${palette.accent}`, "padding-left": "12px" }
+ : layout === "grove"
+ ? { "display": "inline-block", "border-bottom": `2px solid ${palette.accent}`, "padding-bottom": "6px" }
+ : {};
const h3Rules =
- layout === "letter"
- ? {
- "text-align": "center",
- "border-bottom": `2px solid ${palette.accentBorder}`,
- "padding-bottom": "8px",
- }
- : layout === "blueprint" || layout === "stance"
- ? {
- "border-bottom": `2px solid ${palette.accent}`,
- "padding-bottom": "6px",
- }
- : layout === "stub"
- ? {
- "border-bottom": `1px dashed ${palette.accentBorder}`,
- "padding-bottom": "6px",
- }
+ chrome.small === "bookmark"
+ ? { "text-align": "center" }
+ : chrome.small === "bar"
+ ? { "border-left": `3px solid ${palette.accent}`, "padding-left": "10px" }
+ : chrome.small === "slash"
+ ? { "text-align": "center", color: palette.accent }
: {};
-
- const quoteRules =
- layout === "letter" || layout === "grove"
- ? {
- margin: "0 0 28px",
- padding: "16px 18px",
- border: `1px solid ${palette.accentBorder}`,
- "border-radius": layout === "grove" ? "16px" : "12px",
- background: palette.surface,
- color: palette.textMuted,
- }
- : layout === "journal" || layout === "zen"
- ? {
- margin: "0 0 28px",
- padding: layout === "zen" ? "8px 0 8px 0" : "4px 0 4px 16px",
- "border-left": layout === "zen" ? "0" : `2px solid ${palette.divider}`,
- background: "transparent",
- color: palette.textMuted,
- "font-style": "italic",
- }
- : layout === "stub"
- ? {
- margin: "0 0 28px",
- padding: "14px 16px",
- border: `1px dashed ${palette.accent}`,
- "border-radius": "2px",
- background: palette.surface,
- color: palette.textMuted,
- }
- : layout === "outline"
- ? {
- margin: "0 0 24px",
- padding: "12px 16px",
- border: `1px solid ${palette.divider}`,
- background: "transparent",
- color: palette.textMuted,
- }
- : {
- margin: "0 0 24px",
- padding: "12px 16px",
- "border-left": layout === "stance" ? `6px solid ${palette.accent}` : `4px solid ${palette.accent}`,
- background: palette.accentSoft,
- color: palette.textMuted,
- };
-
- const quote = phone ? { ...quoteRules, margin: "0 0 14px", padding: "10px 12px" } : quoteRules;
+ const quote = quoteStyleRules(layout, palette, phone);
return {
root: css({
"font-family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif",
"font-size": rhythm.fontSize,
"line-height": rhythm.lineHeight,
+ "letter-spacing": rhythm.letterSpacing,
color: palette.text,
"background-color": palette.bg,
"word-break": "break-word",
@@ -477,26 +796,28 @@ export const buildPublishStyles = (
margin: `0 0 ${rhythm.paragraphSpacing}`,
padding: "0",
"line-height": rhythm.lineHeight,
+ "letter-spacing": rhythm.letterSpacing,
"font-size": rhythm.fontSize,
color: palette.text,
}),
h1: css({
- ...h1AlignRules,
- margin: phone ? "0 0 12px" : "0 0 24px",
+ "text-align": chrome.h1Align,
+ margin: phone ? "0 0 12px" : "0 0 18px",
"font-size": phone
? PHONE_ARTICLE_RHYTHM.h1Size
: layout === "journal" || layout === "zen"
? "26px"
: "24px",
"line-height": phone ? "1.4" : "1.35",
- "font-weight": "800",
- ...(phone ? { "letter-spacing": "0.02em" } : {}),
+ "letter-spacing": rhythm.headingLetterSpacing,
+ "font-weight": h1Weight,
color: palette.textStrong,
}),
h2: css({
margin: phone ? "18px 0 10px" : "28px 0 16px",
"font-size": phone ? PHONE_ARTICLE_RHYTHM.h2Size : "20px",
"line-height": "1.35",
+ "letter-spacing": rhythm.headingLetterSpacing,
"font-weight": phone ? "600" : "700",
color: palette.textStrong,
"text-align": "left",
@@ -506,29 +827,34 @@ export const buildPublishStyles = (
margin: phone ? "14px 0 8px" : "24px 0 12px",
"font-size": phone ? PHONE_ARTICLE_RHYTHM.h3Size : layout === "letter" ? "15px" : "16px",
"line-height": "1.45",
+ "letter-spacing": rhythm.headingLetterSpacing,
"font-weight": "700",
- color: palette.textStrong,
+ color: chrome.small === "slash" ? palette.accent : palette.textStrong,
...h3Rules,
}),
blockquote: css({
"line-height": rhythm.lineHeight,
+ "letter-spacing": rhythm.letterSpacing,
...quote,
}),
ul: css({
margin: "0 0 1em",
"padding-left": "1.6em",
"line-height": rhythm.lineHeight,
+ "letter-spacing": rhythm.letterSpacing,
color: palette.text,
}),
ol: css({
margin: "0 0 1em",
"padding-left": "1.6em",
+ "letter-spacing": rhythm.letterSpacing,
"line-height": rhythm.lineHeight,
color: palette.text,
}),
li: css({
margin: "0.25em 0",
"line-height": rhythm.lineHeight,
+ "letter-spacing": rhythm.letterSpacing,
color: palette.text,
}),
a: css({
@@ -537,7 +863,7 @@ export const buildPublishStyles = (
}),
strong: css({
"font-weight": "700",
- color: palette.accent,
+ color: chrome.strongAccent ? palette.accent : palette.textStrong,
}),
em: css({
"font-style": "italic",
@@ -649,24 +975,512 @@ const themeBlockStyles = (
const isChromeElement = (element: HTMLElement) => element.getAttribute("data-ee-publish-chrome") === "true";
-const wrapHeading = (heading: HTMLElement) => {
- if (heading.parentElement?.getAttribute("data-ee-publish-heading")) {
- return heading.parentElement;
- }
- const document = heading.ownerDocument;
- const wrapper = document.createElement("section");
- wrapper.setAttribute("data-ee-publish-heading", heading.tagName.toLowerCase());
- heading.parentNode?.insertBefore(wrapper, heading);
- wrapper.appendChild(heading);
+const SERIF_STACK = "Georgia, 'Times New Roman', serif";
+
+const chromeNode = (doc: Document, tag: string, text: string, style: string) => {
+ const node = doc.createElement(tag);
+ node.setAttribute("data-ee-publish-chrome", "true");
+ node.textContent = text;
+ node.style.cssText = style;
+ return node;
+};
+
+const chromeOrnament = (doc: Document, id: PublishOrnamentId, color: string, style: string) => {
+ const image = doc.createElement("img");
+ image.setAttribute("data-ee-publish-chrome", "true");
+ image.setAttribute("data-ee-publish-ornament", id);
+ image.alt = "";
+ image.src = publishOrnamentDataUri(id, color);
+ image.style.cssText = style;
+ return image;
+};
+
+const wrapBlock = (element: HTMLElement, attr: string, value: string) => {
+ if (element.parentElement?.getAttribute(attr) === value) return element.parentElement;
+ const wrapper = element.ownerDocument.createElement("section");
+ wrapper.setAttribute(attr, value);
+ element.parentNode?.insertBefore(wrapper, element);
+ wrapper.appendChild(element);
return wrapper;
};
+const wrapHeading = (heading: HTMLElement) => wrapBlock(heading, "data-ee-publish-heading", heading.tagName.toLowerCase());
+
+const appendTitleRule = (
+ wrapper: HTMLElement,
+ palette: PublishPalette,
+ phone: boolean,
+ kind: PublishTitleRule,
+ align: "left" | "center",
+ ornament?: PublishOrnamentId,
+) => {
+ if (kind === "none") return;
+ if (ornament) {
+ wrapper.appendChild(
+ chromeOrnament(
+ wrapper.ownerDocument,
+ ornament,
+ palette.accent,
+ css({
+ display: "block",
+ width: phone ? "112px" : "148px",
+ height: "auto",
+ margin: align === "center" ? "8px auto 0" : "8px 0 0",
+ padding: "0",
+ border: "0",
+ }),
+ ),
+ );
+ return;
+ }
+ const bar = chromeNode(
+ wrapper.ownerDocument,
+ "p",
+ "",
+ css({
+ width: kind === "brush" ? (align === "center" ? "42%" : "72px") : "42px",
+ height: "3px",
+ margin: align === "center" ? "8px auto 0" : "8px 0 0",
+ padding: "0",
+ border: "0",
+ background: palette.accent,
+ "font-size": "0",
+ "line-height": "0",
+ }),
+ );
+ wrapper.appendChild(bar);
+ if (phone) bar.style.marginTop = "6px";
+};
+
+const decorateTitle = (
+ heading: HTMLElement,
+ chrome: PublishLayoutChrome,
+ palette: PublishPalette,
+ phone: boolean,
+ layout: PublishLayoutId,
+) => {
+ const ornaments = PUBLISH_LAYOUT_ORNAMENTS[layout];
+ const wrapper = wrapHeading(heading);
+ wrapper.style.cssText = css({
+ margin: phone ? "0 0 16px" : "0 0 24px",
+ padding: "0",
+ });
+ heading.style.margin = "0";
+ if (chrome.kicker) {
+ wrapper.insertBefore(
+ chromeNode(
+ heading.ownerDocument,
+ "p",
+ chrome.kicker,
+ css({
+ margin: "0 0 8px",
+ padding: "0",
+ color: palette.accent,
+ "font-size": "11px",
+ "font-weight": "600",
+ "letter-spacing": "0.16em",
+ "line-height": "1.4",
+ }),
+ ),
+ heading,
+ );
+ }
+ if (ornaments?.titleEnd) {
+ const table = heading.ownerDocument.createElement("table");
+ table.style.cssText = css({
+ width: "auto",
+ "max-width": "100%",
+ "border-collapse": "collapse",
+ margin: chrome.h1Align === "center" ? "0 auto" : "0",
+ padding: "0",
+ border: "0",
+ });
+ const row = heading.ownerDocument.createElement("tr");
+ const titleCell = heading.ownerDocument.createElement("td");
+ titleCell.style.cssText = "padding:0;border:0;vertical-align:middle;";
+ titleCell.appendChild(heading);
+ const markCell = heading.ownerDocument.createElement("td");
+ markCell.setAttribute("data-ee-publish-chrome", "true");
+ markCell.style.cssText = "padding:0 0 0 8px;border:0;vertical-align:middle;width:1%;";
+ markCell.appendChild(
+ chromeOrnament(
+ heading.ownerDocument,
+ ornaments.titleEnd,
+ palette.accent,
+ css({
+ display: "block",
+ width: phone ? "22px" : "28px",
+ height: "auto",
+ margin: "0",
+ padding: "0",
+ border: "0",
+ }),
+ ),
+ );
+ row.appendChild(titleCell);
+ row.appendChild(markCell);
+ table.appendChild(row);
+ wrapper.appendChild(table);
+ }
+ appendTitleRule(wrapper, palette, phone, chrome.h1Rule, chrome.h1Align, ornaments?.titleRule);
+ if (chrome.h1Vol) {
+ wrapper.appendChild(
+ chromeNode(
+ heading.ownerDocument,
+ "p",
+ "VOL. 01",
+ css({
+ margin: "6px 0 0",
+ padding: "0",
+ color: palette.textMuted,
+ "font-size": "11px",
+ "font-weight": "600",
+ "letter-spacing": "0.14em",
+ }),
+ ),
+ );
+ }
+};
+
+const asideNumberTable = (
+ heading: HTMLElement,
+ number: string,
+ palette: PublishPalette,
+ phone: boolean,
+ options: {
+ serif?: boolean;
+ part?: boolean;
+ badge?: boolean;
+ mark?: PublishOrnamentId;
+ end?: PublishOrnamentId;
+ },
+) => {
+ const wrapper = wrapHeading(heading);
+ wrapper.style.cssText = css({
+ margin: phone ? "18px 0 12px" : "28px 0 16px",
+ padding: "0",
+ });
+ const doc = heading.ownerDocument;
+ const table = doc.createElement("table");
+ table.style.cssText = "width:100%;border-collapse:collapse;margin:0;padding:0;border:0;";
+ const row = doc.createElement("tr");
+ const numberCell = doc.createElement("td");
+ numberCell.setAttribute("data-ee-publish-chrome", "true");
+ numberCell.style.cssText = css({
+ width: options.badge ? "1%" : "1%",
+ padding: options.badge ? "0 10px 0 0" : "0 12px 0 0",
+ "vertical-align": "middle",
+ "white-space": "nowrap",
+ border: "0",
+ });
+ const numberLabel = chromeNode(
+ doc,
+ "p",
+ number,
+ options.badge
+ ? css({
+ margin: "0",
+ padding: phone ? "5px 8px" : "6px 8px",
+ color: "#ffffff",
+ background: palette.accent,
+ "border-radius": "6px",
+ "font-size": phone ? "13px" : "14px",
+ "font-weight": "700",
+ "line-height": "1",
+ "text-align": "center",
+ "white-space": "nowrap",
+ })
+ : css({
+ margin: "0",
+ padding: "0",
+ color: palette.accent,
+ "font-family": options.serif ? SERIF_STACK : "inherit",
+ "font-size": phone ? "28px" : options.serif ? "42px" : "34px",
+ "font-style": options.serif ? "italic" : "normal",
+ "font-weight": "700",
+ "line-height": "1",
+ "white-space": "nowrap",
+ }),
+ );
+ numberCell.appendChild(numberLabel);
+ if (options.part) {
+ numberCell.appendChild(
+ chromeNode(
+ doc,
+ "p",
+ "PART",
+ css({
+ margin: "4px 0 0",
+ padding: "0",
+ color: palette.accent,
+ "font-size": "10px",
+ "font-weight": "700",
+ "letter-spacing": "0.16em",
+ "line-height": "1",
+ }),
+ ),
+ );
+ }
+ const titleCell = doc.createElement("td");
+ titleCell.style.cssText = "vertical-align:middle;padding:0;border:0;";
+ heading.style.margin = "0";
+ heading.style.padding = "0";
+ titleCell.appendChild(heading);
+ row.appendChild(numberCell);
+ if (options.mark) {
+ const markCell = doc.createElement("td");
+ markCell.setAttribute("data-ee-publish-chrome", "true");
+ markCell.style.cssText = "vertical-align:middle;padding:0 8px 0 0;border:0;width:1%;";
+ markCell.appendChild(
+ chromeOrnament(
+ doc,
+ options.mark,
+ palette.accent,
+ css({
+ display: "block",
+ width: phone ? "18px" : "22px",
+ height: "auto",
+ margin: "0",
+ padding: "0",
+ border: "0",
+ }),
+ ),
+ );
+ row.appendChild(markCell);
+ }
+ row.appendChild(titleCell);
+ if (options.end) {
+ const endCell = doc.createElement("td");
+ endCell.setAttribute("data-ee-publish-chrome", "true");
+ endCell.style.cssText = "vertical-align:middle;padding:0 0 0 8px;border:0;width:1%;";
+ endCell.appendChild(
+ chromeOrnament(
+ doc,
+ options.end,
+ palette.accent,
+ css({
+ display: "block",
+ width: phone ? "22px" : "26px",
+ height: "auto",
+ margin: "0",
+ padding: "0",
+ border: "0",
+ }),
+ ),
+ );
+ row.appendChild(endCell);
+ }
+ table.appendChild(row);
+ wrapper.appendChild(table);
+ return wrapper;
+};
+
+const decorateChapter = (
+ heading: HTMLElement,
+ chapterLabel: string,
+ chrome: PublishLayoutChrome,
+ palette: PublishPalette,
+ phone: boolean,
+ layout: PublishLayoutId,
+) => {
+ const stacked = (lines: Array<{ text: string; style: string }>) => {
+ const wrapper = wrapHeading(heading);
+ wrapper.style.cssText = css({
+ margin: phone ? "18px 0 12px" : "28px 0 16px",
+ padding: "0",
+ });
+ for (const line of lines) {
+ wrapper.insertBefore(chromeNode(heading.ownerDocument, "p", line.text, line.style), heading);
+ }
+ heading.style.margin = "6px 0 0";
+ return wrapper;
+ };
+
+ const ornaments = PUBLISH_LAYOUT_ORNAMENTS[layout];
+ switch (chrome.chapter) {
+ case "aside-serif":
+ return asideNumberTable(heading, chapterLabel, palette, phone, {
+ serif: true,
+ mark: ornaments?.chapterMark,
+ end: ornaments?.chapterEnd,
+ });
+ case "aside-part":
+ return asideNumberTable(heading, chapterLabel, palette, phone, { serif: true, part: true });
+ case "badge":
+ return asideNumberTable(heading, chapterLabel, palette, phone, { badge: true });
+ case "badge-section": {
+ const wrapper = asideNumberTable(heading, chapterLabel, palette, phone, { badge: true });
+ const titleCell = wrapper.querySelector("td:last-child");
+ if (titleCell && heading.parentElement === titleCell) {
+ titleCell.insertBefore(
+ chromeNode(
+ heading.ownerDocument,
+ "p",
+ `SECTION ${chapterLabel}`,
+ css({
+ margin: "0 0 4px",
+ padding: "0",
+ color: palette.accent,
+ "font-size": "11px",
+ "font-weight": "700",
+ "letter-spacing": "0.14em",
+ }),
+ ),
+ heading,
+ );
+ }
+ return wrapper;
+ }
+ case "stacked-section":
+ return stacked([
+ {
+ text: chapterLabel,
+ style: css({
+ margin: "0",
+ padding: "0",
+ color: palette.accent,
+ "font-family": SERIF_STACK,
+ "font-size": phone ? "36px" : "52px",
+ "font-style": "italic",
+ "font-weight": "700",
+ "line-height": "0.9",
+ "white-space": "nowrap",
+ }),
+ },
+ {
+ text: `SECTION ${chapterLabel}`,
+ style: css({
+ margin: "6px 0 0",
+ padding: "0",
+ color: palette.textMuted,
+ "font-size": "11px",
+ "font-weight": "700",
+ "letter-spacing": "0.16em",
+ }),
+ },
+ ]);
+ case "kicker":
+ return stacked([
+ {
+ text: `${chapterLabel} · CHAPTER ONE`,
+ style: css({
+ margin: "0",
+ padding: "0",
+ color: palette.textMuted,
+ "font-size": "11px",
+ "font-weight": "600",
+ "letter-spacing": "0.16em",
+ }),
+ },
+ ]);
+ case "issue":
+ return stacked([
+ {
+ text: `NO. ${chapterLabel}`,
+ style: css({
+ margin: "0",
+ padding: "0",
+ color: palette.textMuted,
+ "font-size": "11px",
+ "font-weight": "600",
+ "letter-spacing": "0.16em",
+ }),
+ },
+ ]);
+ default:
+ return wrapHeading(heading);
+ }
+};
+
+const decorateSmallHeading = (
+ heading: HTMLElement,
+ chrome: PublishLayoutChrome,
+ palette: PublishPalette,
+ phone: boolean,
+) => {
+ const wrapper = wrapHeading(heading);
+ wrapper.style.cssText = css({
+ margin: phone ? "14px 0 8px" : "24px 0 12px",
+ padding: "0",
+ });
+ heading.style.margin = "0";
+ if (chrome.small === "bookmark") {
+ heading.style.textAlign = "center";
+ const rule = heading.ownerDocument.createElement("table");
+ rule.setAttribute("data-ee-publish-chrome", "true");
+ rule.style.cssText = "width:160px;margin:10px auto 0;border-collapse:collapse;border:0;";
+ const row = heading.ownerDocument.createElement("tr");
+ const accent = heading.ownerDocument.createElement("td");
+ accent.setAttribute("data-ee-publish-chrome", "true");
+ accent.style.cssText = `width:28px;height:0;padding:0;border-top:3px solid ${palette.accent};`;
+ const rest = heading.ownerDocument.createElement("td");
+ rest.setAttribute("data-ee-publish-chrome", "true");
+ rest.style.cssText = `height:0;padding:0;border-top:1px solid ${palette.accentBorder};`;
+ row.appendChild(accent);
+ row.appendChild(rest);
+ rule.appendChild(row);
+ wrapper.appendChild(rule);
+ }
+ if (chrome.small === "slash") {
+ wrapper.style.textAlign = "center";
+ heading.style.textAlign = "center";
+ heading.style.color = palette.accent;
+ wrapper.insertBefore(
+ chromeNode(
+ heading.ownerDocument,
+ "p",
+ `//`,
+ css({
+ display: "inline-block",
+ margin: "0 8px 0 0",
+ padding: "0",
+ color: palette.accent,
+ "font-weight": "800",
+ }),
+ ),
+ heading,
+ );
+ wrapper.appendChild(
+ chromeNode(
+ heading.ownerDocument,
+ "p",
+ `//`,
+ css({
+ display: "inline-block",
+ margin: "0 0 0 8px",
+ padding: "0",
+ color: palette.accent,
+ "font-weight": "800",
+ }),
+ ),
+ );
+ heading.style.display = "inline";
+ }
+ if (chrome.small === "dash") {
+ wrapper.insertBefore(
+ chromeNode(
+ heading.ownerDocument,
+ "span",
+ "— ",
+ css({
+ color: palette.textMuted,
+ "font-weight": "600",
+ }),
+ ),
+ heading,
+ );
+ heading.style.display = "inline";
+ }
+};
+
const decorateHeadings = (
root: HTMLElement,
layout: PublishLayoutId,
palette: PublishPalette,
surface: PublishSurface = "desktop",
) => {
+ const chrome = PUBLISH_LAYOUT_CHROME[layout];
+ const phone = surface === "phone";
const headings = Array.from(root.querySelectorAll("h1, h2, h3")).filter((heading) => {
if (heading.closest("table, pre, [data-edgeever-theme-block]")) return false;
if (heading.closest("[data-ee-publish-heading]")) return false;
@@ -678,28 +1492,182 @@ const decorateHeadings = (
const tag = heading.tagName.toLowerCase();
const plan = planHeadingDecoration(tag, layout, chapterIndex);
if (plan.kind === "chapter") chapterIndex += 1;
- if (plan.kind !== "chapter" || !plan.chapterLabel) continue;
-
- const wrapper = wrapHeading(heading);
- wrapper.style.cssText = "margin: 0; padding: 0;";
- const label = heading.ownerDocument.createElement("p");
- label.setAttribute("data-ee-publish-chrome", "true");
- label.textContent = plan.chapterLabel;
- label.style.cssText = css({
- margin: surface === "phone" ? "16px 0 0" : "28px 0 0",
- padding: "0",
- color: palette.accent,
- "font-size": surface === "phone" ? "15px" : layout === "letter" ? "28px" : "13px",
- "line-height": "1.1",
- "font-weight": "700",
- "font-style": layout === "letter" ? "italic" : "normal",
- "letter-spacing": layout === "blueprint" ? "0.08em" : "0",
- });
- wrapper.insertBefore(label, heading);
- heading.style.margin = surface === "phone" ? "4px 0 10px" : "6px 0 16px";
+ if (plan.kind === "title") {
+ decorateTitle(heading, chrome, palette, phone, layout);
+ continue;
+ }
+ if (plan.kind === "chapter" && plan.chapterLabel) {
+ decorateChapter(heading, plan.chapterLabel, chrome, palette, phone, layout);
+ continue;
+ }
+ if (plan.kind === "small") {
+ decorateSmallHeading(heading, chrome, palette, phone);
+ }
+ const headingRule = PUBLISH_LAYOUT_ORNAMENTS[layout]?.headingRule;
+ if (tag === "h2" && headingRule) {
+ const wrapper = wrapHeading(heading);
+ wrapper.appendChild(
+ chromeOrnament(
+ heading.ownerDocument,
+ headingRule,
+ palette.accent,
+ css({
+ display: "block",
+ width: phone ? "72px" : "96px",
+ height: "auto",
+ margin: "6px 0 0",
+ padding: "0",
+ border: "0",
+ }),
+ ),
+ );
+ }
}
};
+const decorateQuotes = (
+ root: HTMLElement,
+ layout: PublishLayoutId,
+ palette: PublishPalette,
+ surface: PublishSurface = "desktop",
+) => {
+ const chrome = PUBLISH_LAYOUT_CHROME[layout];
+ const phone = surface === "phone";
+ root.querySelectorAll("blockquote").forEach((quote) => {
+ if (quote.closest("[data-ee-publish-quote], table, pre, [data-edgeever-theme-block]")) return;
+ const wrapper = wrapBlock(quote, "data-ee-publish-quote", chrome.quote);
+ wrapper.style.cssText = css({
+ margin: phone ? "0 0 14px" : "0 0 28px",
+ padding: "0",
+ });
+ quote.style.margin = "0";
+ const ornaments = PUBLISH_LAYOUT_ORNAMENTS[layout];
+ if (ornaments?.quoteTape) {
+ const tapeRow = chromeNode(
+ quote.ownerDocument,
+ "p",
+ "",
+ css({
+ margin: phone ? "0 8px -4px 0" : "0 12px -6px 0",
+ padding: "0",
+ "text-align": "right",
+ "font-size": "0",
+ "line-height": "0",
+ }),
+ );
+ tapeRow.appendChild(
+ chromeOrnament(
+ quote.ownerDocument,
+ ornaments.quoteTape,
+ palette.accent,
+ css({
+ display: "inline-block",
+ width: phone ? "42px" : "54px",
+ height: "auto",
+ margin: "0",
+ padding: "0",
+ border: "0",
+ transform: "rotate(12deg)",
+ }),
+ ),
+ );
+ wrapper.insertBefore(tapeRow, quote);
+ }
+ if (chrome.quote === "banner" && chrome.quoteBanner) {
+ wrapper.style.overflow = "hidden";
+ wrapper.style.borderRadius = "8px";
+ wrapper.insertBefore(
+ chromeNode(
+ quote.ownerDocument,
+ "p",
+ chrome.quoteBanner,
+ css({
+ margin: "0",
+ padding: phone ? "8px 12px" : "9px 16px",
+ color: "#ffffff",
+ background: palette.accent,
+ "font-size": "11px",
+ "font-weight": "700",
+ "letter-spacing": "0.16em",
+ }),
+ ),
+ quote,
+ );
+ }
+ if (chrome.quote === "labeled" && chrome.quoteBanner) {
+ wrapper.insertBefore(
+ chromeNode(
+ quote.ownerDocument,
+ "p",
+ chrome.quoteBanner,
+ css({
+ margin: "0 0 10px",
+ padding: "0",
+ color: palette.textMuted,
+ "font-size": "11px",
+ "font-weight": "700",
+ "letter-spacing": "0.18em",
+ "text-align": "center",
+ }),
+ ),
+ quote,
+ );
+ }
+ if (ornaments?.quoteMark) {
+ wrapper.insertBefore(
+ chromeOrnament(
+ quote.ownerDocument,
+ ornaments.quoteMark,
+ palette.accent,
+ css({
+ display: "block",
+ width: phone ? "22px" : "28px",
+ height: "auto",
+ margin: phone ? "0 0 2px 12px" : "0 0 4px 16px",
+ padding: "0",
+ border: "0",
+ }),
+ ),
+ quote,
+ );
+ } else if (chrome.quote === "marks" || chrome.quote === "grid-card") {
+ wrapper.insertBefore(
+ chromeNode(
+ quote.ownerDocument,
+ "p",
+ "“",
+ css({
+ margin: "0 0 4px",
+ padding: "0",
+ color: palette.accent,
+ "font-family": SERIF_STACK,
+ "font-size": phone ? "28px" : "34px",
+ "font-weight": "700",
+ "line-height": "1",
+ }),
+ ),
+ quote,
+ );
+ }
+ if (chrome.quote === "italic-center") {
+ wrapper.appendChild(
+ chromeNode(
+ quote.ownerDocument,
+ "p",
+ "—",
+ css({
+ margin: "8px 0 0",
+ padding: "0",
+ color: palette.accent,
+ "text-align": "center",
+ "letter-spacing": "0.2em",
+ }),
+ ),
+ );
+ }
+ });
+};
+
const applyThemeBlocks = (
root: HTMLElement,
layout: PublishLayoutId,
@@ -740,7 +1708,7 @@ export const applyPublishLayout = (
) => {
const palette = PUBLISH_PALETTES[paletteId] ?? PUBLISH_PALETTES[DEFAULT_PUBLISH_PALETTE];
const styles = buildPublishStyles(layout, palette, surface);
- root.style.cssText = styles.root;
+ root.style.cssText = `${styles.root}; ${css(publishColorCssVars(palette, "article"))}`;
root.querySelectorAll("*").forEach((element) => {
if (isChromeElement(element)) return;
@@ -764,6 +1732,7 @@ export const applyPublishLayout = (
});
decorateHeadings(root, layout, palette, surface);
+ decorateQuotes(root, layout, palette, surface);
applyThemeBlocks(root, layout, palette, surface);
};
diff --git a/apps/web/src/lib/publish-ornaments.test.mjs b/apps/web/src/lib/publish-ornaments.test.mjs
new file mode 100644
index 00000000..d95221cf
--- /dev/null
+++ b/apps/web/src/lib/publish-ornaments.test.mjs
@@ -0,0 +1,65 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import {
+ PUBLISH_LAYOUT_ORNAMENTS,
+ PUBLISH_ORNAMENT_IDS,
+ publishOrnamentCssVars,
+ publishOrnamentDataUri,
+ renderPublishOrnamentSvg,
+} from "./publish-ornaments.ts";
+
+describe("publish ornaments", () => {
+ test("renders original tintable stationery marks", () => {
+ expect(PUBLISH_ORNAMENT_IDS).toEqual([
+ "blossom",
+ "sprig",
+ "sun",
+ "tape",
+ "quote",
+ "brush",
+ "swoosh",
+ "leaf",
+ ]);
+ const svg = renderPublishOrnamentSvg("blossom", "#D9A521");
+ expect(svg).toContain("#D9A521");
+ expect(svg).not.toContain("{{color}}");
+ expect(svg).toContain(" {
+ expect(PUBLISH_LAYOUT_ORNAMENTS.letter).toEqual({
+ titleEnd: "sprig",
+ titleRule: "brush",
+ chapterMark: "blossom",
+ chapterEnd: "sun",
+ quoteMark: "quote",
+ quoteTape: "tape",
+ });
+ expect(PUBLISH_LAYOUT_ORNAMENTS.grove.headingRule).toBe("swoosh");
+ expect(PUBLISH_LAYOUT_ORNAMENTS.stub.quoteTape).toBe("tape");
+ });
+
+ test("exposes mask URLs for the writing canvas", () => {
+ const vars = publishOrnamentCssVars();
+ expect(vars["--publish-ornament-brush"]).toContain("url(\"data:image/svg+xml");
+ expect(vars["--publish-ornament-sun"]).toContain("url(\"data:image/svg+xml");
+ });
+});
+
+describe("ornament wiring", () => {
+ test("paper layout and WeChat copy inject and rasterize ornaments", () => {
+ const layout = readFileSync(new URL("./publish-layout.ts", import.meta.url), "utf8");
+ const wechat = readFileSync(new URL("./wechat-copy.ts", import.meta.url), "utf8");
+ const css = readFileSync(new URL("../styles/publish-layout.css", import.meta.url), "utf8");
+
+ expect(layout).toContain("chromeOrnament");
+ expect(layout).toContain("publishOrnamentCssVars");
+ expect(layout).toContain("data-ee-publish-ornament");
+ expect(wechat).toContain("rasterizePublishOrnamentsForWeChat");
+ expect(wechat).toContain("image/png");
+ expect(css).toContain("--publish-ornament-brush");
+ expect(css).toContain("--publish-ornament-tape");
+ expect(css).toContain("--publish-ornament-sprig");
+ });
+});
diff --git a/apps/web/src/lib/publish-ornaments.ts b/apps/web/src/lib/publish-ornaments.ts
new file mode 100644
index 00000000..a0bdd7ca
--- /dev/null
+++ b/apps/web/src/lib/publish-ornaments.ts
@@ -0,0 +1,115 @@
+export const PUBLISH_ORNAMENT_IDS = [
+ "blossom",
+ "sprig",
+ "sun",
+ "tape",
+ "quote",
+ "brush",
+ "swoosh",
+ "leaf",
+] as const;
+export type PublishOrnamentId = (typeof PUBLISH_ORNAMENT_IDS)[number];
+
+const COLOR_TOKEN = "{{color}}";
+
+const ORNAMENT_SVG: Record = {
+ blossom: ``,
+ sprig: ``,
+ sun: ``,
+ tape: ``,
+ quote: ``,
+ brush: ``,
+ swoosh: ``,
+ leaf: ``,
+};
+
+const compactSvg = (source: string) => source.replace(/\s+/g, " ").trim();
+
+export const renderPublishOrnamentSvg = (id: PublishOrnamentId, color: string) => {
+ const hex = /^#([0-9a-f]{6})$/i.test(color) ? color : "#111111";
+ return compactSvg(ORNAMENT_SVG[id].replaceAll(COLOR_TOKEN, hex));
+};
+
+export const publishOrnamentDataUri = (id: PublishOrnamentId, color: string) =>
+ `data:image/svg+xml;charset=utf-8,${encodeURIComponent(renderPublishOrnamentSvg(id, color))}`;
+
+export const publishOrnamentMaskUri = (id: PublishOrnamentId) => publishOrnamentDataUri(id, "#111111");
+
+export type PublishOrnamentPlacement = {
+ titleEnd?: PublishOrnamentId;
+ titleRule?: PublishOrnamentId;
+ chapterMark?: PublishOrnamentId;
+ chapterEnd?: PublishOrnamentId;
+ quoteMark?: PublishOrnamentId;
+ quoteTape?: PublishOrnamentId;
+ headingRule?: PublishOrnamentId;
+};
+
+export const PUBLISH_LAYOUT_ORNAMENTS: Record = {
+ letter: {
+ titleEnd: "sprig",
+ titleRule: "brush",
+ chapterMark: "blossom",
+ chapterEnd: "sun",
+ quoteMark: "quote",
+ quoteTape: "tape",
+ },
+ grove: {
+ headingRule: "swoosh",
+ quoteMark: "quote",
+ titleEnd: "leaf",
+ },
+ stub: {
+ quoteTape: "tape",
+ },
+};
+
+export const publishOrnamentCssVars = () => ({
+ "--publish-ornament-blossom": `url("${publishOrnamentMaskUri("blossom")}")`,
+ "--publish-ornament-sprig": `url("${publishOrnamentMaskUri("sprig")}")`,
+ "--publish-ornament-sun": `url("${publishOrnamentMaskUri("sun")}")`,
+ "--publish-ornament-tape": `url("${publishOrnamentMaskUri("tape")}")`,
+ "--publish-ornament-quote": `url("${publishOrnamentMaskUri("quote")}")`,
+ "--publish-ornament-brush": `url("${publishOrnamentMaskUri("brush")}")`,
+ "--publish-ornament-swoosh": `url("${publishOrnamentMaskUri("swoosh")}")`,
+ "--publish-ornament-leaf": `url("${publishOrnamentMaskUri("leaf")}")`,
+});
diff --git a/apps/web/src/lib/wechat-copy.ts b/apps/web/src/lib/wechat-copy.ts
index 4129900e..5759090f 100644
--- a/apps/web/src/lib/wechat-copy.ts
+++ b/apps/web/src/lib/wechat-copy.ts
@@ -231,6 +231,48 @@ const canvasToJpeg = (canvas: HTMLCanvasElement, quality = 0.86) =>
);
});
+const svgToTransparentPng = async (svg: string) => {
+ const objectUrl = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml;charset=utf-8" }));
+ try {
+ const image = new Image();
+ image.src = objectUrl;
+ await image.decode();
+ const canvas = document.createElement("canvas");
+ canvas.width = Math.max(1, image.naturalWidth);
+ canvas.height = Math.max(1, image.naturalHeight);
+ const context = canvas.getContext("2d");
+ if (!context) throw new Error("Could not create ornament canvas");
+ context.drawImage(image, 0, 0);
+ const blob = await new Promise((resolve, reject) => {
+ canvas.toBlob((png) => {
+ if (png) {
+ resolve(png);
+ return;
+ }
+ reject(new Error("Could not convert ornament to PNG"));
+ }, "image/png");
+ });
+ return blobToDataUrl(blob);
+ } finally {
+ URL.revokeObjectURL(objectUrl);
+ }
+};
+
+const rasterizePublishOrnamentsForWeChat = async (root: HTMLElement) => {
+ const images = Array.from(root.querySelectorAll("img[data-ee-publish-ornament]"));
+ await Promise.all(images.map(async (image) => {
+ const source = image.getAttribute("src")?.trim() ?? "";
+ if (!source.startsWith("data:image/svg+xml")) return;
+ try {
+ const encoded = source.replace(/^data:image\/svg\+xml(?:;charset=utf-8)?,/, "");
+ const svg = decodeURIComponent(encoded);
+ image.setAttribute("src", await svgToTransparentPng(svg));
+ } catch {
+ // Keep the SVG data URI in the live preview; WeChat copy can drop a broken ornament.
+ }
+ }));
+};
+
const svgToWeChatImage = async (svg: string) => {
const markup = prepareSvgMarkup(svg);
const size = getSvgSize(markup);
@@ -445,6 +487,7 @@ export const buildWeChatClipboardHtml = async (editor: Editor) => {
await embedMermaidForWeChat(container, editor);
const originalImages = Array.from(editor.view.dom.querySelectorAll("img")).filter(isContentImage);
await embedImagesForWeChat(container, originalImages);
+ await rasterizePublishOrnamentsForWeChat(container);
return container.outerHTML;
};
@@ -457,5 +500,6 @@ export const copyMarkdownToWeChat = async (markdown: string) => {
);
await embedMermaidForWeChat(container);
await embedImagesForWeChat(container);
+ await rasterizePublishOrnamentsForWeChat(container);
await copyHtmlToClipboard(container.outerHTML, container.textContent ?? "");
};
diff --git a/apps/web/src/styles/editor-themes/index.css b/apps/web/src/styles/editor-themes/index.css
index c791a634..820e48aa 100644
--- a/apps/web/src/styles/editor-themes/index.css
+++ b/apps/web/src/styles/editor-themes/index.css
@@ -3,5 +3,4 @@
@import "./outline-emerald.css";
@import "./wechat-green.css";
@import "./modern-mint.css";
-@import "./marxico.css";
diff --git a/apps/web/src/styles/editor-themes/marxico.css b/apps/web/src/styles/editor-themes/marxico.css
deleted file mode 100644
index a7698e7f..00000000
--- a/apps/web/src/styles/editor-themes/marxico.css
+++ /dev/null
@@ -1,390 +0,0 @@
-/* Classic StackEdit/Bootstrap-era Markdown typography, adapted for EdgeEver with Marxico as a Chinese presentation reference. */
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) {
- --editor-theme-bg: #ffffff;
- --editor-theme-text: #2c3f51;
- --editor-theme-muted: #668099;
- --editor-theme-heading: #2c3f51;
- --editor-theme-accent: #1980e6;
- --editor-theme-soft: rgb(102 128 153 / 5%);
- --editor-theme-border: rgb(102 128 153 / 10%);
- --editor-theme-code-bg: #f9f2f4;
- --editor-theme-code-text: #c7254e;
- --editor-theme-table-stripe: #f9f9f9;
- --editor-theme-table-hover: #f5f5f5;
- --editor-theme-font: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, Song, sans-serif;
- --editor-theme-radius: 0;
- color-scheme: light;
- background: #ffffff !important;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror {
- max-width: 960px;
- padding: 0 35px 56px;
- background: #ffffff;
- color: #2c3f51;
- font-family: var(--editor-theme-font);
- font-size: 16px;
- line-height: 1.5;
- letter-spacing: normal;
- tab-size: 4;
- text-align: start;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror p {
- margin: 0 0 1.1em;
- padding: 0;
- color: #2c3f51;
- font-size: 16px;
- line-height: 1.6;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h1,
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h2,
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h3,
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h4,
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h5,
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h6 {
- margin: 1.2em 0 0.6em;
- border: 0;
- padding: 0;
- color: #2c3f51;
- font-family: var(--editor-theme-font);
- font-weight: 700;
- text-align: start;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h1 {
- font-size: 41.6px;
- line-height: 1.1;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h2 {
- font-size: 34.4px;
- line-height: 1.1;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h3 {
- font-size: 27.2px;
- line-height: 1.6;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h4 {
- font-size: 20px;
- line-height: 1.6;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h5 {
- font-size: 16px;
- line-height: 1.6;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h6 {
- font-size: 13.6px;
- line-height: 1.6;
-}
-
-@media (max-width: 767px) {
- .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror {
- padding-right: 16px;
- padding-left: 16px;
- }
-
- .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h1 {
- font-size: 2.2rem;
- }
-
- .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h2 {
- font-size: 1.85rem;
- }
-
- .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h3 {
- font-size: 1.5rem;
- }
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror strong,
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror b {
- color: inherit;
- font-weight: 700;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror em {
- color: inherit;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror a:not(.edgeever-attachment-link) {
- color: #1980e6;
- font-weight: 400;
- text-decoration: none;
- transition: background-color 150ms ease-in-out, color 150ms ease-in-out, border-color 150ms ease-in-out;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror a:not(.edgeever-attachment-link):hover {
- color: #0f4d8a;
- text-decoration: underline;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror ul:not([data-type="taskList"]),
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror ol {
- margin: 0 0 1.1em;
- padding-left: 2em;
- line-height: 1.6;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror ul:not([data-type="taskList"]) li,
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror ol li {
- margin: 0;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror li::marker {
- color: inherit;
- font-weight: 400;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
- margin: 0 0 1.1em;
- border: 0;
- border-left: 10px solid rgb(102 128 153 / 7.5%);
- border-radius: 0 5px 5px 0;
- background: rgb(102 128 153 / 5%);
- padding: 15px 20px;
- color: #2c3f51;
- font-size: 16px;
- line-height: 1.6;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror blockquote p:last-child,
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror blockquote ul:last-child,
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror blockquote ol:last-child {
- margin-bottom: 0;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror code {
- border: 0;
- border-radius: 4px;
- background: #f9f2f4;
- padding: 2px 4px;
- color: #c7254e;
- font-family: "Source Code Pro", Consolas, monospace;
- font-size: 0.9em;
- line-height: 1.6;
- white-space: normal;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror pre {
- margin: 0 0 1.1em;
- border: 0;
- border-radius: 5px;
- background: #f6f6f6;
- padding: 0;
- color: #333333;
- font-family: "Source Code Pro", Consolas, monospace;
- font-size: 0.9em;
- line-height: 1.6;
- text-align: start;
- word-break: break-word;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror pre code,
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror .edgeever-code-source {
- border: 0;
- border-radius: 0;
- background: #23241f;
- padding: 1.3em 2em;
- color: #f8f8f2;
- font-family: "Source Code Pro", Consolas, monospace;
- font-size: 0.9em;
- line-height: 1.6;
- white-space: pre-wrap;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror pre code {
- display: block;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror .edgeever-mermaid-code-block:not(.is-source-visible) .edgeever-mermaid-source {
- display: none;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror .edgeever-code-copy-button {
- border-color: rgb(255 255 255 / 18%);
- background: rgb(35 36 31 / 88%);
- color: #f8f8f2;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror hr:not([data-edgeever-merge-divider]) {
- height: 0;
- margin: 2em 0;
- border: 0;
- border-top: 1px solid rgb(102 128 153 / 10%);
- background: transparent;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror img {
- max-width: 100%;
- border: 0;
- border-radius: 0;
- box-shadow: none;
- vertical-align: middle;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror .tableWrapper {
- width: fit-content;
- max-width: 100%;
- margin: 0 0 20px;
- overflow-x: auto;
- border: 0;
- border-radius: 0;
- background: transparent;
- box-shadow: none;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror table {
- width: auto;
- min-width: 0 !important;
- margin: 0;
- border-collapse: collapse;
- border-spacing: 0;
- table-layout: auto;
- color: #2c3f51;
- font-size: 16px;
- line-height: 1.6;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror table col {
- width: auto !important;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror th,
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror td {
- width: auto;
- min-width: 0;
- border: 1px solid #dddddd;
- padding: 8px;
- background: transparent;
- color: #2c3f51;
- font-family: var(--editor-theme-font);
- font-size: 16px;
- line-height: 1.6;
- text-align: left;
- vertical-align: top;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror th {
- border-bottom-width: 2px;
- font-weight: 700;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror tbody tr:nth-child(even) td {
- background: transparent;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror tbody tr:nth-child(odd) td {
- background: #f9f9f9;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror tbody tr:hover td {
- background: #f5f5f5;
-}
-
-.edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror .edgeever-theme-block {
- --theme-block-bg: rgb(102 128 153 / 5%);
- --theme-block-border: rgb(102 128 153 / 10%);
- border-radius: 5px;
-}
-
-/* Marxico's source palette is light-only. Keep its typography in dark mode,
- * but remap every hard-coded reading color so new and existing notes remain legible.
- */
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) {
- --editor-theme-bg: var(--workspace-editor);
- --editor-theme-text: #d9e1dc;
- --editor-theme-muted: #99a7a0;
- --editor-theme-heading: #eef2ef;
- --editor-theme-accent: #78b7e8;
- --editor-theme-soft: #202a25;
- --editor-theme-border: #39473f;
- --editor-theme-code-bg: #2a2023;
- --editor-theme-code-text: #f2b0c2;
- --editor-theme-table-stripe: #1d2621;
- --editor-theme-table-hover: #24312a;
- color-scheme: dark;
- background: var(--editor-theme-bg) !important;
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror {
- background: var(--editor-theme-bg);
- color: var(--editor-theme-text);
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror p {
- color: var(--editor-theme-text);
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h1,
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h2,
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h3,
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h4,
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h5,
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror h6 {
- color: var(--editor-theme-heading);
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror a:not(.edgeever-attachment-link) {
- color: var(--editor-theme-accent);
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror a:not(.edgeever-attachment-link):hover {
- color: #acd5f4;
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
- border-left-color: var(--editor-theme-border);
- background: var(--editor-theme-soft);
- color: var(--editor-theme-text);
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror code {
- background: var(--editor-theme-code-bg);
- color: var(--editor-theme-code-text);
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror pre {
- background: #151d19;
- color: var(--editor-theme-text);
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror .edgeever-code-copy-button {
- border-color: var(--editor-theme-border);
- background: #151d19;
- color: var(--editor-theme-text);
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror hr:not([data-edgeever-merge-divider]) {
- border-top-color: var(--editor-theme-border);
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror table,
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror th,
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror td {
- color: var(--editor-theme-text);
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror th,
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror td {
- border-color: var(--editor-theme-border);
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror tbody tr:nth-child(odd) td {
- background: var(--editor-theme-table-stripe);
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror tbody tr:hover td {
- background: var(--editor-theme-table-hover);
-}
-
-:root.dark .edgeever-editor[data-editor-theme="marxico"]:not([data-editor-theme="default"]) .ProseMirror .edgeever-theme-block {
- --theme-block-bg: var(--editor-theme-soft);
- --theme-block-border: var(--editor-theme-border);
-}
diff --git a/apps/web/src/styles/editor-typography.test.mjs b/apps/web/src/styles/editor-typography.test.mjs
index 24bfcb60..0b844130 100644
--- a/apps/web/src/styles/editor-typography.test.mjs
+++ b/apps/web/src/styles/editor-typography.test.mjs
@@ -7,7 +7,6 @@ const PRESET_THEME_FILES = [
"outline-emerald.css",
"wechat-green.css",
"modern-mint.css",
- "marxico.css",
];
const readStyle = (relativePath) => readFileSync(new URL(relativePath, import.meta.url), "utf8");
@@ -91,7 +90,7 @@ describe("editor typography contract", () => {
});
test("does not let preset themes override body rhythm", () => {
- for (const filename of PRESET_THEME_FILES.filter((filename) => filename !== "marxico.css")) {
+ for (const filename of PRESET_THEME_FILES) {
const source = readStyle(`./editor-themes/${filename}`);
const editorRules = declarationsForSelector(source, ".ProseMirror");
const paragraphRules = declarationsForSelector(source, ".ProseMirror p");
@@ -107,26 +106,4 @@ describe("editor typography contract", () => {
}
});
- test("keeps the Marxico preset aligned with the source theme", () => {
- const source = readStyle("./editor-themes/marxico.css");
- const themeRules = declarationsForSelector(source, '[data-editor-theme="marxico"]:not([data-editor-theme="default"])');
- const headingRules = declarationsForSelector(source, ".ProseMirror h1");
- const quoteRules = declarationsForSelector(source, ".ProseMirror blockquote");
- const inlineCodeRules = declarationsForSelector(source, ".ProseMirror code");
- const paragraphRules = declarationsForSelector(source, ".ProseMirror p");
- const preCodeRules = declarationsForSelector(source, ".ProseMirror pre code");
- const tableRules = declarationsForSelector(source, ".ProseMirror table");
-
- expect(themeRules).toMatch(/--editor-theme-text\s*:\s*#2c3f51/);
- expect(themeRules).toMatch(/--editor-theme-accent\s*:\s*#1980e6/);
- expect(headingRules).toMatch(/font-size\s*:\s*41\.6px/);
- expect(quoteRules).toMatch(/border-left\s*:\s*10px solid/);
- expect(inlineCodeRules).toMatch(/color\s*:\s*#c7254e/);
- expect(paragraphRules).toMatch(/font-size\s*:\s*16px/);
- expect(paragraphRules).toMatch(/margin\s*:\s*0 0 1\.1em/);
- expect(preCodeRules).toMatch(/background\s*:\s*#23241f/);
- expect(preCodeRules).toMatch(/padding\s*:\s*1\.3em 2em/);
- expect(tableRules).toMatch(/width\s*:\s*auto/);
- expect(tableRules).toMatch(/min-width\s*:\s*0 !important/);
- });
});
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index aaf0c8ba..922e644e 100644
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -834,7 +834,7 @@ textarea {
font-size: 17px;
font-weight: 650;
line-height: 1.35;
- color: #111;
+ color: var(--publish-text-strong, #111);
}
.edgeever-phone-preview .edgeever-phone-mermaid {
diff --git a/apps/web/src/styles/mermaid-layout.test.mjs b/apps/web/src/styles/mermaid-layout.test.mjs
index b49debb4..dc43b52d 100644
--- a/apps/web/src/styles/mermaid-layout.test.mjs
+++ b/apps/web/src/styles/mermaid-layout.test.mjs
@@ -2,7 +2,6 @@ import { describe, expect, test } from "bun:test";
import { readFileSync } from "node:fs";
const globals = readFileSync(new URL("./globals.css", import.meta.url), "utf8");
-const marxico = readFileSync(new URL("./editor-themes/marxico.css", import.meta.url), "utf8");
describe("Mermaid editor layout", () => {
test("caps wide-screen diagram blocks without narrowing compact viewports", () => {
@@ -17,9 +16,4 @@ describe("Mermaid editor layout", () => {
);
});
- test("keeps Mermaid source collapsed in the classic blue and white theme", () => {
- expect(marxico).toMatch(
- /\.edgeever-mermaid-code-block:not\(\.is-source-visible\) \.edgeever-mermaid-source\s*{[^}]*display:\s*none;/s,
- );
- });
});
diff --git a/apps/web/src/styles/publish-layout.css b/apps/web/src/styles/publish-layout.css
index 994e7b3e..4cb6f7e3 100644
--- a/apps/web/src/styles/publish-layout.css
+++ b/apps/web/src/styles/publish-layout.css
@@ -1,12 +1,40 @@
/* Paper editor themes: writing canvas matches Copy to WeChat. */
+.edgeever-editor[data-paper-theme][data-editor-theme]:not([data-editor-theme="default"]) {
+ --editor-theme-bg: var(--publish-bg);
+ --editor-theme-text: var(--publish-text);
+ --editor-theme-muted: var(--publish-text-muted);
+ --editor-theme-heading: var(--publish-text-strong);
+ --editor-theme-accent: var(--publish-accent);
+ --editor-theme-soft: var(--publish-accent-soft);
+ --editor-theme-border: var(--publish-accent-border);
+ --editor-theme-code-bg: var(--publish-code-bg);
+ --editor-theme-code-text: var(--publish-code-text);
+ --editor-theme-table-stripe: color-mix(in srgb, var(--publish-accent-soft) 72%, var(--publish-bg));
+ --editor-theme-table-hover: var(--publish-accent-soft);
+ --brand-green: var(--publish-accent);
+ --brand-green-hover: var(--publish-link);
+ --brand-green-muted: var(--publish-accent-soft);
+ --brand-green-soft: var(--publish-accent-soft);
+ --brand-green-border: var(--publish-accent-border);
+ --brand-green-text: var(--publish-link);
+ --memo-content-divider-color: var(--publish-accent-border);
+}
+
.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror {
color: var(--publish-text);
+ background: var(--publish-bg);
+ letter-spacing: var(--editor-letter-spacing);
+ line-height: var(--editor-body-line-height);
counter-reset: publish-h2;
}
-.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror p {
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror p,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror li,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror blockquote {
color: var(--publish-text);
+ letter-spacing: var(--editor-letter-spacing);
+ line-height: var(--editor-body-line-height);
}
.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror h1,
@@ -15,6 +43,7 @@
color: var(--publish-text-strong);
border: 0;
padding-left: 0;
+ letter-spacing: var(--editor-heading-letter-spacing);
}
.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror strong {
@@ -39,6 +68,7 @@
}
.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror code {
+ border-color: var(--publish-accent-border);
background: var(--publish-code-bg);
color: var(--publish-code-text);
}
@@ -53,22 +83,69 @@
}
.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror th {
- background: var(--publish-accent-soft);
color: var(--publish-text-strong);
border-color: var(--publish-accent-border);
}
.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror td {
- border-color: var(--publish-divider);
color: var(--publish-text);
}
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror .edgeever-theme-block,
.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror .edgeever-theme-block[data-theme-block-kind="intro"],
.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror .edgeever-theme-block[data-theme-block-kind="key-point"] {
border-color: var(--publish-accent-border);
background: var(--publish-surface);
}
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror .edgeever-theme-block:hover .edgeever-theme-block__toolbar,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror .edgeever-theme-block[data-theme-block-selected="true"] .edgeever-theme-block__toolbar {
+ border-bottom-color: var(--publish-divider);
+}
+
+.edgeever-editor[data-paper-theme][data-editor-theme]:not([data-editor-theme="default"]) .ProseMirror .tableWrapper {
+ border-color: var(--publish-accent-border);
+ background: var(--publish-bg);
+}
+
+.edgeever-editor[data-paper-theme][data-editor-theme]:not([data-editor-theme="default"]) .ProseMirror th {
+ background: var(--publish-accent-soft);
+ color: var(--publish-text-strong);
+ border-color: var(--publish-accent-border);
+}
+
+.edgeever-editor[data-paper-theme][data-editor-theme]:not([data-editor-theme="default"]) .ProseMirror td {
+ background: var(--publish-bg);
+ border-color: var(--publish-divider);
+ color: var(--publish-text);
+}
+
+.edgeever-editor[data-paper-theme][data-editor-theme]:not([data-editor-theme="default"]) .ProseMirror tbody tr:nth-child(even) td {
+ background: color-mix(in srgb, var(--publish-accent-soft) 72%, var(--publish-bg));
+}
+
+.edgeever-editor[data-paper-theme][data-editor-theme]:not([data-editor-theme="default"]) .ProseMirror tbody tr:hover td {
+ background: var(--publish-accent-soft);
+}
+
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror .edgeever-mermaid-preview {
+ border-color: var(--publish-accent-border);
+ background: var(--publish-surface);
+}
+
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror .edgeever-mermaid-tool-button:hover,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror .edgeever-mermaid-tool-button:focus-visible,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror .edgeever-mermaid-tool-button[aria-pressed="true"] {
+ background: var(--publish-accent-soft);
+ color: var(--publish-link);
+}
+
+.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror strong,
+.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror strong,
+.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror strong {
+ color: var(--publish-text-strong);
+}
+
.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror hr:not([data-edgeever-merge-divider]),
.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror hr:not([data-edgeever-merge-divider]) {
width: 42%;
@@ -76,129 +153,384 @@
margin-right: auto;
}
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror h1::before,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror h1::after,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror h2::before,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror h3::before,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror h3::after,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror blockquote::before {
+ color: var(--publish-accent);
+ font-weight: 700;
+}
+
+.edgeever-editor[data-editor-theme="guide"]:not([data-editor-theme="default"]) .ProseMirror h1::before,
+.edgeever-editor[data-editor-theme="stance"]:not([data-editor-theme="default"]) .ProseMirror h1::before,
+.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror h1::before,
+.edgeever-editor[data-editor-theme="brief"]:not([data-editor-theme="default"]) .ProseMirror h1::before,
+.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror h1::before,
+.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror h1::before {
+ display: block;
+ margin: 0 0 0.45rem;
+ font-size: 0.7rem;
+ font-weight: 600;
+ letter-spacing: 0.16em;
+ line-height: 1.4;
+}
+
+.edgeever-editor[data-editor-theme="guide"]:not([data-editor-theme="default"]) .ProseMirror h1::before { content: "GUIDE · ARTICLE"; }
+.edgeever-editor[data-editor-theme="stance"]:not([data-editor-theme="default"]) .ProseMirror h1::before { content: "ARTICLE"; }
+.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror h1::before,
+.edgeever-editor[data-editor-theme="brief"]:not([data-editor-theme="default"]) .ProseMirror h1::before { content: "EDITION · FIELD NOTES"; }
+.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror h1::before { content: "MINIMAL · ARTICLE"; }
+.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror h1::before { content: "FIELD NOTES"; }
+
.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror h1 {
text-align: center;
font-weight: 800;
- border-bottom: 3px solid var(--publish-accent);
- padding-bottom: 0.55rem;
- margin: 0 0 1.5rem;
+}
+
+.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror h1::after,
+.edgeever-editor[data-editor-theme="guide"]:not([data-editor-theme="default"]) .ProseMirror h1::after,
+.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror h1::after,
+.edgeever-editor[data-editor-theme="journal"]:not([data-editor-theme="default"]) .ProseMirror h1::after,
+.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror h1::after,
+.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror h1::after {
+ display: block;
+ width: 42px;
+ height: 3px;
+ margin: 0.55rem 0 0;
+ background: var(--publish-accent);
+ content: "";
+}
+
+.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror h1::before {
+ display: inline-block;
+ width: 1.7rem;
+ height: 2.2rem;
+ margin-left: 0.45rem;
+ vertical-align: middle;
+ background-color: var(--publish-accent);
+ content: "";
+ -webkit-mask: var(--publish-ornament-sprig) center / contain no-repeat;
+ mask: var(--publish-ornament-sprig) center / contain no-repeat;
+}
+
+.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror h1::after {
+ width: 9.5rem;
+ height: 12px;
+ margin: 0.55rem auto 0;
+ background-color: var(--publish-accent);
+ background-image: none;
+ -webkit-mask: var(--publish-ornament-brush) center / contain no-repeat;
+ mask: var(--publish-ornament-brush) center / contain no-repeat;
+}
+
+.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror h2::after {
+ display: inline-block;
+ width: 1.45rem;
+ height: 1.45rem;
+ margin-left: 0.5rem;
+ vertical-align: middle;
+ background-color: var(--publish-accent);
+ content: "";
+ -webkit-mask: var(--publish-ornament-sun) center / contain no-repeat;
+ mask: var(--publish-ornament-sun) center / contain no-repeat;
+}
+
+.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
+ position: relative;
+}
+
+.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror blockquote::before {
+ width: 1.7rem;
+ height: 1.25rem;
+ margin: 0 0 0.35rem;
+ background-color: var(--publish-accent);
+ content: "";
+ -webkit-mask: var(--publish-ornament-quote) center / contain no-repeat;
+ mask: var(--publish-ornament-quote) center / contain no-repeat;
+}
+
+.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror blockquote::after,
+.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror blockquote::after {
+ position: absolute;
+ top: -0.45rem;
+ right: 1rem;
+ width: 3.3rem;
+ height: 1.15rem;
+ background-color: var(--publish-accent);
+ content: "";
+ transform: rotate(12deg);
+ -webkit-mask: var(--publish-ornament-tape) center / contain no-repeat;
+ mask: var(--publish-ornament-tape) center / contain no-repeat;
+}
+
+.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
+ position: relative;
+}
+
+.edgeever-editor[data-editor-theme="grove"]:not([data-editor-theme="default"]) .ProseMirror h1::after {
+ display: inline-block;
+ width: 1.25rem;
+ height: 1.7rem;
+ margin-left: 0.45rem;
+ vertical-align: middle;
+ background-color: var(--publish-accent);
+ content: "";
+ -webkit-mask: var(--publish-ornament-leaf) center / contain no-repeat;
+ mask: var(--publish-ornament-leaf) center / contain no-repeat;
+}
+
+.edgeever-editor[data-editor-theme="grove"]:not([data-editor-theme="default"]) .ProseMirror h2 {
+ border-bottom: 0;
+ padding-bottom: 0;
+}
+
+.edgeever-editor[data-editor-theme="grove"]:not([data-editor-theme="default"]) .ProseMirror h2::after {
+ display: block;
+ width: 6rem;
+ height: 0.7rem;
+ margin-top: 0.3rem;
+ background-color: var(--publish-accent);
+ content: "";
+ -webkit-mask: var(--publish-ornament-swoosh) left / contain no-repeat;
+ mask: var(--publish-ornament-swoosh) left / contain no-repeat;
+}
+
+.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror h1::after,
+.edgeever-editor[data-editor-theme="journal"]:not([data-editor-theme="default"]) .ProseMirror h1::after {
+ content: "VOL. 01";
+ width: auto;
+ height: auto;
+ background: none;
+ color: var(--publish-text-muted);
+ font-size: 0.7rem;
+ font-weight: 600;
+ letter-spacing: 0.14em;
}
.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror h2,
-.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror h2,
+.edgeever-editor[data-editor-theme="guide"]:not([data-editor-theme="default"]) .ProseMirror h2,
+.edgeever-editor[data-editor-theme="journal"]:not([data-editor-theme="default"]) .ProseMirror h2,
+.edgeever-editor[data-editor-theme="stance"]:not([data-editor-theme="default"]) .ProseMirror h2,
.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror h2,
-.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror h2 {
+.edgeever-editor[data-editor-theme="brief"]:not([data-editor-theme="default"]) .ProseMirror h2,
+.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror h2,
+.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror h2 {
counter-increment: publish-h2;
}
-.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror h2::before {
- content: counter(publish-h2, decimal-leading-zero);
- display: block;
+.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror h2::before,
+.edgeever-editor[data-editor-theme="guide"]:not([data-editor-theme="default"]) .ProseMirror h2::before,
+.edgeever-editor[data-editor-theme="brief"]:not([data-editor-theme="default"]) .ProseMirror h2::before {
+ display: inline-block;
+ margin-right: 0.7rem;
+ vertical-align: middle;
color: var(--publish-accent);
- font-size: 1.75rem;
+ font-family: Georgia, "Times New Roman", serif;
+ font-size: 2.6rem;
font-style: italic;
font-weight: 700;
- line-height: 1.1;
- margin: 0 0 0.35rem;
+ line-height: 0.9;
+ content: counter(publish-h2, decimal-leading-zero);
}
-.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror h2::before,
-.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror h2::before,
-.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror h2::before {
- content: counter(publish-h2, decimal-leading-zero);
- display: block;
- color: var(--publish-accent);
- font-size: 0.8rem;
+.edgeever-editor[data-editor-theme="guide"]:not([data-editor-theme="default"]) .ProseMirror h2::before,
+.edgeever-editor[data-editor-theme="brief"]:not([data-editor-theme="default"]) .ProseMirror h2::before {
+ font-size: 2.4rem;
+}
+
+.edgeever-editor[data-editor-theme="stance"]:not([data-editor-theme="default"]) .ProseMirror h2::before,
+.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror h2::before {
+ display: inline-block;
+ min-width: 2rem;
+ margin-right: 0.7rem;
+ padding: 0.35rem 0.45rem;
+ vertical-align: middle;
+ border-radius: 6px;
+ background: var(--publish-accent);
+ color: #fff;
+ font-size: 0.85rem;
font-weight: 700;
- letter-spacing: 0.12em;
- margin: 0 0 0.25rem;
+ line-height: 1;
+ text-align: center;
+ content: counter(publish-h2, decimal-leading-zero);
+}
+
+.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror h2::before {
+ display: block;
+ margin: 0 0 0.35rem;
+ color: var(--publish-accent);
+ font-family: Georgia, "Times New Roman", serif;
+ font-size: 2.8rem;
+ font-style: italic;
+ font-weight: 700;
+ line-height: 0.9;
+ content: counter(publish-h2, decimal-leading-zero);
+}
+
+.edgeever-editor[data-editor-theme="journal"]:not([data-editor-theme="default"]) .ProseMirror h2::before,
+.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror h2::before {
+ display: block;
+ margin: 0 0 0.3rem;
+ color: var(--publish-text-muted);
+ font-size: 0.7rem;
+ font-weight: 600;
+ letter-spacing: 0.16em;
+}
+
+.edgeever-editor[data-editor-theme="journal"]:not([data-editor-theme="default"]) .ProseMirror h2::before {
+ content: "NO. " counter(publish-h2, decimal-leading-zero);
+}
+
+.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror h2::before {
+ content: counter(publish-h2, decimal-leading-zero) " · CHAPTER ONE";
}
.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty,
-.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty,
+.edgeever-editor[data-editor-theme="guide"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty,
+.edgeever-editor[data-editor-theme="journal"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty,
+.edgeever-editor[data-editor-theme="stance"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty,
.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty,
-.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty {
+.edgeever-editor[data-editor-theme="brief"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty,
+.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty,
+.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty {
counter-increment: none;
}
-.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty::before,
-.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty::before,
-.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty::before,
-.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty::before {
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror h1.is-empty::before,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror h1.is-empty::after,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty::before,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror h2.is-empty::after,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror h3.is-empty::before,
+.edgeever-editor[data-paper-theme]:not([data-editor-theme="default"]) .ProseMirror h3.is-empty::after {
content: none;
}
-.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror h3 {
+.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror h3,
+.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror h3 {
text-align: center;
font-size: 0.95rem;
- border-bottom: 2px solid var(--publish-accent-border);
- padding-bottom: 0.45rem;
}
-.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror blockquote,
+.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror h3::after,
+.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror h3::after {
+ display: block;
+ width: 10rem;
+ height: 0;
+ margin: 0.55rem auto 0;
+ border-top: 3px solid var(--publish-accent);
+ box-shadow: 28px 0 0 0 var(--publish-accent-border);
+ content: "";
+}
+
+.edgeever-editor[data-editor-theme="stance"]:not([data-editor-theme="default"]) .ProseMirror h3,
+.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror h3,
+.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror h3 {
+ border-left: 3px solid var(--publish-accent);
+ padding-left: 0.65rem;
+}
+
+.edgeever-editor[data-editor-theme="grove"]:not([data-editor-theme="default"]) .ProseMirror h3 {
+ color: var(--publish-accent);
+ text-align: center;
+}
+
+.edgeever-editor[data-editor-theme="grove"]:not([data-editor-theme="default"]) .ProseMirror h3::before,
+.edgeever-editor[data-editor-theme="grove"]:not([data-editor-theme="default"]) .ProseMirror h3::after {
+ content: "//";
+ margin: 0 0.55rem;
+ font-weight: 800;
+}
+
+.edgeever-editor[data-editor-theme="journal"]:not([data-editor-theme="default"]) .ProseMirror h3::before {
+ content: "— ";
+ color: var(--publish-text-muted);
+}
+
+.edgeever-editor[data-editor-theme="letter"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
+ margin: 0 0 1.5rem;
+ padding: 1.1rem 1rem 1.15rem 1.2rem;
+ border: 1px solid var(--publish-accent-border);
+ border-radius: 18px;
+ background-color: var(--publish-surface);
+ background-image: linear-gradient(to right, var(--publish-accent-grid) 1px, transparent 1px),
+ linear-gradient(to bottom, var(--publish-accent-grid) 1px, transparent 1px);
+ background-size: 30px 30px;
+ color: var(--publish-text-muted);
+}
+
+.edgeever-editor[data-editor-theme="stance"]:not([data-editor-theme="default"]) .ProseMirror blockquote::before {
+ display: block;
+ margin: 0 0 0.2rem;
+ font-family: Georgia, "Times New Roman", serif;
+ font-size: 1.8rem;
+ font-weight: 700;
+ line-height: 1;
+ content: "“";
+}
+
+.edgeever-editor[data-editor-theme="grove"]:not([data-editor-theme="default"]) .ProseMirror blockquote::before {
+ display: block;
+ width: 1.7rem;
+ height: 1.25rem;
+ margin: 0 0 0.35rem;
+ background-color: var(--publish-accent);
+ content: "";
+ -webkit-mask: var(--publish-ornament-quote) center / contain no-repeat;
+ mask: var(--publish-ornament-quote) center / contain no-repeat;
+}
+
+.edgeever-editor[data-editor-theme="guide"]:not([data-editor-theme="default"]) .ProseMirror blockquote,
+.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
+ margin: 0 0 1.5rem;
+ padding: 0.35rem 0 0.35rem 1rem;
+ border-left: 3px solid var(--publish-accent);
+ background: transparent;
+ color: var(--publish-text-muted);
+}
+
+.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
+ border-left-width: 4px;
+}
+
+.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror blockquote,
+.edgeever-editor[data-editor-theme="stance"]:not([data-editor-theme="default"]) .ProseMirror blockquote,
.edgeever-editor[data-editor-theme="grove"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
margin: 0 0 1.5rem;
padding: 1rem 1.1rem;
border: 1px solid var(--publish-accent-border);
border-radius: 12px;
- background: var(--publish-surface);
- color: var(--publish-text-muted);
-}
-
-.edgeever-editor[data-editor-theme="grove"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
- border-radius: 16px;
-}
-
-.edgeever-editor[data-editor-theme="guide"]:not([data-editor-theme="default"]) .ProseMirror h2,
-.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror h2 {
- border-left: 4px solid var(--publish-accent);
- padding-left: 0.75rem;
-}
-
-.edgeever-editor[data-editor-theme="guide"]:not([data-editor-theme="default"]) .ProseMirror blockquote,
-.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror blockquote,
-.edgeever-editor[data-editor-theme="brief"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
- margin: 0 0 1.5rem;
- padding: 0.75rem 1rem;
- border-left: 4px solid var(--publish-accent);
background: var(--publish-accent-soft);
color: var(--publish-text-muted);
}
-.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror h1 {
- text-align: left;
- border-top: 3px solid var(--publish-accent);
- padding-top: 0.55rem;
-}
-
-.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror h3,
-.edgeever-editor[data-editor-theme="stance"]:not([data-editor-theme="default"]) .ProseMirror h3 {
- border-bottom: 2px solid var(--publish-accent);
- padding-bottom: 0.35rem;
+.edgeever-editor[data-editor-theme="blueprint"]:not([data-editor-theme="default"]) .ProseMirror h2 {
+ border-left: 3px solid var(--publish-accent);
+ padding-left: 0.75rem;
}
.edgeever-editor[data-editor-theme="journal"]:not([data-editor-theme="default"]) .ProseMirror h1,
-.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror h1 {
+.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror h1,
+.edgeever-editor[data-editor-theme="grove"]:not([data-editor-theme="default"]) .ProseMirror h1,
+.edgeever-editor[data-editor-theme="brief"]:not([data-editor-theme="default"]) .ProseMirror h1,
+.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror h1 {
text-align: left;
font-weight: 700;
}
-.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror h1 {
- font-weight: 600;
- margin: 0 0 2rem;
-}
-
-.edgeever-editor[data-editor-theme="journal"]:not([data-editor-theme="default"]) .ProseMirror h2,
.edgeever-editor[data-editor-theme="grove"]:not([data-editor-theme="default"]) .ProseMirror h2 {
- border-bottom: 1px solid var(--publish-divider);
- padding-bottom: 0.45rem;
+ display: inline-block;
+ border-bottom: 2px solid var(--publish-accent);
+ padding-bottom: 0.4rem;
}
.edgeever-editor[data-editor-theme="journal"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
margin: 0 0 1.5rem;
- padding: 0.25rem 0 0.25rem 1rem;
- border-left: 2px solid var(--publish-divider);
- background: transparent;
+ padding: 1rem 0.5rem;
+ border-top: 1px solid var(--publish-accent-border);
+ border-bottom: 1px solid var(--publish-accent-border);
+ background: var(--publish-surface);
color: var(--publish-text-muted);
font-style: italic;
}
@@ -208,100 +540,73 @@
border-radius: 12px;
}
-.edgeever-editor[data-editor-theme="stance"]:not([data-editor-theme="default"]) .ProseMirror h1 {
- font-weight: 800;
- border-bottom: 6px solid var(--publish-accent);
- padding-bottom: 0.55rem;
-}
-
-.edgeever-editor[data-editor-theme="stance"]:not([data-editor-theme="default"]) .ProseMirror h2 {
- border-left: 6px solid var(--publish-accent);
- padding-left: 0.85rem;
-}
-
-.edgeever-editor[data-editor-theme="stance"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
+.edgeever-editor[data-editor-theme="brief"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
margin: 0 0 1.5rem;
- padding: 0.85rem 1rem;
- border-left: 6px solid var(--publish-accent);
+ padding: 2.4rem 1rem 1rem;
+ border: 0;
+ border-radius: 8px;
background: var(--publish-accent-soft);
color: var(--publish-text-muted);
}
-.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror h1 {
- letter-spacing: 0.12em;
- font-size: 1.35rem;
- border-bottom: 1px dashed var(--publish-accent);
- padding-bottom: 0.55rem;
-}
-
-.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror h2,
-.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror h3 {
- border-bottom: 1px dashed var(--publish-accent-border);
- padding-bottom: 0.4rem;
-}
-
-.edgeever-editor[data-editor-theme="stub"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
- margin: 0 0 1.5rem;
- padding: 0.85rem 1rem;
- border: 1px dashed var(--publish-accent);
- border-radius: 2px;
- background: var(--publish-surface);
- color: var(--publish-text-muted);
-}
-
-.edgeever-editor[data-editor-theme="brief"]:not([data-editor-theme="default"]) .ProseMirror h1 {
- font-size: 1.4rem;
- border-bottom: 1px solid var(--publish-accent);
- padding-bottom: 0.5rem;
-}
-
-.edgeever-editor[data-editor-theme="brief"]:not([data-editor-theme="default"]) .ProseMirror h2 {
- color: var(--publish-accent);
- font-size: 1.15rem;
-}
-
-.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror h1 {
- letter-spacing: 0.06em;
- border-bottom: 1px solid var(--publish-divider);
- padding-bottom: 0.5rem;
-}
-
-.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror h2 {
- border-left: 2px solid var(--publish-accent);
- padding-left: 0.7rem;
+.edgeever-editor[data-editor-theme="brief"]:not([data-editor-theme="default"]) .ProseMirror blockquote::before {
+ display: block;
+ margin: -2.4rem -1rem 0.85rem;
+ padding: 0.55rem 1rem;
+ background: var(--publish-accent);
+ color: #fff;
+ font-size: 0.7rem;
+ font-weight: 700;
+ letter-spacing: 0.16em;
+ content: "EDITOR'S NOTE";
}
.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
margin: 0 0 1.5rem;
- padding: 0.75rem 1rem;
- border: 1px solid var(--publish-divider);
+ padding: 0;
+ border: 0;
background: transparent;
+ color: var(--publish-text-strong);
+ font-weight: 600;
+ text-align: center;
+}
+
+.edgeever-editor[data-editor-theme="outline"]:not([data-editor-theme="default"]) .ProseMirror blockquote::before {
+ display: block;
+ margin: 0 0 0.65rem;
color: var(--publish-text-muted);
+ font-size: 0.7rem;
+ font-weight: 700;
+ letter-spacing: 0.18em;
+ content: "QUOTE";
}
.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror h2 {
- font-weight: 500;
- margin-top: 2.4rem;
+ font-weight: 600;
+ margin-top: 2.2rem;
}
.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror blockquote {
margin: 0 0 2rem;
- padding: 0.5rem 0;
+ padding: 0.35rem 1.5rem;
border: 0;
background: transparent;
color: var(--publish-text-muted);
font-style: italic;
+ text-align: center;
}
-.edgeever-editor[data-editor-theme="grove"]:not([data-editor-theme="default"]) .ProseMirror h1 {
- border-bottom: 2px solid var(--publish-accent);
- padding-bottom: 0.5rem;
+.edgeever-editor[data-editor-theme="zen"]:not([data-editor-theme="default"]) .ProseMirror blockquote::after {
+ display: block;
+ margin-top: 0.5rem;
+ color: var(--publish-accent);
+ letter-spacing: 0.2em;
+ content: "—";
}
.edgeever-editor[data-publish-surface="phone"][data-paper-theme] .ProseMirror h1 {
font-size: 1.5rem;
font-weight: 800;
- letter-spacing: normal;
line-height: 1.4;
margin-bottom: 0.75rem;
}
@@ -322,15 +627,14 @@
padding: 0.65rem 0.75rem;
}
-.edgeever-editor[data-publish-surface="phone"][data-editor-theme="letter"] .ProseMirror h2::before {
- font-size: 1.15rem;
- margin-bottom: 0.2rem;
+.edgeever-editor[data-publish-surface="phone"][data-editor-theme="letter"] .ProseMirror h2::before,
+.edgeever-editor[data-publish-surface="phone"][data-editor-theme="guide"] .ProseMirror h2::before,
+.edgeever-editor[data-publish-surface="phone"][data-editor-theme="brief"] .ProseMirror h2::before {
+ font-size: 2rem;
}
-.edgeever-editor[data-publish-surface="phone"][data-editor-theme="blueprint"] .ProseMirror h2::before,
-.edgeever-editor[data-publish-surface="phone"][data-editor-theme="stub"] .ProseMirror h2::before,
.edgeever-editor[data-publish-surface="phone"][data-editor-theme="outline"] .ProseMirror h2::before {
- font-size: 0.75rem;
+ font-size: 2.1rem;
}
:root.dark .edgeever-editor[data-paper-theme] {
@@ -341,6 +645,7 @@
--publish-surface: color-mix(in srgb, var(--publish-accent) 16%, var(--workspace-editor));
--publish-accent-soft: color-mix(in srgb, var(--publish-accent) 14%, var(--workspace-editor));
--publish-accent-border: color-mix(in srgb, var(--publish-accent) 36%, var(--workspace-editor));
+ --publish-accent-grid: color-mix(in srgb, var(--publish-accent) 18%, transparent);
--publish-divider: color-mix(in srgb, var(--publish-accent) 26%, var(--workspace-editor));
--publish-code-bg: color-mix(in srgb, var(--publish-accent) 10%, var(--workspace-editor));
--publish-code-text: var(--publish-accent);
diff --git a/docs/demo-sample-note.md b/docs/demo-sample-note.md
index ab9e48d4..3ff969ec 100644
--- a/docs/demo-sample-note.md
+++ b/docs/demo-sample-note.md
@@ -67,7 +67,7 @@ EdgeEver is engineered to provide a distraction-free, elegant writing experience
- **Reading Protection Mode**: When reading or reviewing notes, press `Cmd/Ctrl + E` to toggle read-only protection, locking the editor to prevent accidental edits while browsing; press it again to seamlessly resume editing.
### 🎭 Curated Typography Themes & Publishing Export
-- **Preset Editor Themes**: Switch effortlessly between `WeChat Classic Green`, `Modern Mint`, `Minimal Emerald`, `Outline Emerald`, and more.
+- **Preset Editor Themes**: Switch effortlessly between `WeChat Green`, `Mint Green`, `Minimal Green`, `Ruled Green`, and paper styles such as Letter, Guide, and Blueprint.
- **One-Click Publishing Export**: Built for publishers and bloggers. Click the **WeChat Icon** in the top bar to format your note with inline CSS. Paste directly into WeChat Official Account editor, Substack, Medium, or WordPress while preserving layout and syntax highlighting.
### 🖼️ 8 Exquisite Social Poster Themes
diff --git a/docs/demo-sample-note.zh-CN.md b/docs/demo-sample-note.zh-CN.md
index 66ca7c10..2a7b2bb9 100644
--- a/docs/demo-sample-note.zh-CN.md
+++ b/docs/demo-sample-note.zh-CN.md
@@ -67,7 +67,7 @@ EdgeEver 将高效与优雅融入每一处交互细节，助你专注于思考
- **阅读保护模式 (Reading Protection)**：日常翻阅或查阅笔记时，按下 `Cmd/Ctrl + E` 即可一键开启只读保护，锁定当前编辑状态，避免沉浸阅读时误触键盘或意外改动笔记内容；再次按下即可随手切回编辑。
### 🎭 精选排版主题与一键自媒体发布
-- **内置排版主题**：支持一键切换 `WeChat Classic Green (微信经典绿)`、`Modern Mint (薄荷青)`、`Minimal Emerald (极简祖母绿)`、`Outline Emerald (大纲祖母绿)` 等风格。
+- **内置排版主题**：支持一键切换 `微信绿`、`薄荷绿`、`极简绿`、`描边绿`，以及暖笺、教程、蓝图等纸稿风格。
- **一键排版复制**：专为内容创作者设计。点击顶部工具栏的**微信公众号图标**，系统自动将当前笔记转为内联 CSS 样式的优雅富文本，直接粘贴至微信公众号后台、Substack 或 WordPress，排版与代码高亮完美保真。
### 🖼️ 8 套精美社交分享海报 (Poster Cards)
diff --git a/packages/shared/src/i18n/en-US.ts b/packages/shared/src/i18n/en-US.ts
index 65965db4..e89f50e2 100644
--- a/packages/shared/src/i18n/en-US.ts
+++ b/packages/shared/src/i18n/en-US.ts
@@ -613,16 +613,20 @@ export const enUS = {
outline: "Outline",
zen: "Whitespace",
grove: "Grove",
- "minimal-emerald": "Minimal Emerald",
- "outline-emerald": "Outline Emerald",
- "wechat-green": "WeChat Classic Green",
- "modern-mint": "Modern Mint",
- marxico: "Classic Blue & White",
+ "minimal-emerald": "Minimal Green",
+ "outline-emerald": "Ruled Green",
+ "wechat-green": "WeChat Green",
+ "modern-mint": "Mint Green",
custom: "Custom",
},
customEditorTheme: {
title: "Custom editor theme",
description: "Adjust editor colors. This setting is saved in the current browser.",
+ settingsTitle: "Custom theme",
+ settingsDescription: "Switch editor themes from the toolbar. Manage browser-only custom palettes here.",
+ defaultName: "Custom theme",
+ newName: "New theme {{n}}",
+ create: "Create new theme…",
edit: "Edit colors",
import: "Import",
export: "Export",
diff --git a/packages/shared/src/i18n/zh-CN.ts b/packages/shared/src/i18n/zh-CN.ts
index 4cb01fef..d92736f4 100644
--- a/packages/shared/src/i18n/zh-CN.ts
+++ b/packages/shared/src/i18n/zh-CN.ts
@@ -613,16 +613,20 @@ export const zhCN = {
outline: "纲要",
zen: "留白",
grove: "草木",
- "minimal-emerald": "minimal品牌绿",
- "outline-emerald": "Outline 品牌绿",
- "wechat-green": "微信经典绿",
- "modern-mint": "极客薄荷绿",
- marxico: "经典蓝白",
+ "minimal-emerald": "极简绿",
+ "outline-emerald": "描边绿",
+ "wechat-green": "微信绿",
+ "modern-mint": "薄荷绿",
custom: "自定义",
},
customEditorTheme: {
title: "自定义编辑器主题",
description: "调整正文编辑区的颜色，设置仅保存在当前浏览器中。",
+ settingsTitle: "自定义主题",
+ settingsDescription: "全部排版主题在编辑器工具栏切换。这里只管理保存在当前浏览器中的自定义配色。",
+ defaultName: "自定义主题",
+ newName: "新主题 {{n}}",
+ create: "新建主题…",
edit: "编辑配色",
import: "导入",
export: "导出",