xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(editor): Tiptap 编辑器配色迁移到 Catppuccin（Latte/Mocha）

Browse Source 
编辑器 CSS 此前用硬编码 GitHub 风格色（#0366d6/#d73a49/#24292e 等），
独立于 paper-* 语义 token。逐元素重映射到 Catppuccin 调色板：

亮色 Latte：正文 text、标题 text、placeholder overlay0、
  行内 code surface0/red、pre crust、blockquote surface1/subtext0、
  hr surface1、链接 blue、selection surface0、表格 surface1/crust、
  slash 弹层 mantle/surface0、checkbox/选中态 green（主强调）
暗色 Mocha：对应角色映射（text/cdd6f4 等）

上传遮罩的 rgba(255,255,255,*) 白字与 rgba(239,68,68,*) 红删除按钮
属中性覆盖层，保留不动。
This commit is contained in:
xfy 2026-07-03 14:18:03 +08:00
parent 385fb43516
commit 90fc6977b0
1 changed files with 106 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
libs/tiptap-editor/src/style.css
View File

@ -8,7 +8,8 @@
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px; font-size: 16px;
line-height: 1.75; line-height: 1.75;
color: #2c2c2c; /* Catppuccin Latte text */
color: #4c4f69;
outline: none; outline: none;
} }
@ -29,7 +30,8 @@
p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before { p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before {
content: '在此输入内容...'; content: '在此输入内容...';
float: left; float: left;
color: #999; /* Latte overlay0 */
color: #9ca0b0;
pointer-events: none; pointer-events: none;
height: 0; height: 0;
} }
@ -40,7 +42,8 @@
font-weight: 700; font-weight: 700;
margin: 1.2em 0 0.6em; margin: 1.2em 0 0.6em;
line-height: 1.3; line-height: 1.3;
color: #1a1a1a; /* Latte text */
color: #4c4f69;
} }
.tiptap-editor h2 { .tiptap-editor h2 {
@ -48,14 +51,14 @@
font-weight: 600; font-weight: 600;
margin: 1em 0 0.5em; margin: 1em 0 0.5em;
line-height: 1.35; line-height: 1.35;
color: #1a1a1a; color: #4c4f69;
} }
.tiptap-editor h3 { .tiptap-editor h3 {
font-size: 1.25em; font-size: 1.25em;
font-weight: 600; font-weight: 600;
margin: 0.8em 0 0.4em; margin: 0.8em 0 0.4em;
color: #1a1a1a; color: #4c4f69;
} }
.tiptap-editor p { .tiptap-editor p {
@ -68,7 +71,7 @@
.tiptap-editor strong { .tiptap-editor strong {
font-weight: 700; font-weight: 700;
color: #1a1a1a; color: #4c4f69;
} }
.tiptap-editor em { .tiptap-editor em {
@ -83,14 +86,16 @@
.tiptap-editor code { .tiptap-editor code {
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace; font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
font-size: 0.875em; font-size: 0.875em;
background: #f3f3f3; /* Latte surface0 / red */
background: #ccd0da;
padding: 0.15em 0.4em; padding: 0.15em 0.4em;
border-radius: 3px; border-radius: 3px;
color: #d73a49; color: #d20f39;
} }
.tiptap-editor pre { .tiptap-editor pre {
background: #f6f8fa; /* Latte crust */
background: #dce0e8;
border-radius: 6px; border-radius: 6px;
padding: 16px; padding: 16px;
overflow-x: auto; overflow-x: auto;
@ -100,16 +105,17 @@
.tiptap-editor pre code { .tiptap-editor pre code {
background: none; background: none;
padding: 0; padding: 0;
color: #24292e; color: #4c4f69;
font-size: 0.85em; font-size: 0.85em;
line-height: 1.6; line-height: 1.6;
} }
.tiptap-editor blockquote { .tiptap-editor blockquote {
border-left: 4px solid #dfe2e5; /* Latte surface1 / subtext0 */
border-left: 4px solid #bcc0cc;
padding-left: 16px; padding-left: 16px;
margin: 1em 0; margin: 1em 0;
color: #6a737d; color: #6c6f85;
font-style: italic; font-style: italic;
} }
@ -134,14 +140,16 @@
} }
.tiptap-editor hr { .tiptap-editor hr {
/* Latte surface1 */
border: none; border: none;
border-top: 1px solid #e1e4e8; border-top: 1px solid #bcc0cc;
margin: 1.5em 0; margin: 1.5em 0;
} }
/* Selection */ /* Selection */
.tiptap-editor .ProseMirror ::selection { .tiptap-editor .ProseMirror ::selection {
background: #b4d7ff; /* Latte surface0 */
background: #ccd0da;
} }
/* Cursor */ /* Cursor */
@ -149,56 +157,62 @@
display: none; display: none;
} }
/* ========== Dark Theme ========== */ /* ========== Dark Theme (Catppuccin Mocha) ========== */
.dark .tiptap-editor { .dark .tiptap-editor {
color: #dadadb; /* Mocha text */
color: #cdd6f4;
} }
.dark .tiptap-editor h1, .dark .tiptap-editor h1,
.dark .tiptap-editor h2, .dark .tiptap-editor h2,
.dark .tiptap-editor h3, .dark .tiptap-editor h3,
.dark .tiptap-editor strong { .dark .tiptap-editor strong {
color: #f0f0f0; color: #cdd6f4;
} }
.dark .tiptap-editor .ProseMirror p.is-editor-empty:first-child::before { .dark .tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
color: #666; /* Mocha overlay0 */
color: #6c7086;
} }
.dark .tiptap-editor code { .dark .tiptap-editor code {
background: #2e2e33; /* Mocha surface0 / red */
color: #ff7b72; background: #313244;
color: #f38ba8;
} }
.dark .tiptap-editor pre { .dark .tiptap-editor pre {
background: #2e2e33; background: #313244;
} }
.dark .tiptap-editor pre code { .dark .tiptap-editor pre code {
color: #dadadb; color: #cdd6f4;
} }
.dark .tiptap-editor blockquote { .dark .tiptap-editor blockquote {
border-left-color: #444; /* Mocha surface1 / subtext0 */
color: #9b9c9d; border-left-color: #45475a;
color: #a6adc8;
} }
.dark .tiptap-editor hr { .dark .tiptap-editor hr {
border-top-color: #333; border-top-color: #45475a;
} }
.dark .tiptap-editor a { .dark .tiptap-editor a {
color: #58a6ff; /* Mocha blue */
color: #89b4fa;
} }
.dark .tiptap-editor .ProseMirror ::selection { .dark .tiptap-editor .ProseMirror ::selection {
background: #1c4e80; background: rgba(30, 102, 245, 0.3);
} }
/* ========== Link ========== */ /* ========== Link ========== */
.tiptap-editor a { .tiptap-editor a {
color: #0366d6; /* Latte blue */
color: #1e66f5;
text-decoration: none; text-decoration: none;
} }
@ -213,14 +227,15 @@
width: 100%; width: 100%;
margin: 1em 0; margin: 1em 0;
overflow: hidden; overflow: hidden;
border: 1px solid #e1e4e8; /* Latte surface1 */
border: 1px solid #bcc0cc;
border-radius: 6px; border-radius: 6px;
} }
.tiptap-editor table td, .tiptap-editor table td,
.tiptap-editor table th { .tiptap-editor table th {
min-width: 80px; min-width: 80px;
border: 1px solid #e1e4e8; border: 1px solid #bcc0cc;
padding: 8px 12px; padding: 8px 12px;
position: relative; position: relative;
vertical-align: top; vertical-align: top;
@ -228,13 +243,15 @@
} }
.tiptap-editor table th { .tiptap-editor table th {
background: #f6f8fa; /* Latte crust */
background: #dce0e8;
font-weight: 600; font-weight: 600;
text-align: left; text-align: left;
} }
.tiptap-editor table .selectedCell { .tiptap-editor table .selectedCell {
background: #b4d7ff; /* Latte surface0 */
background: #ccd0da;
} }
.tiptap-editor table .column-resize-handle { .tiptap-editor table .column-resize-handle {
@ -243,7 +260,8 @@
top: 0; top: 0;
bottom: -2px; bottom: -2px;
width: 4px; width: 4px;
background-color: #adf; /* Latte blue */
background-color: #1e66f5;
pointer-events: none; pointer-events: none;
} }
@ -261,8 +279,9 @@
.slash-command { .slash-command {
position: fixed; position: fixed;
z-index: 9999; z-index: 9999;
background: #fff; /* Latte mantle */
border: 1px solid #e1e4e8; background: #e6e9ef;
border: 1px solid #bcc0cc;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
padding: 4px; padding: 4px;
@ -290,7 +309,8 @@
.slash-command-item:hover, .slash-command-item:hover,
.slash-command-item.is-selected { .slash-command-item.is-selected {
background: #f0f4ff; /* Latte surface0 */
background: #ccd0da;
} }
.slash-command-item-icon { .slash-command-item-icon {
@ -300,11 +320,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #f3f3f3; background: #ccd0da;
border-radius: 6px; border-radius: 6px;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #555; /* Latte subtext1 */
color: #5c5f77;
} }
.slash-command-item-text { .slash-command-item-text {
@ -315,13 +336,14 @@
.slash-command-item-title { .slash-command-item-title {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #1a1a1a; color: #4c4f69;
line-height: 1.3; line-height: 1.3;
} }
.slash-command-item-desc { .slash-command-item-desc {
font-size: 12px; font-size: 12px;
color: #999; /* Latte overlay0 */
color: #9ca0b0;
line-height: 1.3; line-height: 1.3;
} }
@ -353,7 +375,8 @@
.tiptap-editor ul[data-type='taskList'] li > label input[type='checkbox'] { .tiptap-editor ul[data-type='taskList'] li > label input[type='checkbox'] {
width: 16px; width: 16px;
height: 16px; height: 16px;
accent-color: #0366d6; /* 主强调色 Latte green */
accent-color: #40a02b;
cursor: pointer; cursor: pointer;
} }
@ -382,7 +405,8 @@
} }
.tiptap-editor img.ProseMirror-selectednode { .tiptap-editor img.ProseMirror-selectednode {
outline: 2px solid #0366d6; /* 主强调色 Latte green */
outline: 2px solid #40a02b;
border-radius: 6px; border-radius: 6px;
} }
@ -482,53 +506,58 @@
background: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.3);
} }
/* ========== Dark Theme: Table ========== */ /* ========== Dark Theme: Table (Mocha) ========== */
.dark .tiptap-editor table { .dark .tiptap-editor table {
border-color: #333; /* Mocha surface1 */
border-color: #45475a;
} }
.dark .tiptap-editor table td, .dark .tiptap-editor table td,
.dark .tiptap-editor table th { .dark .tiptap-editor table th {
border-color: #333; border-color: #45475a;
color: #dadadb; color: #cdd6f4;
} }
.dark .tiptap-editor table th { .dark .tiptap-editor table th {
background: #2e2e33; /* Mocha surface0 */
background: #313244;
} }
.dark .tiptap-editor table .selectedCell { .dark .tiptap-editor table .selectedCell {
background: #1c4e80; background: rgba(30, 102, 245, 0.25);
} }
/* ========== Dark Theme: Slash Command ========== */ /* ========== Dark Theme: Slash Command (Mocha) ========== */
.dark .slash-command { .dark .slash-command {
background: #2e2e33; /* Mocha mantle */
border-color: #444; background: #181825;
border-color: #45475a;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
} }
.dark .slash-command-item:hover, .dark .slash-command-item:hover,
.dark .slash-command-item.is-selected { .dark .slash-command-item.is-selected {
background: #3a3a44; background: #313244;
} }
.dark .slash-command-item-icon { .dark .slash-command-item-icon {
background: #3a3a44; background: #313244;
color: #dadadb; color: #cdd6f4;
} }
.dark .slash-command-item-title { .dark .slash-command-item-title {
color: #f0f0f0; color: #cdd6f4;
} }
.dark .slash-command-item-desc { .dark .slash-command-item-desc {
color: #888; /* Mocha overlay0 */
color: #6c7086;
} }
/* ========== Dark Theme: Image ========== */ /* ========== Dark Theme: Image (Mocha) ========== */
.dark .tiptap-editor img.ProseMirror-selectednode { .dark .tiptap-editor img.ProseMirror-selectednode {
outline-color: #58a6ff; /* 主强调色 Mocha green */
outline-color: #a6e3a1;
} }
.dark .upload-image-container.is-error img { .dark .upload-image-container.is-error img {
opacity: 0.45; opacity: 0.45;
@ -540,9 +569,10 @@
border-color: rgba(239, 68, 68, 0.5); border-color: rgba(239, 68, 68, 0.5);
} }
/* ========== Dark Theme: Task List ========== */ /* ========== Dark Theme: Task List (Mocha) ========== */
.dark .tiptap-editor ul[data-type='taskList'] li > label input[type='checkbox'] { .dark .tiptap-editor ul[data-type='taskList'] li > label input[type='checkbox'] {
accent-color: #58a6ff; /* 主强调色 Mocha green */
accent-color: #a6e3a1;
} }
/* ========== Source Toggle Button ========== */ /* ========== Source Toggle Button ========== */
@ -558,8 +588,9 @@
justify-content: center; justify-content: center;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
background: rgba(0, 0, 0, 0.04); /* Latte text 半透明底 */
color: #6a737d; background: rgba(76, 79, 105, 0.05);
color: #6c6f85;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace; font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
@ -573,16 +604,17 @@
.tiptap-toggle-btn:hover { .tiptap-toggle-btn:hover {
opacity: 1; opacity: 1;
background: rgba(0, 0, 0, 0.08); background: rgba(76, 79, 105, 0.1);
} }
.dark .tiptap-toggle-btn { .dark .tiptap-toggle-btn {
background: rgba(255, 255, 255, 0.06); /* Mocha text 半透明底 */
color: #9b9c9d; background: rgba(205, 214, 244, 0.06);
color: #6c7086;
} }
.dark .tiptap-toggle-btn:hover { .dark .tiptap-toggle-btn:hover {
background: rgba(255, 255, 255, 0.12); background: rgba(205, 214, 244, 0.12);
} }
/* ========== Source Textarea ========== */ /* ========== Source Textarea ========== */
@ -595,7 +627,8 @@
box-sizing: border-box; box-sizing: border-box;
border: none; border: none;
background: transparent; background: transparent;
color: #2c2c2c; /* Latte text */
color: #4c4f69;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace; font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
font-size: 14px; font-size: 14px;
line-height: 1.7; line-height: 1.7;
@ -606,13 +639,16 @@
} }
.tiptap-source-textarea::placeholder { .tiptap-source-textarea::placeholder {
color: #999; /* Latte overlay0 */
color: #9ca0b0;
} }
.dark .tiptap-source-textarea { .dark .tiptap-source-textarea {
color: #dadadb; /* Mocha text */
color: #cdd6f4;
} }
.dark .tiptap-source-textarea::placeholder { .dark .tiptap-source-textarea::placeholder {
color: #666; /* Mocha overlay0 */
color: #6c7086;
} }