From b2bfc4cb3b1fd9282b9720bc0e46058f19b3dced Mon Sep 17 00:00:00 2001 From: nogataka Date: Wed, 28 Jan 2026 14:50:34 +0900 Subject: [PATCH 1/3] feat: Add Business theme with professional navy and gray palette Add a new "Business" theme designed for corporate/professional use cases. The theme features a sophisticated navy and gray color palette that conveys trust and professionalism while maintaining excellent readability. Key characteristics: - Deep navy primary color for trust and professionalism - Off-white/charcoal backgrounds (avoiding harsh pure white/black) - Teal accent for CTAs and highlights - Soft, professional shadows - System fonts for native feel - High contrast ratios (WCAG AA compliant) Files changed: - globals.css: Added .theme-business light and dark mode variables - useTheme.ts: Added 'business' to ThemeId and THEMES array - ThemeSelector.tsx: Added business theme class handling --- ui/src/components/ThemeSelector.tsx | 8 +- ui/src/hooks/useTheme.ts | 14 +++- ui/src/styles/globals.css | 117 ++++++++++++++++++++++++++++ 3 files changed, 134 insertions(+), 5 deletions(-) diff --git a/ui/src/components/ThemeSelector.tsx b/ui/src/components/ThemeSelector.tsx index 3ecff1a..d201377 100644 --- a/ui/src/components/ThemeSelector.tsx +++ b/ui/src/components/ThemeSelector.tsx @@ -32,7 +32,7 @@ export function ThemeSelector({ themes, currentTheme, onThemeChange }: ThemeSele useEffect(() => { if (previewTheme) { const root = document.documentElement - root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora') + root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora', 'theme-business') if (previewTheme === 'claude') { root.classList.add('theme-claude') } else if (previewTheme === 'neo-brutalism') { @@ -41,6 +41,8 @@ export function ThemeSelector({ themes, currentTheme, onThemeChange }: ThemeSele root.classList.add('theme-retro-arcade') } else if (previewTheme === 'aurora') { root.classList.add('theme-aurora') + } else if (previewTheme === 'business') { + root.classList.add('theme-business') } } @@ -48,7 +50,7 @@ export function ThemeSelector({ themes, currentTheme, onThemeChange }: ThemeSele return () => { if (previewTheme) { const root = document.documentElement - root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora') + root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora', 'theme-business') if (currentTheme === 'claude') { root.classList.add('theme-claude') } else if (currentTheme === 'neo-brutalism') { @@ -57,6 +59,8 @@ export function ThemeSelector({ themes, currentTheme, onThemeChange }: ThemeSele root.classList.add('theme-retro-arcade') } else if (currentTheme === 'aurora') { root.classList.add('theme-aurora') + } else if (currentTheme === 'business') { + root.classList.add('theme-business') } } } diff --git a/ui/src/hooks/useTheme.ts b/ui/src/hooks/useTheme.ts index 57e5936..1c1b43c 100644 --- a/ui/src/hooks/useTheme.ts +++ b/ui/src/hooks/useTheme.ts @@ -1,6 +1,6 @@ import { useState, useEffect, useCallback } from 'react' -export type ThemeId = 'twitter' | 'claude' | 'neo-brutalism' | 'retro-arcade' | 'aurora' +export type ThemeId = 'twitter' | 'claude' | 'neo-brutalism' | 'retro-arcade' | 'aurora' | 'business' export interface ThemeOption { id: ThemeId @@ -43,6 +43,12 @@ export const THEMES: ThemeOption[] = [ name: 'Aurora', description: 'Deep violet and teal, like northern lights', previewColors: { primary: '#8b5cf6', background: '#faf8ff', accent: '#2dd4bf' } + }, + { + id: 'business', + name: 'Business', + description: 'Professional navy and gray palette', + previewColors: { primary: '#1e3a5f', background: '#f8fafc', accent: '#0d9488' } } ] @@ -61,6 +67,8 @@ function getThemeClass(themeId: ThemeId): string { return 'theme-retro-arcade' case 'aurora': return 'theme-aurora' + case 'business': + return 'theme-business' default: return '' } @@ -70,7 +78,7 @@ export function useTheme() { const [theme, setThemeState] = useState(() => { try { const stored = localStorage.getItem(THEME_STORAGE_KEY) - if (stored === 'twitter' || stored === 'claude' || stored === 'neo-brutalism' || stored === 'retro-arcade' || stored === 'aurora') { + if (stored === 'twitter' || stored === 'claude' || stored === 'neo-brutalism' || stored === 'retro-arcade' || stored === 'aurora' || stored === 'business') { return stored } } catch { @@ -92,7 +100,7 @@ export function useTheme() { const root = document.documentElement // Remove all theme classes - root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora') + root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora', 'theme-business') // Add current theme class (if not twitter/default) const themeClass = getThemeClass(theme) diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css index 233e01f..4da14ec 100644 --- a/ui/src/styles/globals.css +++ b/ui/src/styles/globals.css @@ -590,6 +590,123 @@ --color-status-done: oklch(0.4500 0.1500 285); } +/* ============================================================================ + Theme: Business + Professional navy and gray palette for corporate use + Designed for trust, readability, and minimal visual noise + ============================================================================ */ + +.theme-business { + --radius: 0.5rem; + --background: oklch(0.9850 0.0030 250); + --foreground: oklch(0.1500 0.0200 250); + --card: oklch(1.0000 0 0); + --card-foreground: oklch(0.1500 0.0200 250); + --popover: oklch(1.0000 0 0); + --popover-foreground: oklch(0.1500 0.0200 250); + --primary: oklch(0.3500 0.0800 250); + --primary-foreground: oklch(1.0000 0 0); + --secondary: oklch(0.9600 0.0050 250); + --secondary-foreground: oklch(0.1500 0.0200 250); + --muted: oklch(0.9400 0.0050 250); + --muted-foreground: oklch(0.5000 0.0150 250); + --accent: oklch(0.6000 0.1200 175); + --accent-foreground: oklch(1.0000 0 0); + --destructive: oklch(0.5800 0.2000 25); + --destructive-foreground: oklch(1.0000 0 0); + --border: oklch(0.9000 0.0050 250); + --input: oklch(0.9400 0.0050 250); + --ring: oklch(0.3500 0.0800 250); + --chart-1: oklch(0.3500 0.0800 250); + --chart-2: oklch(0.6000 0.1200 175); + --chart-3: oklch(0.5500 0.1000 280); + --chart-4: oklch(0.6500 0.1000 140); + --chart-5: oklch(0.5800 0.0800 50); + --sidebar: oklch(0.9700 0.0040 250); + --sidebar-foreground: oklch(0.1500 0.0200 250); + --sidebar-primary: oklch(0.3500 0.0800 250); + --sidebar-primary-foreground: oklch(1.0000 0 0); + --sidebar-accent: oklch(0.6000 0.1200 175); + --sidebar-accent-foreground: oklch(1.0000 0 0); + --sidebar-border: oklch(0.9000 0.0050 250); + --sidebar-ring: oklch(0.3500 0.0800 250); + + /* Shadow variables - soft, professional shadows */ + --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04); + --shadow: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04); + --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.06), 0 2px 4px -2px rgb(15 23 42 / 0.04); + --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.06), 0 4px 6px -4px rgb(15 23 42 / 0.04); + + /* Log level colors - muted professional tones */ + --color-log-error: #dc2626; + --color-log-warning: #d97706; + --color-log-info: #2563eb; + --color-log-debug: #64748b; + --color-log-success: #059669; + + /* Status colors for Kanban - subtle blue-gray */ + --color-status-pending: oklch(0.9400 0.0100 250); + --color-status-progress: oklch(0.9000 0.0300 200); + --color-status-done: oklch(0.9000 0.0400 175); + + /* Font stacks - system fonts for professional feel */ + --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, Consolas, 'Liberation Mono', monospace; +} + +.theme-business.dark { + --background: oklch(0.1300 0.0150 250); + --foreground: oklch(0.9500 0.0050 250); + --card: oklch(0.1800 0.0180 250); + --card-foreground: oklch(0.9500 0.0050 250); + --popover: oklch(0.1600 0.0160 250); + --popover-foreground: oklch(0.9500 0.0050 250); + --primary: oklch(0.6000 0.1400 250); + --primary-foreground: oklch(0.1000 0.0100 250); + --secondary: oklch(0.2200 0.0150 250); + --secondary-foreground: oklch(0.9500 0.0050 250); + --muted: oklch(0.2500 0.0120 250); + --muted-foreground: oklch(0.6500 0.0100 250); + --accent: oklch(0.6500 0.1400 175); + --accent-foreground: oklch(0.1000 0.0100 175); + --destructive: oklch(0.6500 0.2000 25); + --destructive-foreground: oklch(1.0000 0 0); + --border: oklch(0.3000 0.0150 250); + --input: oklch(0.2200 0.0150 250); + --ring: oklch(0.6000 0.1400 250); + --chart-1: oklch(0.6000 0.1400 250); + --chart-2: oklch(0.6500 0.1400 175); + --chart-3: oklch(0.6000 0.1200 280); + --chart-4: oklch(0.7000 0.1200 140); + --chart-5: oklch(0.6500 0.1000 50); + --sidebar: oklch(0.1100 0.0130 250); + --sidebar-foreground: oklch(0.9500 0.0050 250); + --sidebar-primary: oklch(0.6000 0.1400 250); + --sidebar-primary-foreground: oklch(0.1000 0.0100 250); + --sidebar-accent: oklch(0.6500 0.1400 175); + --sidebar-accent-foreground: oklch(0.1000 0.0100 175); + --sidebar-border: oklch(0.2800 0.0120 250); + --sidebar-ring: oklch(0.6000 0.1400 250); + + /* Shadow variables - dark mode */ + --shadow-sm: 0 1px 2px 0 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-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); + + /* Log level colors - dark mode */ + --color-log-error: #f87171; + --color-log-warning: #fbbf24; + --color-log-info: #60a5fa; + --color-log-debug: #94a3b8; + --color-log-success: #34d399; + + /* Status colors for Kanban - dark mode */ + --color-status-pending: oklch(0.2500 0.0150 250); + --color-status-progress: oklch(0.3000 0.0400 200); + --color-status-done: oklch(0.3500 0.0600 175); +} + /* ============================================================================ ShadCN Tailwind v4 Theme Integration ============================================================================ */ From f10ad59cf5a1e77a638875b3e4a6e69db201e400 Mon Sep 17 00:00:00 2001 From: nogataka Date: Wed, 28 Jan 2026 15:09:52 +0900 Subject: [PATCH 2/3] refactor(theme): Update Business theme with deep navy and gray palette - 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 --- ui/src/hooks/useTheme.ts | 4 +- ui/src/styles/globals.css | 172 +++++++++++++++++++++----------------- 2 files changed, 96 insertions(+), 80 deletions(-) diff --git a/ui/src/hooks/useTheme.ts b/ui/src/hooks/useTheme.ts index 1c1b43c..8306c2f 100644 --- a/ui/src/hooks/useTheme.ts +++ b/ui/src/hooks/useTheme.ts @@ -47,8 +47,8 @@ export const THEMES: ThemeOption[] = [ { id: 'business', name: 'Business', - description: 'Professional navy and gray palette', - previewColors: { primary: '#1e3a5f', background: '#f8fafc', accent: '#0d9488' } + description: 'Deep navy (#000e4e) and gray monochrome', + previewColors: { primary: '#000e4e', background: '#faf8f5', accent: '#6b7280' } } ] diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css index 4da14ec..09f4380 100644 --- a/ui/src/styles/globals.css +++ b/ui/src/styles/globals.css @@ -592,62 +592,71 @@ /* ============================================================================ Theme: Business - Professional navy and gray palette for corporate use - Designed for trust, readability, and minimal visual noise + Professional deep navy (#000e4e) and gray palette for corporate use + Designed for trust, readability, and modern depth with card shadows ============================================================================ */ .theme-business { --radius: 0.5rem; - --background: oklch(0.9850 0.0030 250); - --foreground: oklch(0.1500 0.0200 250); + /* Warm off-white background */ + --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-foreground: oklch(0.1500 0.0200 250); + --card-foreground: oklch(0.1700 0.0900 265); --popover: oklch(1.0000 0 0); - --popover-foreground: oklch(0.1500 0.0200 250); - --primary: oklch(0.3500 0.0800 250); + --popover-foreground: oklch(0.1700 0.0900 265); + /* Primary: Deep navy #000e4e */ + --primary: oklch(0.1700 0.0900 265); --primary-foreground: oklch(1.0000 0 0); - --secondary: oklch(0.9600 0.0050 250); - --secondary-foreground: oklch(0.1500 0.0200 250); - --muted: oklch(0.9400 0.0050 250); - --muted-foreground: oklch(0.5000 0.0150 250); - --accent: oklch(0.6000 0.1200 175); + /* Secondary: Light gray */ + --secondary: oklch(0.9500 0.0020 265); + --secondary-foreground: oklch(0.1700 0.0900 265); + /* Muted: Soft gray */ + --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); --destructive: oklch(0.5800 0.2000 25); --destructive-foreground: oklch(1.0000 0 0); - --border: oklch(0.9000 0.0050 250); - --input: oklch(0.9400 0.0050 250); - --ring: oklch(0.3500 0.0800 250); - --chart-1: oklch(0.3500 0.0800 250); - --chart-2: oklch(0.6000 0.1200 175); - --chart-3: oklch(0.5500 0.1000 280); - --chart-4: oklch(0.6500 0.1000 140); - --chart-5: oklch(0.5800 0.0800 50); - --sidebar: oklch(0.9700 0.0040 250); - --sidebar-foreground: oklch(0.1500 0.0200 250); - --sidebar-primary: oklch(0.3500 0.0800 250); + /* Border: Subtle gray */ + --border: oklch(0.8800 0.0030 265); + --input: oklch(0.9300 0.0020 265); + --ring: oklch(0.1700 0.0900 265); + /* Chart colors: Navy-gray monochrome scale */ + --chart-1: oklch(0.1700 0.0900 265); + --chart-2: oklch(0.3500 0.0600 265); + --chart-3: oklch(0.5000 0.0400 265); + --chart-4: oklch(0.6500 0.0200 265); + --chart-5: oklch(0.8000 0.0100 265); + --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-accent: oklch(0.6000 0.1200 175); + --sidebar-accent: oklch(0.5500 0.0100 265); --sidebar-accent-foreground: oklch(1.0000 0 0); - --sidebar-border: oklch(0.9000 0.0050 250); - --sidebar-ring: oklch(0.3500 0.0800 250); + --sidebar-border: oklch(0.8800 0.0030 265); + --sidebar-ring: oklch(0.1700 0.0900 265); - /* Shadow variables - soft, professional shadows */ - --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04); - --shadow: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04); - --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.06), 0 2px 4px -2px rgb(15 23 42 / 0.04); - --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.06), 0 4px 6px -4px rgb(15 23 42 / 0.04); + /* Shadow variables - pronounced for card depth (2026 trend) */ + --shadow-sm: 0 1px 3px 0 rgb(0 14 78 / 0.06), 0 1px 2px -1px rgb(0 14 78 / 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 6px 16px -2px rgb(0 14 78 / 0.10), 0 3px 6px -3px rgb(0 14 78 / 0.08); + --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-warning: #d97706; - --color-log-info: #2563eb; - --color-log-debug: #64748b; + --color-log-info: #000e4e; + --color-log-debug: #6b7280; --color-log-success: #059669; - /* Status colors for Kanban - subtle blue-gray */ - --color-status-pending: oklch(0.9400 0.0100 250); - --color-status-progress: oklch(0.9000 0.0300 200); - --color-status-done: oklch(0.9000 0.0400 175); + /* Status colors for Kanban - gray-navy scale */ + --color-status-pending: oklch(0.9300 0.0030 265); + --color-status-progress: oklch(0.8500 0.0200 265); + --color-status-done: oklch(0.7500 0.0400 265); /* Font stacks - system fonts for professional feel */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; @@ -655,56 +664,63 @@ } .theme-business.dark { - --background: oklch(0.1300 0.0150 250); - --foreground: oklch(0.9500 0.0050 250); - --card: oklch(0.1800 0.0180 250); - --card-foreground: oklch(0.9500 0.0050 250); - --popover: oklch(0.1600 0.0160 250); - --popover-foreground: oklch(0.9500 0.0050 250); - --primary: oklch(0.6000 0.1400 250); - --primary-foreground: oklch(0.1000 0.0100 250); - --secondary: oklch(0.2200 0.0150 250); - --secondary-foreground: oklch(0.9500 0.0050 250); - --muted: oklch(0.2500 0.0120 250); - --muted-foreground: oklch(0.6500 0.0100 250); - --accent: oklch(0.6500 0.1400 175); - --accent-foreground: oklch(0.1000 0.0100 175); + /* Very dark navy background */ + --background: oklch(0.1200 0.0400 265); + --foreground: oklch(0.9400 0.0050 265); + /* Dark navy cards with elevation */ + --card: oklch(0.1600 0.0500 265); + --card-foreground: oklch(0.9400 0.0050 265); + --popover: oklch(0.1400 0.0450 265); + --popover-foreground: oklch(0.9400 0.0050 265); + /* Primary: Lighter navy for dark mode */ + --primary: oklch(0.5500 0.1200 265); + --primary-foreground: oklch(0.9800 0 0); + /* Secondary: Dark gray */ + --secondary: oklch(0.2200 0.0200 265); + --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-foreground: oklch(1.0000 0 0); - --border: oklch(0.3000 0.0150 250); - --input: oklch(0.2200 0.0150 250); - --ring: oklch(0.6000 0.1400 250); - --chart-1: oklch(0.6000 0.1400 250); - --chart-2: oklch(0.6500 0.1400 175); - --chart-3: oklch(0.6000 0.1200 280); - --chart-4: oklch(0.7000 0.1200 140); - --chart-5: oklch(0.6500 0.1000 50); - --sidebar: oklch(0.1100 0.0130 250); - --sidebar-foreground: oklch(0.9500 0.0050 250); - --sidebar-primary: oklch(0.6000 0.1400 250); - --sidebar-primary-foreground: oklch(0.1000 0.0100 250); - --sidebar-accent: oklch(0.6500 0.1400 175); - --sidebar-accent-foreground: oklch(0.1000 0.0100 175); - --sidebar-border: oklch(0.2800 0.0120 250); - --sidebar-ring: oklch(0.6000 0.1400 250); + --border: oklch(0.2800 0.0200 265); + --input: oklch(0.2200 0.0200 265); + --ring: oklch(0.5500 0.1200 265); + /* Chart colors: Navy-gray scale for dark mode */ + --chart-1: oklch(0.5500 0.1200 265); + --chart-2: oklch(0.6500 0.0800 265); + --chart-3: oklch(0.7500 0.0400 265); + --chart-4: oklch(0.5000 0.0600 265); + --chart-5: oklch(0.4000 0.0400 265); + --sidebar: oklch(0.1000 0.0350 265); + --sidebar-foreground: oklch(0.9400 0.0050 265); + --sidebar-primary: oklch(0.5500 0.1200 265); + --sidebar-primary-foreground: oklch(0.9800 0 0); + --sidebar-accent: oklch(0.6500 0.0100 265); + --sidebar-accent-foreground: oklch(0.1200 0.0400 265); + --sidebar-border: oklch(0.2600 0.0180 265); + --sidebar-ring: oklch(0.5500 0.1200 265); - /* Shadow variables - dark mode */ - --shadow-sm: 0 1px 2px 0 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-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); + /* Shadow variables - dark mode with stronger depth */ + --shadow-sm: 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 6px 16px -2px rgb(0 0 0 / 0.6), 0 3px 6px -3px rgb(0 0 0 / 0.5); + --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 */ --color-log-error: #f87171; --color-log-warning: #fbbf24; - --color-log-info: #60a5fa; - --color-log-debug: #94a3b8; + --color-log-info: #93c5fd; + --color-log-debug: #9ca3af; --color-log-success: #34d399; /* Status colors for Kanban - dark mode */ - --color-status-pending: oklch(0.2500 0.0150 250); - --color-status-progress: oklch(0.3000 0.0400 200); - --color-status-done: oklch(0.3500 0.0600 175); + --color-status-pending: oklch(0.2500 0.0200 265); + --color-status-progress: oklch(0.3500 0.0400 265); + --color-status-done: oklch(0.4500 0.0600 265); } /* ============================================================================ From 76475d1fb6ae3f1eb21f6264b8c53a8ef0f1e740 Mon Sep 17 00:00:00 2001 From: nogataka Date: Wed, 28 Jan 2026 15:12:33 +0900 Subject: [PATCH 3/3] style(theme): Change Business theme background to concrete blue-gray - Replace warm off-white with cool blue-gray concrete tone - More corporate and industrial aesthetic - Sidebar background adjusted to match Co-Authored-By: Claude Opus 4.5 --- ui/src/hooks/useTheme.ts | 2 +- ui/src/styles/globals.css | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/src/hooks/useTheme.ts b/ui/src/hooks/useTheme.ts index 8306c2f..f364a84 100644 --- a/ui/src/hooks/useTheme.ts +++ b/ui/src/hooks/useTheme.ts @@ -48,7 +48,7 @@ export const THEMES: ThemeOption[] = [ id: 'business', name: 'Business', description: 'Deep navy (#000e4e) and gray monochrome', - previewColors: { primary: '#000e4e', background: '#faf8f5', accent: '#6b7280' } + previewColors: { primary: '#000e4e', background: '#eaecef', accent: '#6b7280' } } ] diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css index 09f4380..e927b54 100644 --- a/ui/src/styles/globals.css +++ b/ui/src/styles/globals.css @@ -598,8 +598,8 @@ .theme-business { --radius: 0.5rem; - /* Warm off-white background */ - --background: oklch(0.9800 0.0040 85); + /* Concrete-like blue-gray background */ + --background: oklch(0.9500 0.0080 265); /* Deep navy foreground #000e4e */ --foreground: oklch(0.1700 0.0900 265); /* White cards with shadow depth */ @@ -631,7 +631,7 @@ --chart-3: oklch(0.5000 0.0400 265); --chart-4: oklch(0.6500 0.0200 265); --chart-5: oklch(0.8000 0.0100 265); - --sidebar: oklch(0.9600 0.0030 85); + --sidebar: oklch(0.9300 0.0100 265); --sidebar-foreground: oklch(0.1700 0.0900 265); --sidebar-primary: oklch(0.1700 0.0900 265); --sidebar-primary-foreground: oklch(1.0000 0 0);