Vectry/codeboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

feat: align design tokens with Vectry unified design language

Browse Source 
- 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
This commit is contained in:
Vectry
2026-02-10 17:22:53 +00:00
parent de8b827562
commit 38d5b4806c
4 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/web/src/app/globals.css
View File

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

2
apps/web/src/app/history/page.tsx
View File

@@ -120,7 +120,7 @@ function ComparisonView({
leftOverview.keyMetrics.languages.length;
return (
<div className="fixed inset-0 z-50 bg-[#0a0a0f] overflow-auto">
<div className="fixed inset-0 z-50 bg-[#0a0a0a] overflow-auto">
<div className="sticky top-0 z-10 border-b border-white/10 bg-black/50 backdrop-blur-sm">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex items-center justify-between">

2
apps/web/src/app/layout.tsx
View File

@@ -73,7 +73,7 @@ export default function RootLayout({
return (
<html lang="en" className="dark">
<body
className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased bg-[#0a0a0f] text-white min-h-screen`}
className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased bg-[#0a0a0a] text-white min-h-screen`}
>
<div className="relative min-h-screen flex flex-col">
<div className="fixed inset-0 bg-gradient-radial pointer-events-none" />

4
apps/web/src/components/mermaid-diagram.tsx
View File

@@ -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 (
<>
<div style={{ minHeight: "100px" }} />
<div className="fixed inset-0 z-50 bg-[#0a0a0f]/95 backdrop-blur-sm flex flex-col">
<div className="fixed inset-0 z-50 bg-[#0a0a0a]/95 backdrop-blur-sm flex flex-col">
<div className="flex items-center justify-between px-6 py-3 border-b border-white/10">
<span className="text-sm text-zinc-400">Architecture Diagram</span>
{controls}