mirror of
https://github.com/open-jarvis/OpenJarvis.git
synced 2026-07-30 10:52:15 +00:00
e240fde74a
* feat(ui): update design tokens — system-ui font, warmer palette, accent triad - Remove Merriweather serif font, switch to system-ui font stack - Warmer dark mode neutrals (#161618 bg instead of #09090b) - Add amber/purple accent tokens for signature color triad - Update borders to rgba for softer feel - Tighter line-height (1.5) and letter-spacing (-0.01em) - Update PWA theme_color to match new palette Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat(ui): frosted glass sidebar with backdrop-blur Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat(ui): initialize shadcn/ui with button, dialog, input, select, tooltip, sonner Set up shadcn/ui (v4) for Tailwind CSS v4 with CSS-first config. Added path aliases (@/) to tsconfig.json and vite.config.ts. Installed six components (button, dialog, input, select, tooltip, sonner) and wired Sonner's <Toaster> into App.tsx for toast notifications. Removed the next-themes dependency since this is a Vite/React project, not Next.js. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(ui): disable create agent when unavailable, replace errors with toasts Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat(ui): add System Pulse bar and health check banner - 3px gradient bar at top reflecting system state (idle/inferencing/agent) - Health check banner when backend is unreachable - Pulse colors: blue (inference), purple (agents), dim blue (idle) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat(ui): add X-Ray message footers with collapsible telemetry - MessageTelemetry type on ChatMessage (engine, model, speed, TTFT, timing) - Capture timing data during SSE streaming in InputArea - XRayFooter component: collapsed one-liner + expandable trace grid - Integrated into MessageBubble, replacing old token count display Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(ui): resolve shadcn/ui CSS token conflicts with design system - Namespace shadcn @theme inline variables (--color-cn-*) to avoid overriding project's --color-border, --color-accent, --radius-* tokens - Remove @apply border-border, bg-background, text-foreground, font-sans that conflicted with our explicit CSS custom properties - Remove dead Geist font import (we use system-ui) - Remove ---break--- comment artifacts from shadcn CLI Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
483 lines
13 KiB
CSS
483 lines
13 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/*
|
|
* OpenJarvis design tokens.
|
|
* Zinc/slate neutrals, blue accent. Light default, dark via class or system pref.
|
|
*/
|
|
|
|
@layer base {
|
|
:root {
|
|
--color-bg: #f9f9f9;
|
|
--color-bg-secondary: #f4f4f5;
|
|
--color-bg-tertiary: #e4e4e7;
|
|
--color-surface: #ffffff;
|
|
--color-sidebar: rgba(250, 250, 250, 0.85);
|
|
--color-border: rgba(0, 0, 0, 0.08);
|
|
--color-border-subtle: rgba(0, 0, 0, 0.04);
|
|
|
|
--color-text: #09090b;
|
|
--color-text-secondary: #71717a;
|
|
--color-text-tertiary: #a1a1aa;
|
|
--color-text-inverse: #fafafa;
|
|
|
|
--color-accent: #3b82f6;
|
|
--color-accent-hover: #2563eb;
|
|
--color-accent-subtle: #eff6ff;
|
|
|
|
--color-accent-amber: #f59e0b;
|
|
--color-accent-amber-hover: #d97706;
|
|
--color-accent-amber-subtle: rgba(245, 158, 11, 0.1);
|
|
--color-accent-purple: #8b5cf6;
|
|
--color-accent-purple-hover: #7c3aed;
|
|
--color-accent-purple-subtle: rgba(139, 92, 246, 0.1);
|
|
--color-accent-blue-subtle: rgba(59, 130, 246, 0.1);
|
|
|
|
--color-success: #16a34a;
|
|
--color-warning: #ca8a04;
|
|
--color-error: #dc2626;
|
|
|
|
--color-code-bg: #f4f4f5;
|
|
--color-input-bg: #ffffff;
|
|
--color-input-border: #d4d4d8;
|
|
|
|
--color-user-bubble: #3b82f6;
|
|
--color-user-bubble-text: #ffffff;
|
|
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
|
|
--radius-sm: 0.375rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius-full: 9999px;
|
|
|
|
--sidebar-width: 260px;
|
|
--chat-max-width: 720px;
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
.dark {
|
|
--color-bg: #161618;
|
|
--color-bg-secondary: #1e1e21;
|
|
--color-bg-tertiary: #2a2a2d;
|
|
--color-surface: #1e1e21;
|
|
--color-sidebar: rgba(30, 30, 33, 0.85);
|
|
--color-border: rgba(255, 255, 255, 0.08);
|
|
--color-border-subtle: rgba(255, 255, 255, 0.04);
|
|
|
|
--color-text: #e8e8ed;
|
|
--color-text-secondary: #8e8e93;
|
|
--color-text-tertiary: #636366;
|
|
--color-text-inverse: #161618;
|
|
|
|
--color-accent: #3b82f6;
|
|
--color-accent-hover: #60a5fa;
|
|
--color-accent-subtle: #172554;
|
|
|
|
--color-accent-amber: #f59e0b;
|
|
--color-accent-amber-hover: #fbbf24;
|
|
--color-accent-amber-subtle: rgba(245, 158, 11, 0.15);
|
|
--color-accent-purple: #8b5cf6;
|
|
--color-accent-purple-hover: #a78bfa;
|
|
--color-accent-purple-subtle: rgba(139, 92, 246, 0.15);
|
|
--color-accent-blue-subtle: rgba(59, 130, 246, 0.15);
|
|
|
|
--color-success: #22c55e;
|
|
--color-warning: #eab308;
|
|
--color-error: #ef4444;
|
|
|
|
--color-code-bg: #1e1e22;
|
|
--color-input-bg: #1e1e21;
|
|
--color-input-border: rgba(255, 255, 255, 0.1);
|
|
|
|
--color-user-bubble: #3b82f6;
|
|
--color-user-bubble-text: #ffffff;
|
|
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not(.light) {
|
|
--color-bg: #161618;
|
|
--color-bg-secondary: #1e1e21;
|
|
--color-bg-tertiary: #2a2a2d;
|
|
--color-surface: #1e1e21;
|
|
--color-sidebar: rgba(30, 30, 33, 0.85);
|
|
--color-border: rgba(255, 255, 255, 0.08);
|
|
--color-border-subtle: rgba(255, 255, 255, 0.04);
|
|
|
|
--color-text: #e8e8ed;
|
|
--color-text-secondary: #8e8e93;
|
|
--color-text-tertiary: #636366;
|
|
--color-text-inverse: #161618;
|
|
|
|
--color-accent: #3b82f6;
|
|
--color-accent-hover: #60a5fa;
|
|
--color-accent-subtle: #172554;
|
|
|
|
--color-accent-amber: #f59e0b;
|
|
--color-accent-amber-hover: #fbbf24;
|
|
--color-accent-amber-subtle: rgba(245, 158, 11, 0.15);
|
|
--color-accent-purple: #8b5cf6;
|
|
--color-accent-purple-hover: #a78bfa;
|
|
--color-accent-purple-subtle: rgba(139, 92, 246, 0.15);
|
|
--color-accent-blue-subtle: rgba(59, 130, 246, 0.15);
|
|
|
|
--color-success: #22c55e;
|
|
--color-warning: #eab308;
|
|
--color-error: #ef4444;
|
|
|
|
--color-code-bg: #1e1e22;
|
|
--color-input-bg: #1e1e21;
|
|
--color-input-border: rgba(255, 255, 255, 0.1);
|
|
|
|
--color-user-bubble: #3b82f6;
|
|
--color-user-bubble-text: #ffffff;
|
|
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
|
|
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body, #root {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
letter-spacing: -0.01em;
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--color-accent);
|
|
color: white;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-border);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-text-tertiary);
|
|
}
|
|
}
|
|
|
|
/* Syntax highlighting theme (highlight.js) */
|
|
@layer components {
|
|
.hljs {
|
|
display: block;
|
|
background: var(--color-code-bg) !important;
|
|
color: var(--color-text) !important;
|
|
border-radius: var(--radius-md);
|
|
padding: 1rem !important;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.6;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.code-block-wrapper .hljs {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.hljs-keyword,
|
|
.hljs-selector-tag,
|
|
.hljs-literal,
|
|
.hljs-section,
|
|
.hljs-link { color: #7c3aed; }
|
|
.dark .hljs-keyword,
|
|
.dark .hljs-selector-tag,
|
|
.dark .hljs-literal,
|
|
.dark .hljs-section,
|
|
.dark .hljs-link { color: #a78bfa; }
|
|
|
|
.hljs-string,
|
|
.hljs-title,
|
|
.hljs-name,
|
|
.hljs-type,
|
|
.hljs-attribute,
|
|
.hljs-symbol,
|
|
.hljs-bullet,
|
|
.hljs-addition,
|
|
.hljs-variable,
|
|
.hljs-template-tag,
|
|
.hljs-template-variable { color: #059669; }
|
|
.dark .hljs-string,
|
|
.dark .hljs-title,
|
|
.dark .hljs-name,
|
|
.dark .hljs-type,
|
|
.dark .hljs-attribute,
|
|
.dark .hljs-symbol,
|
|
.dark .hljs-bullet,
|
|
.dark .hljs-addition,
|
|
.dark .hljs-variable,
|
|
.dark .hljs-template-tag,
|
|
.dark .hljs-template-variable { color: #34d399; }
|
|
|
|
.hljs-comment,
|
|
.hljs-quote,
|
|
.hljs-deletion,
|
|
.hljs-meta { color: #a1a1aa; }
|
|
|
|
.hljs-number,
|
|
.hljs-regexp,
|
|
.hljs-built_in,
|
|
.hljs-params { color: #d97706; }
|
|
.dark .hljs-number,
|
|
.dark .hljs-regexp,
|
|
.dark .hljs-built_in,
|
|
.dark .hljs-params { color: #fbbf24; }
|
|
|
|
.hljs-function { color: #2563eb; }
|
|
.dark .hljs-function { color: #60a5fa; }
|
|
|
|
/* Markdown prose styling */
|
|
.prose {
|
|
line-height: 1.55;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.prose p {
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.prose p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.prose code:not(pre code) {
|
|
background: var(--color-code-bg);
|
|
padding: 0.15em 0.35em;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.85em;
|
|
font-family: "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
|
|
}
|
|
|
|
.prose pre {
|
|
margin: 0.75em 0;
|
|
border-radius: var(--radius-md);
|
|
overflow-x: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.prose .code-block-wrapper pre {
|
|
margin: 0;
|
|
border-radius: 0;
|
|
background: var(--color-code-bg);
|
|
}
|
|
|
|
.prose pre code {
|
|
font-family: "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
|
|
}
|
|
|
|
.prose ul, .prose ol {
|
|
padding-left: 1.5em;
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.prose li {
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.prose blockquote {
|
|
border-left: 3px solid var(--color-accent);
|
|
padding-left: 1em;
|
|
margin: 0.75em 0;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.prose h1, .prose h2, .prose h3, .prose h4 {
|
|
font-weight: 600;
|
|
margin-top: 1em;
|
|
margin-bottom: 0.5em;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.prose h1 { font-size: 1.375em; }
|
|
.prose h2 { font-size: 1.2em; }
|
|
.prose h3 { font-size: 1.075em; }
|
|
|
|
.prose table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 0.75em 0;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
.prose th, .prose td {
|
|
border: 1px solid var(--color-border);
|
|
padding: 0.5em 0.75em;
|
|
text-align: left;
|
|
}
|
|
|
|
.prose th {
|
|
background: var(--color-bg-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.prose a {
|
|
color: var(--color-accent);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.prose a:hover {
|
|
color: var(--color-accent-hover);
|
|
}
|
|
|
|
.prose hr {
|
|
border: none;
|
|
border-top: 1px solid var(--color-border);
|
|
margin: 1em 0;
|
|
}
|
|
|
|
/* System Pulse animations */
|
|
@keyframes pulse-glow {
|
|
0%, 100% { opacity: 0.7; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes pulse-travel {
|
|
0% { background-position: -200% center; }
|
|
100% { background-position: 200% center; }
|
|
}
|
|
}
|
|
:root {
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.145 0 0);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.145 0 0);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.145 0 0);
|
|
--primary: oklch(0.205 0 0);
|
|
--primary-foreground: oklch(0.985 0 0);
|
|
--secondary: oklch(0.97 0 0);
|
|
--secondary-foreground: oklch(0.205 0 0);
|
|
--muted: oklch(0.97 0 0);
|
|
--muted-foreground: oklch(0.556 0 0);
|
|
--accent: oklch(0.97 0 0);
|
|
--accent-foreground: oklch(0.205 0 0);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--border: oklch(0.922 0 0);
|
|
--input: oklch(0.922 0 0);
|
|
--ring: oklch(0.708 0 0);
|
|
--chart-1: oklch(0.809 0.105 251.813);
|
|
--chart-2: oklch(0.623 0.214 259.815);
|
|
--chart-3: oklch(0.546 0.245 262.881);
|
|
--chart-4: oklch(0.488 0.243 264.376);
|
|
--chart-5: oklch(0.424 0.199 265.638);
|
|
--radius: 0.625rem;
|
|
--sidebar: oklch(0.985 0 0);
|
|
--sidebar-foreground: oklch(0.145 0 0);
|
|
--sidebar-primary: oklch(0.205 0 0);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.97 0 0);
|
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
--sidebar-border: oklch(0.922 0 0);
|
|
--sidebar-ring: oklch(0.708 0 0);
|
|
}
|
|
.dark {
|
|
--background: oklch(0.145 0 0);
|
|
--foreground: oklch(0.985 0 0);
|
|
--card: oklch(0.205 0 0);
|
|
--card-foreground: oklch(0.985 0 0);
|
|
--popover: oklch(0.205 0 0);
|
|
--popover-foreground: oklch(0.985 0 0);
|
|
--primary: oklch(0.922 0 0);
|
|
--primary-foreground: oklch(0.205 0 0);
|
|
--secondary: oklch(0.269 0 0);
|
|
--secondary-foreground: oklch(0.985 0 0);
|
|
--muted: oklch(0.269 0 0);
|
|
--muted-foreground: oklch(0.708 0 0);
|
|
--accent: oklch(0.269 0 0);
|
|
--accent-foreground: oklch(0.985 0 0);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--border: oklch(1 0 0 / 10%);
|
|
--input: oklch(1 0 0 / 15%);
|
|
--ring: oklch(0.556 0 0);
|
|
--chart-1: oklch(0.809 0.105 251.813);
|
|
--chart-2: oklch(0.623 0.214 259.815);
|
|
--chart-3: oklch(0.546 0.245 262.881);
|
|
--chart-4: oklch(0.488 0.243 264.376);
|
|
--chart-5: oklch(0.424 0.199 265.638);
|
|
--sidebar: oklch(0.205 0 0);
|
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.269 0 0);
|
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.556 0 0);
|
|
}
|
|
@theme inline {
|
|
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
/* shadcn component tokens — namespaced to avoid collision with OpenJarvis design tokens */
|
|
--color-cn-sidebar-ring: var(--sidebar-ring);
|
|
--color-cn-sidebar-border: var(--sidebar-border);
|
|
--color-cn-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-cn-sidebar-accent: var(--sidebar-accent);
|
|
--color-cn-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-cn-sidebar-primary: var(--sidebar-primary);
|
|
--color-cn-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-cn-sidebar: var(--sidebar);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-ring: var(--ring);
|
|
--color-cn-input: var(--input);
|
|
--color-cn-border: var(--border);
|
|
--color-destructive: var(--destructive);
|
|
--color-cn-accent-foreground: var(--accent-foreground);
|
|
--color-cn-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--color-foreground: var(--foreground);
|
|
--color-background: var(--background);
|
|
/* Keep project radius tokens — don't override with shadcn calc values */
|
|
} |