From 743078255fa52e2016aa1ff6626feb33a0130a75 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Thu, 3 Sep 2026 17:37:44 +0300
Subject: [PATCH] refactor(chat): layer Markdown integration styles

- Import upstream Markdown CSS through the components cascade layer\n- Keep compact semantic overrides in a dedicated chat stylesheet\n- Preserve Shiki backgrounds through its supported theme variable\n\nCo-authored-by: Jason Kneen <jason.kneen@bouncingfish.com>
---
 src/app.css                          |  2 +
 src/components/chat/ChatMarkdown.vue |  1 -
 src/theme/chat.css                   | 85 ++++++++++++++++++++++++++++
 src/theme/chat.ts                    | 53 +----------------
 4 files changed, 89 insertions(+), 52 deletions(-)
 create mode 100644 src/theme/chat.css

diff --git a/src/app.css b/src/app.css
index e5da7b5de..85a4d396a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,5 +1,7 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
+@import 'vue-stream-markdown/index.css' layer(components);
+@import './theme/chat.css';
 
 @utility scrollbar-none {
   -ms-overflow-style: none;
diff --git a/src/components/chat/ChatMarkdown.vue b/src/components/chat/ChatMarkdown.vue
index a21899629..e1c30f233 100644
--- a/src/components/chat/ChatMarkdown.vue
+++ b/src/components/chat/ChatMarkdown.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Markdown } from 'vue-stream-markdown'
-import 'vue-stream-markdown/index.css'
 
 import { IS_BROWSER } from '@open-pencil/core/constants'
 
diff --git a/src/theme/chat.css b/src/theme/chat.css
new file mode 100644
index 000000000..22d8461e6
--- /dev/null
+++ b/src/theme/chat.css
@@ -0,0 +1,85 @@
+@reference 'tailwindcss';
+
+.chat-markdown-root [data-stream-markdown='code-block'],
+.chat-markdown-root .shiki {
+  background-color: var(--color-input);
+}
+
+.chat-markdown {
+  --shiki-dark-bg: var(--color-input);
+  @apply text-[11px] leading-4;
+
+  [data-stream-markdown='blockquote'],
+  [data-stream-markdown='code-block'] {
+    @apply my-2;
+  }
+
+  [data-stream-markdown='code-block-header'] {
+    @apply h-6 px-1.5 py-0 text-[9px] leading-3;
+  }
+
+  [data-stream-markdown='code-block-header'] [data-stream-markdown='actions'] {
+    @apply gap-0.5;
+  }
+
+  [data-stream-markdown='code-block-header'] [data-stream-markdown='button'] {
+    @apply size-4 p-0;
+  }
+
+  [data-stream-markdown='code-block-header'] [data-stream-markdown='button'] svg,
+  [data-stream-markdown='language-title'] svg {
+    @apply size-2.5;
+  }
+
+  [data-stream-markdown='code-line'] {
+    @apply min-h-4 text-[11px] leading-4;
+
+    &::before {
+      @apply mr-2 text-[9px];
+    }
+  }
+
+  [data-stream-markdown='code-block'] [data-stream-markdown='code'] {
+    @apply p-1.5 text-[11px] leading-4;
+  }
+
+  [data-stream-markdown='heading-1'] {
+    @apply mt-2.5 mb-1 text-sm;
+  }
+
+  [data-stream-markdown='heading-2'] {
+    @apply mt-2.5 mb-1 text-xs;
+  }
+
+  [data-stream-markdown='heading-3'],
+  [data-stream-markdown='heading-4'],
+  [data-stream-markdown='heading-5'],
+  [data-stream-markdown='heading-6'] {
+    @apply mt-2 mb-1 text-[11px];
+  }
+
+  [data-stream-markdown='language-name'] {
+    @apply text-[9px] leading-3;
+  }
+
+  [data-stream-markdown='language-title'] {
+    @apply gap-1;
+  }
+
+  [data-stream-markdown='li'] {
+    @apply py-0;
+  }
+
+  [data-stream-markdown='ol'],
+  [data-stream-markdown='ul'] {
+    @apply leading-4;
+  }
+
+  [data-stream-markdown='p'] {
+    @apply my-1.5;
+  }
+
+  [data-stream-markdown='thematic-break'] {
+    @apply my-2;
+  }
+}
diff --git a/src/theme/chat.ts b/src/theme/chat.ts
index bfbb149bb..4730343bd 100644
--- a/src/theme/chat.ts
+++ b/src/theme/chat.ts
@@ -2,58 +2,9 @@ import { tv } from 'tailwind-variants'
 
 export const chatUI = tv({
   slots: {
-    markdownRoot: [
-      '[&_[data-stream-markdown=code]]:![background-color:var(--color-input)]',
-      '[&_[data-stream-markdown=code-block]]:![background-color:var(--color-input)]'
-    ],
+    markdownRoot: 'chat-markdown-root',
     markdown: [
-      'chat-markdown text-[11px] leading-4',
-      '[&_[data-stream-markdown=blockquote]]:!my-2',
-      '[&_[data-stream-markdown=code-block-header]]:!h-6',
-      '[&_[data-stream-markdown=code-block-header]]:!leading-3',
-      '[&_[data-stream-markdown=code-block-header]]:!px-1.5',
-      '[&_[data-stream-markdown=code-block-header]]:!py-0',
-      '[&_[data-stream-markdown=code-block-header]]:!text-[9px]',
-      '[&_[data-stream-markdown=code-block-header]_[data-stream-markdown=actions]]:!gap-0.5',
-      '[&_[data-stream-markdown=code-block-header]_[data-stream-markdown=button]]:!size-4',
-      '[&_[data-stream-markdown=code-block-header]_[data-stream-markdown=button]]:!p-0',
-      '[&_[data-stream-markdown=code-block-header]_[data-stream-markdown=button]_svg]:!size-2.5',
-      '[&_[data-stream-markdown=code-block]]:!my-2',
-      '[&_[data-stream-markdown=code-line]]:!leading-4',
-      '[&_[data-stream-markdown=code-line]]:!min-h-4',
-      '[&_[data-stream-markdown=code-line]]:!text-[11px]',
-      '[&_[data-stream-markdown=code-line]]:before:!mr-2',
-      '[&_[data-stream-markdown=code-line]]:before:!text-[9px]',
-      '[&_[data-stream-markdown=code-block]_[data-stream-markdown=code]]:!leading-4',
-      '[&_[data-stream-markdown=code-block]_[data-stream-markdown=code]]:!p-1.5',
-      '[&_[data-stream-markdown=code-block]_[data-stream-markdown=code]]:!text-[11px]',
-      '[&_[data-stream-markdown=heading-1]]:!mb-1',
-      '[&_[data-stream-markdown=heading-1]]:!mt-2.5',
-      '[&_[data-stream-markdown=heading-1]]:!text-sm',
-      '[&_[data-stream-markdown=heading-2]]:!mb-1',
-      '[&_[data-stream-markdown=heading-2]]:!mt-2.5',
-      '[&_[data-stream-markdown=heading-2]]:!text-xs',
-      '[&_[data-stream-markdown=heading-3]]:!mb-1',
-      '[&_[data-stream-markdown=heading-3]]:!mt-2',
-      '[&_[data-stream-markdown=heading-3]]:!text-[11px]',
-      '[&_[data-stream-markdown=heading-4]]:!mb-1',
-      '[&_[data-stream-markdown=heading-4]]:!mt-2',
-      '[&_[data-stream-markdown=heading-4]]:!text-[11px]',
-      '[&_[data-stream-markdown=heading-5]]:!mb-1',
-      '[&_[data-stream-markdown=heading-5]]:!mt-2',
-      '[&_[data-stream-markdown=heading-5]]:!text-[11px]',
-      '[&_[data-stream-markdown=heading-6]]:!mb-1',
-      '[&_[data-stream-markdown=heading-6]]:!mt-2',
-      '[&_[data-stream-markdown=heading-6]]:!text-[11px]',
-      '[&_[data-stream-markdown=hr]]:!my-2',
-      '[&_[data-stream-markdown=language-name]]:!leading-3',
-      '[&_[data-stream-markdown=language-name]]:!text-[9px]',
-      '[&_[data-stream-markdown=language-title]]:!gap-1',
-      '[&_[data-stream-markdown=language-title]_svg]:!size-2.5',
-      '[&_[data-stream-markdown=li]]:!py-0',
-      '[&_[data-stream-markdown=ol]]:!leading-4',
-      '[&_[data-stream-markdown=p]]:!my-1.5',
-      '[&_[data-stream-markdown=ul]]:!leading-4',
+      'chat-markdown',
       '[--accent:var(--color-hover)]',
       '[--accent-foreground:var(--color-surface)]',
       '[--background:var(--color-input)]',