From babac8f49d6be8ebe704f7aaab53660b141e22ea Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 17 Oct 2025 17:54:46 +0000
Subject: [PATCH] Fix markdown editor CSS

---
 src/styles/markdown-editor.css | 173 +++++++--------------------------
 1 file changed, 36 insertions(+), 137 deletions(-)

diff --git a/src/styles/markdown-editor.css b/src/styles/markdown-editor.css
index 6d5783e2..3dc0e65f 100644
--- a/src/styles/markdown-editor.css
+++ b/src/styles/markdown-editor.css
@@ -1,117 +1,63 @@
-/* MDEditor theme integration with shadcn/ui */
+/* MDEditor theme integration with shadcn/ui using data-color-mode */
 
-/* Container */
-.w-md-editor {
-  @apply rounded-lg border border-input bg-background;
-  box-shadow: none !important;
-  font-family: inherit;
+/* Light mode variables */
+[data-color-mode="light"] {
   --color-fg-default: hsl(var(--foreground));
   --color-canvas-default: hsl(var(--background));
   --color-border-default: hsl(var(--border));
+  --color-neutral-muted: hsl(var(--muted));
 }
 
-/* Toolbar */
+/* Dark mode variables */
+[data-color-mode="dark"] {
+  --color-fg-default: hsl(var(--foreground));
+  --color-canvas-default: hsl(var(--background));
+  --color-border-default: hsl(var(--border));
+  --color-neutral-muted: hsl(var(--muted));
+}
+
+/* Container styling */
+.w-md-editor {
+  @apply rounded-lg border;
+  border-color: hsl(var(--border)) !important;
+  background-color: hsl(var(--background)) !important;
+  font-family: inherit;
+}
+
+/* Toolbar styling */
 .w-md-editor-toolbar {
-  @apply border-b border-border bg-muted/50;
+  background-color: hsl(var(--muted)) !important;
+  border-color: hsl(var(--border)) !important;
   padding: 8px;
 }
 
-.w-md-editor-toolbar button,
-.w-md-editor-toolbar-divider {
-  @apply text-foreground;
-}
-
-.w-md-editor-toolbar button:hover {
-  @apply bg-accent text-accent-foreground;
-}
-
-.w-md-editor-toolbar button[data-active="true"] {
-  @apply bg-primary/10 text-primary;
-}
-
-.w-md-editor-toolbar ul > li > button {
+.w-md-editor-toolbar button {
+  color: hsl(var(--foreground)) !important;
   border-radius: 4px;
 }
 
-/* Editor content area */
+.w-md-editor-toolbar button:hover {
+  @apply bg-accent;
+}
+
+/* Editor area - let library handle text colors via CSS variables */
 .w-md-editor-content {
-  @apply bg-background;
+  background-color: hsl(var(--background)) !important;
 }
 
 .w-md-editor-text-pre,
 .w-md-editor-text-input {
-  @apply bg-background text-foreground;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
-}
-
-.w-md-editor-text-pre > code,
-.w-md-editor-text-input {
-  font-size: 14px !important;
-  line-height: 1.6 !important;
-}
-
-/* Light mode text visibility */
-.w-md-editor-text-pre > code {
-  color: hsl(var(--foreground)) !important;
-}
-
-.w-md-editor textarea.w-md-editor-text-input {
-  color: hsl(var(--foreground)) !important;
   background-color: hsl(var(--background)) !important;
-  caret-color: hsl(var(--foreground)) !important;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
 }
 
 /* Preview area */
 .w-md-editor-preview {
-  @apply bg-background;
+  background-color: hsl(var(--background)) !important;
 }
 
 .wmde-markdown {
-  @apply bg-background text-foreground;
-}
-
-.wmde-markdown-color {
-  @apply bg-background;
-}
-
-/* Dark mode specific overrides */
-.dark .w-md-editor {
-  @apply bg-background border-border;
-  --color-fg-default: hsl(var(--foreground));
-  --color-canvas-default: hsl(var(--background));
-  --color-border-default: hsl(var(--border));
-}
-
-.dark .w-md-editor-toolbar {
-  @apply bg-muted/50 border-border;
-}
-
-.dark .w-md-editor-text-pre,
-.dark .w-md-editor-text-input {
-  @apply bg-background text-foreground;
-  color: hsl(var(--foreground)) !important;
-}
-
-.dark .w-md-editor-text-pre > code {
-  color: hsl(var(--foreground)) !important;
-}
-
-.dark .w-md-editor textarea.w-md-editor-text-input {
-  color: hsl(var(--foreground)) !important;
   background-color: hsl(var(--background)) !important;
-  caret-color: hsl(var(--foreground)) !important;
-}
-
-.dark .wmde-markdown {
-  @apply bg-background text-foreground;
-}
-
-.dark .wmde-markdown code {
-  @apply bg-muted text-foreground;
-}
-
-.dark .wmde-markdown pre {
-  @apply bg-muted border border-border;
 }
 
 /* Scrollbar styling */
@@ -136,42 +82,15 @@
   @apply bg-muted-foreground/50;
 }
 
-/* Typography in preview matches MarkdownRenderer */
-.w-md-editor-preview .wmde-markdown {
-  max-width: none;
-}
-
+/* Typography in preview */
 .w-md-editor-preview .wmde-markdown h1,
 .w-md-editor-preview .wmde-markdown h2,
-.w-md-editor-preview .wmde-markdown h3,
-.w-md-editor-preview .wmde-markdown h4,
-.w-md-editor-preview .wmde-markdown h5,
-.w-md-editor-preview .wmde-markdown h6 {
+.w-md-editor-preview .wmde-markdown h3 {
   @apply font-bold tracking-tight;
 }
 
-.w-md-editor-preview .wmde-markdown h1 {
-  @apply text-4xl;
-}
-
-.w-md-editor-preview .wmde-markdown h2 {
-  @apply text-3xl;
-}
-
-.w-md-editor-preview .wmde-markdown h3 {
-  @apply text-2xl;
-}
-
-.w-md-editor-preview .wmde-markdown p {
-  @apply text-base leading-relaxed;
-}
-
 .w-md-editor-preview .wmde-markdown a {
-  @apply text-primary no-underline hover:underline;
-}
-
-.w-md-editor-preview .wmde-markdown strong {
-  @apply text-foreground font-semibold;
+  @apply text-primary hover:underline;
 }
 
 .w-md-editor-preview .wmde-markdown code {
@@ -181,23 +100,3 @@
 .w-md-editor-preview .wmde-markdown pre {
   @apply bg-muted border border-border rounded;
 }
-
-.w-md-editor-preview .wmde-markdown blockquote {
-  @apply border-l-4 border-primary italic;
-}
-
-.w-md-editor-preview .wmde-markdown img {
-  @apply rounded-lg shadow-lg;
-}
-
-.w-md-editor-preview .wmde-markdown hr {
-  @apply border-border;
-}
-
-.w-md-editor-preview .wmde-markdown ul {
-  @apply list-disc;
-}
-
-.w-md-editor-preview .wmde-markdown ol {
-  @apply list-decimal;
-}