SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

refactor(chat): layer Markdown integration styles

Browse source 
- 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>
This commit is contained in:
Danila Poyarkov 2026-09-03 17:37:44 +03:00
parent b1522c8f34
commit 743078255f
4 changed files with 89 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app.css
View file

@ -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;

1
src/components/chat/ChatMarkdown.vue
View file

@ -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'

85
src/theme/chat.css Normal file
View file

@ -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;
}
}

53
src/theme/chat.ts
View file

@ -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)]',