ros/autocoder
1
0
Fork 0
mirror of https://github.com/leonvanzyl/autocoder.git synced 2026-01-30 06:12:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(theme): Update Business theme with deep navy and gray palette

Browse Source 
- Change primary color to deep navy #000e4e
- Replace teal accent with gray monochrome scale
- Add warm off-white background
- Enhance card shadows for modern depth (2026 UI trend)
- Update chart colors to navy-gray gradient scale

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
nogataka
2026-01-28 15:09:52 +09:00
parent b2bfc4cb3b
commit f10ad59cf5
2 changed files with 96 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/hooks/useTheme.ts
View File

@@ -47,8 +47,8 @@ export const THEMES: ThemeOption[] = [
{ {
id: 'business', id: 'business',
name: 'Business', name: 'Business',
description: 'Professional navy and gray palette', description: 'Deep navy (#000e4e) and gray monochrome',
previewColors: { primary: '#1e3a5f', background: '#f8fafc', accent: '#0d9488' } previewColors: { primary: '#000e4e', background: '#faf8f5', accent: '#6b7280' }
} }
] ]

172
ui/src/styles/globals.css
View File

@@ -592,62 +592,71 @@
/* ============================================================================ /* ============================================================================
Theme: Business Theme: Business
Professional navy and gray palette for corporate use Professional deep navy (#000e4e) and gray palette for corporate use
Designed for trust, readability, and minimal visual noise Designed for trust, readability, and modern depth with card shadows
============================================================================ */ ============================================================================ */
.theme-business { .theme-business {
--radius: 0.5rem; --radius: 0.5rem;
--background: oklch(0.9850 0.0030 250); /* Warm off-white background */
--foreground: oklch(0.1500 0.0200 250); --background: oklch(0.9800 0.0040 85);
/* Deep navy foreground #000e4e */
--foreground: oklch(0.1700 0.0900 265);
/* White cards with shadow depth */
--card: oklch(1.0000 0 0); --card: oklch(1.0000 0 0);
--card-foreground: oklch(0.1500 0.0200 250); --card-foreground: oklch(0.1700 0.0900 265);
--popover: oklch(1.0000 0 0); --popover: oklch(1.0000 0 0);
--popover-foreground: oklch(0.1500 0.0200 250); --popover-foreground: oklch(0.1700 0.0900 265);
--primary: oklch(0.3500 0.0800 250); /* Primary: Deep navy #000e4e */
--primary: oklch(0.1700 0.0900 265);
--primary-foreground: oklch(1.0000 0 0); --primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.9600 0.0050 250); /* Secondary: Light gray */
--secondary-foreground: oklch(0.1500 0.0200 250); --secondary: oklch(0.9500 0.0020 265);
--muted: oklch(0.9400 0.0050 250); --secondary-foreground: oklch(0.1700 0.0900 265);
--muted-foreground: oklch(0.5000 0.0150 250); /* Muted: Soft gray */
--accent: oklch(0.6000 0.1200 175); --muted: oklch(0.9300 0.0020 265);
--muted-foreground: oklch(0.4500 0.0100 265);
/* Accent: Medium gray (no teal) */
--accent: oklch(0.5500 0.0100 265);
--accent-foreground: oklch(1.0000 0 0); --accent-foreground: oklch(1.0000 0 0);
--destructive: oklch(0.5800 0.2000 25); --destructive: oklch(0.5800 0.2000 25);
--destructive-foreground: oklch(1.0000 0 0); --destructive-foreground: oklch(1.0000 0 0);
--border: oklch(0.9000 0.0050 250); /* Border: Subtle gray */
--input: oklch(0.9400 0.0050 250); --border: oklch(0.8800 0.0030 265);
--ring: oklch(0.3500 0.0800 250); --input: oklch(0.9300 0.0020 265);
--chart-1: oklch(0.3500 0.0800 250); --ring: oklch(0.1700 0.0900 265);
--chart-2: oklch(0.6000 0.1200 175); /* Chart colors: Navy-gray monochrome scale */
--chart-3: oklch(0.5500 0.1000 280); --chart-1: oklch(0.1700 0.0900 265);
--chart-4: oklch(0.6500 0.1000 140); --chart-2: oklch(0.3500 0.0600 265);
--chart-5: oklch(0.5800 0.0800 50); --chart-3: oklch(0.5000 0.0400 265);
--sidebar: oklch(0.9700 0.0040 250); --chart-4: oklch(0.6500 0.0200 265);
--sidebar-foreground: oklch(0.1500 0.0200 250); --chart-5: oklch(0.8000 0.0100 265);
--sidebar-primary: oklch(0.3500 0.0800 250); --sidebar: oklch(0.9600 0.0030 85);
--sidebar-foreground: oklch(0.1700 0.0900 265);
--sidebar-primary: oklch(0.1700 0.0900 265);
--sidebar-primary-foreground: oklch(1.0000 0 0); --sidebar-primary-foreground: oklch(1.0000 0 0);
--sidebar-accent: oklch(0.6000 0.1200 175); --sidebar-accent: oklch(0.5500 0.0100 265);
--sidebar-accent-foreground: oklch(1.0000 0 0); --sidebar-accent-foreground: oklch(1.0000 0 0);
--sidebar-border: oklch(0.9000 0.0050 250); --sidebar-border: oklch(0.8800 0.0030 265);
--sidebar-ring: oklch(0.3500 0.0800 250); --sidebar-ring: oklch(0.1700 0.0900 265);
/* Shadow variables - soft, professional shadows */ /* Shadow variables - pronounced for card depth (2026 trend) */
--shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04); --shadow-sm: 0 1px 3px 0 rgb(0 14 78 / 0.06), 0 1px 2px -1px rgb(0 14 78 / 0.04);
--shadow: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04); --shadow: 0 2px 8px 0 rgb(0 14 78 / 0.08), 0 1px 3px -1px rgb(0 14 78 / 0.06);
--shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.06), 0 2px 4px -2px rgb(15 23 42 / 0.04); --shadow-md: 0 6px 16px -2px rgb(0 14 78 / 0.10), 0 3px 6px -3px rgb(0 14 78 / 0.08);
--shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.06), 0 4px 6px -4px rgb(15 23 42 / 0.04); --shadow-lg: 0 12px 32px -4px rgb(0 14 78 / 0.12), 0 6px 12px -6px rgb(0 14 78 / 0.10);
/* Log level colors - muted professional tones */ /* Log level colors - professional muted tones */
--color-log-error: #dc2626; --color-log-error: #dc2626;
--color-log-warning: #d97706; --color-log-warning: #d97706;
--color-log-info: #2563eb; --color-log-info: #000e4e;
--color-log-debug: #64748b; --color-log-debug: #6b7280;
--color-log-success: #059669; --color-log-success: #059669;
/* Status colors for Kanban - subtle blue-gray */ /* Status colors for Kanban - gray-navy scale */
--color-status-pending: oklch(0.9400 0.0100 250); --color-status-pending: oklch(0.9300 0.0030 265);
--color-status-progress: oklch(0.9000 0.0300 200); --color-status-progress: oklch(0.8500 0.0200 265);
--color-status-done: oklch(0.9000 0.0400 175); --color-status-done: oklch(0.7500 0.0400 265);
/* Font stacks - system fonts for professional feel */ /* Font stacks - system fonts for professional feel */
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -655,56 +664,63 @@
} }
.theme-business.dark { .theme-business.dark {
--background: oklch(0.1300 0.0150 250); /* Very dark navy background */
--foreground: oklch(0.9500 0.0050 250); --background: oklch(0.1200 0.0400 265);
--card: oklch(0.1800 0.0180 250); --foreground: oklch(0.9400 0.0050 265);
--card-foreground: oklch(0.9500 0.0050 250); /* Dark navy cards with elevation */
--popover: oklch(0.1600 0.0160 250); --card: oklch(0.1600 0.0500 265);
--popover-foreground: oklch(0.9500 0.0050 250); --card-foreground: oklch(0.9400 0.0050 265);
--primary: oklch(0.6000 0.1400 250); --popover: oklch(0.1400 0.0450 265);
--primary-foreground: oklch(0.1000 0.0100 250); --popover-foreground: oklch(0.9400 0.0050 265);
--secondary: oklch(0.2200 0.0150 250); /* Primary: Lighter navy for dark mode */
--secondary-foreground: oklch(0.9500 0.0050 250); --primary: oklch(0.5500 0.1200 265);
--muted: oklch(0.2500 0.0120 250); --primary-foreground: oklch(0.9800 0 0);
--muted-foreground: oklch(0.6500 0.0100 250); /* Secondary: Dark gray */
--accent: oklch(0.6500 0.1400 175); --secondary: oklch(0.2200 0.0200 265);
--accent-foreground: oklch(0.1000 0.0100 175); --secondary-foreground: oklch(0.9400 0.0050 265);
/* Muted: Medium-dark gray */
--muted: oklch(0.2500 0.0150 265);
--muted-foreground: oklch(0.6000 0.0100 265);
/* Accent: Light gray */
--accent: oklch(0.6500 0.0100 265);
--accent-foreground: oklch(0.1200 0.0400 265);
--destructive: oklch(0.6500 0.2000 25); --destructive: oklch(0.6500 0.2000 25);
--destructive-foreground: oklch(1.0000 0 0); --destructive-foreground: oklch(1.0000 0 0);
--border: oklch(0.3000 0.0150 250); --border: oklch(0.2800 0.0200 265);
--input: oklch(0.2200 0.0150 250); --input: oklch(0.2200 0.0200 265);
--ring: oklch(0.6000 0.1400 250); --ring: oklch(0.5500 0.1200 265);
--chart-1: oklch(0.6000 0.1400 250); /* Chart colors: Navy-gray scale for dark mode */
--chart-2: oklch(0.6500 0.1400 175); --chart-1: oklch(0.5500 0.1200 265);
--chart-3: oklch(0.6000 0.1200 280); --chart-2: oklch(0.6500 0.0800 265);
--chart-4: oklch(0.7000 0.1200 140); --chart-3: oklch(0.7500 0.0400 265);
--chart-5: oklch(0.6500 0.1000 50); --chart-4: oklch(0.5000 0.0600 265);
--sidebar: oklch(0.1100 0.0130 250); --chart-5: oklch(0.4000 0.0400 265);
--sidebar-foreground: oklch(0.9500 0.0050 250); --sidebar: oklch(0.1000 0.0350 265);
--sidebar-primary: oklch(0.6000 0.1400 250); --sidebar-foreground: oklch(0.9400 0.0050 265);
--sidebar-primary-foreground: oklch(0.1000 0.0100 250); --sidebar-primary: oklch(0.5500 0.1200 265);
--sidebar-accent: oklch(0.6500 0.1400 175); --sidebar-primary-foreground: oklch(0.9800 0 0);
--sidebar-accent-foreground: oklch(0.1000 0.0100 175); --sidebar-accent: oklch(0.6500 0.0100 265);
--sidebar-border: oklch(0.2800 0.0120 250); --sidebar-accent-foreground: oklch(0.1200 0.0400 265);
--sidebar-ring: oklch(0.6000 0.1400 250); --sidebar-border: oklch(0.2600 0.0180 265);
--sidebar-ring: oklch(0.5500 0.1200 265);
/* Shadow variables - dark mode */ /* Shadow variables - dark mode with stronger depth */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3); --shadow: 0 2px 8px 0 rgb(0 0 0 / 0.5), 0 1px 3px -1px rgb(0 0 0 / 0.4);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-md: 0 6px 16px -2px rgb(0 0 0 / 0.6), 0 3px 6px -3px rgb(0 0 0 / 0.5);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3); --shadow-lg: 0 12px 32px -4px rgb(0 0 0 / 0.7), 0 6px 12px -6px rgb(0 0 0 / 0.6);
/* Log level colors - dark mode */ /* Log level colors - dark mode */
--color-log-error: #f87171; --color-log-error: #f87171;
--color-log-warning: #fbbf24; --color-log-warning: #fbbf24;
--color-log-info: #60a5fa; --color-log-info: #93c5fd;
--color-log-debug: #94a3b8; --color-log-debug: #9ca3af;
--color-log-success: #34d399; --color-log-success: #34d399;
/* Status colors for Kanban - dark mode */ /* Status colors for Kanban - dark mode */
--color-status-pending: oklch(0.2500 0.0150 250); --color-status-pending: oklch(0.2500 0.0200 265);
--color-status-progress: oklch(0.3000 0.0400 200); --color-status-progress: oklch(0.3500 0.0400 265);
--color-status-done: oklch(0.3500 0.0600 175); --color-status-done: oklch(0.4500 0.0600 265);
} }
/* ============================================================================ /* ============================================================================