fix: consolidate markdown styles into shared .markdown-body class (#332)
feat: improve markdown styles
This commit is contained in:
Carlos Florêncio
+150
-139
@@ -547,6 +547,151 @@
|
||||
|
||||
/* Legacy Milkdown styles removed - plan editor now uses TipTap */
|
||||
|
||||
/* ── Shared markdown body styles ──
|
||||
Single source of truth for rendered markdown across TipTap (plan editor)
|
||||
and ReactMarkdown (chat, PR, changelog, etc.). */
|
||||
.markdown-body {
|
||||
font-size: 13px;
|
||||
line-height: 1.625;
|
||||
color: var(--foreground);
|
||||
font-family:
|
||||
-apple-system, "system-ui", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5 {
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0.375rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.markdown-body :is(h1, h2, h3, h4, h5):first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.markdown-body p {
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
.markdown-body ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 1.25rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.markdown-body ol {
|
||||
list-style-type: decimal;
|
||||
padding-left: 1.25rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.markdown-body li {
|
||||
margin-top: 0.125rem;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.markdown-body li > ul,
|
||||
.markdown-body li > ol {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* Inline code — accent (indigo) color */
|
||||
.markdown-body :not(pre) > code,
|
||||
.markdown-body code:not(pre code) {
|
||||
background: var(--muted);
|
||||
color: var(--accent);
|
||||
padding: 0.1rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.90em;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.markdown-body a {
|
||||
color: var(--primary);
|
||||
text-decoration-line: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.markdown-body a:hover {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
border-left: 3px solid var(--primary);
|
||||
padding-left: 0.75rem;
|
||||
margin-left: 0;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--muted-foreground);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.markdown-body table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.markdown-body th,
|
||||
.markdown-body td {
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.markdown-body th {
|
||||
background: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-body thead {
|
||||
background: color-mix(in oklch, var(--muted) 50%, transparent);
|
||||
}
|
||||
|
||||
.markdown-body tbody tr {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.markdown-body tbody tr:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body tbody tr:hover {
|
||||
background: color-mix(in oklch, var(--muted) 50%, transparent);
|
||||
}
|
||||
|
||||
.markdown-body strong {
|
||||
color: var(--foreground);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* TipTap editor styles */
|
||||
.tiptap p.is-editor-empty:first-child::before {
|
||||
content: attr(data-placeholder);
|
||||
@@ -723,7 +868,9 @@
|
||||
background-color: rgba(99, 102, 241, 0.12) !important;
|
||||
}
|
||||
|
||||
/* TipTap Plan Editor Styles */
|
||||
/* TipTap Plan Editor Styles
|
||||
Element styles (headings, lists, code, etc.) come from .markdown-body above.
|
||||
Only TipTap-specific layout, container, and editor behavior styles remain here. */
|
||||
.tiptap-plan-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
@@ -745,80 +892,7 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Base text styling */
|
||||
.tiptap-plan-wrapper .tiptap {
|
||||
color: var(--foreground);
|
||||
font-family:
|
||||
-apple-system, "system-ui", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
|
||||
.tiptap-plan-wrapper .tiptap,
|
||||
.tiptap-plan-wrapper
|
||||
.tiptap
|
||||
*:not(.mermaid-container):not(.mermaid-container *):not(pre code):not(pre code *) {
|
||||
font-size: 13px !important;
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
.tiptap-plan-wrapper .tiptap h1,
|
||||
.tiptap-plan-wrapper .tiptap h2,
|
||||
.tiptap-plan-wrapper .tiptap h3,
|
||||
.tiptap-plan-wrapper .tiptap h4 {
|
||||
font-weight: 700 !important;
|
||||
color: var(--foreground) !important;
|
||||
margin-top: 1.25rem !important;
|
||||
margin-bottom: 0.375rem !important;
|
||||
line-height: 1.3 !important;
|
||||
}
|
||||
|
||||
.tiptap-plan-wrapper .tiptap :is(h1, h2, h3, h4):first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.tiptap-plan-wrapper .tiptap h1:not(.mermaid-container):not(.mermaid-container *) {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
.tiptap-plan-wrapper .tiptap h2:not(.mermaid-container):not(.mermaid-container *) {
|
||||
font-size: 1.0625rem !important;
|
||||
}
|
||||
.tiptap-plan-wrapper .tiptap h3:not(.mermaid-container):not(.mermaid-container *) {
|
||||
font-size: 0.9375rem !important;
|
||||
}
|
||||
|
||||
/* Paragraphs */
|
||||
.tiptap-plan-wrapper .tiptap p {
|
||||
line-height: 1.625 !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
.tiptap-plan-wrapper .tiptap ul {
|
||||
list-style-type: disc !important;
|
||||
padding-left: 1.25rem !important;
|
||||
margin-top: 1rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.tiptap-plan-wrapper .tiptap li > ul {
|
||||
margin-top: 0.25rem !important;
|
||||
margin-bottom: 0.25rem !important;
|
||||
}
|
||||
|
||||
.tiptap-plan-wrapper .tiptap ol {
|
||||
list-style-type: decimal !important;
|
||||
padding-left: 1.25rem !important;
|
||||
margin-top: 1rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.tiptap-plan-wrapper .tiptap li {
|
||||
margin-top: 0.125rem !important;
|
||||
margin-bottom: 0.125rem !important;
|
||||
}
|
||||
|
||||
/* Task lists */
|
||||
/* Task lists (TipTap-specific data attribute) */
|
||||
.tiptap-plan-wrapper .tiptap ul[data-type="taskList"] {
|
||||
list-style: none !important;
|
||||
padding-left: 0 !important;
|
||||
@@ -834,17 +908,7 @@
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
/* Inline code (not code blocks) */
|
||||
.tiptap-plan-wrapper .tiptap :not(pre) > code {
|
||||
background: var(--muted) !important;
|
||||
color: var(--foreground) !important;
|
||||
padding: 0.125rem 0.375rem !important;
|
||||
border-radius: 0.25rem !important;
|
||||
font-size: 0.85em !important;
|
||||
font-family: var(--font-mono) !important;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
/* Code blocks (TipTap-specific: lowlight/highlight.js syntax highlighting) */
|
||||
.tiptap-plan-wrapper .tiptap pre {
|
||||
background: var(--background) !important;
|
||||
padding: 0.5rem 0.75rem !important;
|
||||
@@ -870,50 +934,6 @@
|
||||
color: #1e1e1e;
|
||||
}
|
||||
|
||||
/* Blockquote */
|
||||
.tiptap-plan-wrapper .tiptap blockquote {
|
||||
border-left: 3px solid var(--primary) !important;
|
||||
padding-left: 0.75rem !important;
|
||||
margin-left: 0 !important;
|
||||
margin-top: 0.5rem !important;
|
||||
margin-bottom: 0.5rem !important;
|
||||
color: var(--muted-foreground) !important;
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.tiptap-plan-wrapper .tiptap a {
|
||||
color: var(--primary) !important;
|
||||
text-decoration: underline !important;
|
||||
text-underline-offset: 2px !important;
|
||||
}
|
||||
|
||||
/* Horizontal rule */
|
||||
.tiptap-plan-wrapper .tiptap hr {
|
||||
border: none !important;
|
||||
border-top: 1px solid var(--border) !important;
|
||||
margin: 1.5rem 0 !important;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.tiptap-plan-wrapper .tiptap table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.tiptap-plan-wrapper .tiptap th,
|
||||
.tiptap-plan-wrapper .tiptap td {
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tiptap-plan-wrapper .tiptap th {
|
||||
background: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Highlight marks */
|
||||
.tiptap-plan-wrapper mark {
|
||||
background-color: rgba(255, 212, 0, 0.3);
|
||||
@@ -1268,15 +1288,6 @@
|
||||
"Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
|
||||
.chat-message-list .prose {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.chat-message-list .prose :where(p, li, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, td, th) {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* Shiki code block styling */
|
||||
.shiki-code-block pre.shiki {
|
||||
margin: 0;
|
||||
|
||||
Reference in New Issue
Block a user