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