ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-05 09:33:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(markdown): update styling for theme adaptability

Browse Source 
- Enhanced the Markdown component to support theme-aware styling, ensuring proper rendering across all predefined themes.
- Updated typography and color classes for headings, paragraphs, lists, code blocks, strong text, links, blockquotes, and horizontal rules to align with the new theme structure.
This commit is contained in:
Kacper
2025-12-10 21:56:56 +01:00
parent 38a609593b
commit 344651a981
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/src/components/ui/markdown.tsx
View File

@@ -10,7 +10,7 @@ interface MarkdownProps {
/** /**
* Reusable Markdown component for rendering markdown content * Reusable Markdown component for rendering markdown content
* Styled for dark mode with proper typography * Theme-aware styling that adapts to all predefined themes
*/ */
export function Markdown({ children, className }: MarkdownProps) { export function Markdown({ children, className }: MarkdownProps) {
return ( return (
@@ -18,27 +18,27 @@ export function Markdown({ children, className }: MarkdownProps) {
className={cn( className={cn(
"prose prose-sm prose-invert max-w-none", "prose prose-sm prose-invert max-w-none",
// Headings // Headings
"[&_h1]:text-xl [&_h1]:text-zinc-200 [&_h1]:font-semibold [&_h1]:mt-4 [&_h1]:mb-2", "[&_h1]:text-xl [&_h1]:text-foreground [&_h1]:font-semibold [&_h1]:mt-4 [&_h1]:mb-2",
"[&_h2]:text-lg [&_h2]:text-zinc-200 [&_h2]:font-semibold [&_h2]:mt-4 [&_h2]:mb-2", "[&_h2]:text-lg [&_h2]:text-foreground [&_h2]:font-semibold [&_h2]:mt-4 [&_h2]:mb-2",
"[&_h3]:text-base [&_h3]:text-zinc-200 [&_h3]:font-semibold [&_h3]:mt-3 [&_h3]:mb-2", "[&_h3]:text-base [&_h3]:text-foreground [&_h3]:font-semibold [&_h3]:mt-3 [&_h3]:mb-2",
"[&_h4]:text-sm [&_h4]:text-zinc-200 [&_h4]:font-semibold [&_h4]:mt-2 [&_h4]:mb-1", "[&_h4]:text-sm [&_h4]:text-foreground [&_h4]:font-semibold [&_h4]:mt-2 [&_h4]:mb-1",
// Paragraphs // Paragraphs
"[&_p]:text-zinc-300 [&_p]:leading-relaxed [&_p]:my-2", "[&_p]:text-foreground-secondary [&_p]:leading-relaxed [&_p]:my-2",
// Lists // Lists
"[&_ul]:my-2 [&_ul]:pl-4 [&_ol]:my-2 [&_ol]:pl-4", "[&_ul]:my-2 [&_ul]:pl-4 [&_ol]:my-2 [&_ol]:pl-4",
"[&_li]:text-zinc-300 [&_li]:my-0.5", "[&_li]:text-foreground-secondary [&_li]:my-0.5",
// Code // Code
"[&_code]:text-cyan-400 [&_code]:bg-zinc-800/50 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-sm", "[&_code]:text-chart-2 [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-sm",
"[&_pre]:bg-zinc-900/80 [&_pre]:border [&_pre]:border-white/10 [&_pre]:rounded-lg [&_pre]:my-2 [&_pre]:p-3 [&_pre]:overflow-x-auto", "[&_pre]:bg-card [&_pre]:border [&_pre]:border-border [&_pre]:rounded-lg [&_pre]:my-2 [&_pre]:p-3 [&_pre]:overflow-x-auto",
"[&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_pre_code]:bg-transparent [&_pre_code]:p-0",
// Strong/Bold // Strong/Bold
"[&_strong]:text-zinc-200 [&_strong]:font-semibold", "[&_strong]:text-foreground [&_strong]:font-semibold",
// Links // Links
"[&_a]:text-blue-400 [&_a]:no-underline hover:[&_a]:underline", "[&_a]:text-brand-500 [&_a]:no-underline hover:[&_a]:underline",
// Blockquotes // Blockquotes
"[&_blockquote]:border-l-2 [&_blockquote]:border-zinc-600 [&_blockquote]:pl-4 [&_blockquote]:text-zinc-400 [&_blockquote]:italic [&_blockquote]:my-2", "[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic [&_blockquote]:my-2",
// Horizontal rules // Horizontal rules
"[&_hr]:border-zinc-700 [&_hr]:my-4", "[&_hr]:border-border [&_hr]:my-4",
className className
)} )}
> >