From 38d5b4806c2b09a734636041ac94135aa611e246 Mon Sep 17 00:00:00 2001 From: Vectry Date: Tue, 10 Feb 2026 17:22:53 +0000 Subject: [PATCH] feat: align design tokens with Vectry unified design language - Change background from #0a0a0f to #0a0a0a (matching vectry.tech + AgentLens) - Remove unused --accent-cyan and --shadow-card tokens - Add shared Vectry design aliases (surface-page, surface-card, border-default, radius-card, etc.) - Fix hardcoded #0a0a0f in layout.tsx, history/page.tsx, and mermaid-diagram.tsx --- apps/web/src/app/globals.css | 14 +++++++++++--- apps/web/src/app/history/page.tsx | 2 +- apps/web/src/app/layout.tsx | 2 +- apps/web/src/components/mermaid-diagram.tsx | 4 ++-- 4 files changed, 15 insertions(+), 7 deletions(-) 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}