diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index 8a5b753..c5d05d4 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -2,7 +2,7 @@ @plugin "@tailwindcss/typography"; :root { - --background: #0a0a0f; + --background: #0a0a0a; --surface: rgba(255, 255, 255, 0.03); --surface-hover: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.08); @@ -15,13 +15,21 @@ --accent-blue: #3b82f6; --accent-indigo: #6366f1; --accent-purple: #9333ea; - --accent-cyan: #06b6d4; --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #9333ea 100%); --gradient-subtle: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%); --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.3); - --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); + + /* Shared Vectry design language aliases */ + --surface-page: var(--background); + --surface-card: var(--surface); + --surface-card-hover: var(--surface-hover); + --border-default: var(--border); + --border-subtle: rgba(255, 255, 255, 0.04); + --radius-card: 1rem; + --radius-button: 0.5rem; + --radius-icon: 0.75rem; } * { diff --git a/apps/web/src/app/history/page.tsx b/apps/web/src/app/history/page.tsx index 67fa634..34626fc 100644 --- a/apps/web/src/app/history/page.tsx +++ b/apps/web/src/app/history/page.tsx @@ -120,7 +120,7 @@ function ComparisonView({ leftOverview.keyMetrics.languages.length; return ( -
+
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 5f291b5..c335c76 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -73,7 +73,7 @@ export default function RootLayout({ return (
diff --git a/apps/web/src/components/mermaid-diagram.tsx b/apps/web/src/components/mermaid-diagram.tsx index fa8a549..9820380 100644 --- a/apps/web/src/components/mermaid-diagram.tsx +++ b/apps/web/src/components/mermaid-diagram.tsx @@ -25,7 +25,7 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) { securityLevel: "loose", themeVariables: { darkMode: true, - background: "#0a0a0f", + background: "#0a0a0a", primaryColor: "#1e3a5f", primaryTextColor: "#ffffff", primaryBorderColor: "#3b82f6", @@ -213,7 +213,7 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) { return ( <>
-
+
Architecture Diagram {controls}