chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: implement monochrome design system across entire frontend

Browse Source 
Migrate all 84 frontend files from the old themed/colored design to a
monochrome glass-morphism design system. Pure black backgrounds, white
text with opacity levels, glass-card components with backdrop-blur, and
functional color reserved for status indicators only.

Foundation: remap CSS variables to monochrome, simplify Tailwind config,
remove theme toggle, convert brand logo/wordmark to white. Pages: all
14 pages updated. Components: all common, library, session, step-library,
tree-editor, tree-preview, admin, and subscription components converted.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-09 21:41:29 -05:00
parent 1381aaae99
commit f4ce1595d6
88 changed files with 2976 additions and 1596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/ui/MarkdownContent.tsx
View File

@@ -21,7 +21,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
),
// Style bold text
strong: ({ children }) => (
<strong className="font-semibold text-foreground">{children}</strong>
<strong className="font-semibold text-white">{children}</strong>
),
// Style ordered lists
ol: ({ children }) => (
@@ -33,7 +33,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
),
// Style list items
li: ({ children }) => (
<li className="text-muted-foreground">{children}</li>
<li className="text-white/60">{children}</li>
),
// Style inline code
code: ({ className, children, ...props }) => {
@@ -43,7 +43,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
return (
<code
className={cn(
'block rounded bg-muted p-3 font-mono text-sm overflow-x-auto',
'block rounded bg-white/10 p-3 font-mono text-sm overflow-x-auto',
className
)}
{...props}
@@ -54,7 +54,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
}
return (
<code
className="rounded bg-muted px-1.5 py-0.5 font-mono text-sm"
className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-sm"
{...props}
>
{children}
@@ -63,25 +63,25 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
},
// Style code blocks (pre)
pre: ({ children }) => (
<pre className="mb-3 overflow-x-auto rounded bg-muted p-0 last:mb-0">
<pre className="mb-3 overflow-x-auto rounded bg-white/10 p-0 last:mb-0">
{children}
</pre>
),
// Style headers
h1: ({ children }) => (
<h1 className="mb-3 text-lg font-bold text-foreground">{children}</h1>
<h1 className="mb-3 text-lg font-bold text-white">{children}</h1>
),
h2: ({ children }) => (
<h2 className="mb-2 text-base font-bold text-foreground">{children}</h2>
<h2 className="mb-2 text-base font-bold text-white">{children}</h2>
),
h3: ({ children }) => (
<h3 className="mb-2 text-sm font-bold text-foreground">{children}</h3>
<h3 className="mb-2 text-sm font-bold text-white">{children}</h3>
),
// Style horizontal rules
hr: () => <hr className="my-4 border-border" />,
hr: () => <hr className="my-4 border-white/[0.06]" />,
// Style blockquotes
blockquote: ({ children }) => (
<blockquote className="mb-3 border-l-4 border-primary/50 pl-4 italic text-muted-foreground last:mb-0">
<blockquote className="mb-3 border-l-4 border-white/20 pl-4 italic text-white/50 last:mb-0">
{children}
</blockquote>
),