diff --git a/frontend/src/test/sidebar.test.tsx b/frontend/src/test/sidebar.test.tsx index b8422d0..b2b919b 100644 --- a/frontend/src/test/sidebar.test.tsx +++ b/frontend/src/test/sidebar.test.tsx @@ -150,7 +150,7 @@ describe('Sidebar section summaries', () => { expect(screen.queryByText(opsChannel.name)).not.toBeInTheDocument(); expect(screen.queryByText(aliceName)).not.toBeInTheDocument(); - const search = screen.getByPlaceholderText('Search...'); + const search = screen.getByLabelText('Search conversations'); fireEvent.change(search, { target: { value: 'alice' } }); await waitFor(() => { diff --git a/frontend/src/themes.css b/frontend/src/themes.css index 1e7253c..bb728d5 100644 --- a/frontend/src/themes.css +++ b/frontend/src/themes.css @@ -696,3 +696,102 @@ [data-theme='paper-grove'] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, hsl(157 34% 46%), hsl(227 34% 52%)); } + +/* ── Monochrome ("Workbench") ─────────────────────────────── */ +:root[data-theme='monochrome'] { + --background: 0 0% 98%; + --foreground: 0 0% 8%; + --card: 0 0% 100%; + --card-foreground: 0 0% 8%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 8%; + --primary: 0 0% 10%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96%; + --secondary-foreground: 0 0% 10%; + --muted: 0 0% 97%; + --muted-foreground: 0 0% 18%; + --accent: 0 0% 94%; + --accent-foreground: 0 0% 8%; + --destructive: 0 0% 18%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 72%; + --input: 0 0% 72%; + --ring: 0 0% 10%; + --radius: 0.2rem; + --msg-outgoing: 0 0% 92%; + --msg-incoming: 0 0% 98%; + --status-connected: 0 0% 12%; + --status-disconnected: 0 0% 24%; + --warning: 0 0% 22%; + --warning-foreground: 0 0% 98%; + --success: 0 0% 12%; + --success-foreground: 0 0% 98%; + --info: 0 0% 18%; + --info-foreground: 0 0% 98%; + --region-override: 0 0% 14%; + --favorite: 0 0% 10%; + --console: 0 0% 18%; + --console-command: 0 0% 8%; + --console-bg: 0 0% 96%; + --toast-error: 0 0% 96%; + --toast-error-foreground: 0 0% 12%; + --toast-error-border: 0 0% 70%; + --code-editor-bg: 0 0% 96%; + --font-sans: 'Inter', 'Segoe UI', sans-serif; + --font-mono: 'IBM Plex Mono', 'Cascadia Mono', 'SFMono-Regular', monospace; + --scrollbar: 0 0% 18%; + --scrollbar-hover: 0 0% 8%; + --overlay: 0 0% 6%; +} + +[data-theme='monochrome'] body { + background: hsl(0 0% 98%); +} + +[data-theme='monochrome'] .bg-card, +[data-theme='monochrome'] .bg-popover { + background: hsl(0 0% 100%); +} + +[data-theme='monochrome'] .bg-msg-outgoing { + background: hsl(0 0% 92%); + border-left: 2px solid hsl(0 0% 12% / 0.9); +} + +[data-theme='monochrome'] .bg-msg-incoming { + background: hsl(0 0% 98%); + border-left: 2px solid hsl(0 0% 12% / 0.35); +} + +[data-theme='monochrome'] .bg-primary { + background: hsl(0 0% 10%); +} + +[data-theme='monochrome'] button { + border-radius: 0.2rem; + box-shadow: none; + filter: none; + transition: + background-color 0.12s ease, + color 0.12s ease, + border-color 0.12s ease; +} + +[data-theme='monochrome'] button:hover { + transform: none; + box-shadow: none; + filter: none; +} + +[data-theme='monochrome'] button:active { + transform: none; +} + +[data-theme='monochrome'] ::-webkit-scrollbar-thumb { + background: hsl(0 0% 18%); +} + +[data-theme='monochrome'] ::-webkit-scrollbar-thumb:hover { + background: hsl(0 0% 8%); +} diff --git a/frontend/src/utils/theme.ts b/frontend/src/utils/theme.ts index c5320e6..20c9a01 100644 --- a/frontend/src/utils/theme.ts +++ b/frontend/src/utils/theme.ts @@ -22,18 +22,18 @@ export const THEMES: Theme[] = [ swatches: ['#F8F7F4', '#FFFFFF', '#1B7D4E', '#EDEBE7', '#D97706', '#3B82F6'], metaThemeColor: '#F8F7F4', }, + { + id: 'paper-grove', + name: 'Paper Grove', + swatches: ['#F7F1E4', '#FFF9EE', '#2F9E74', '#E7DEC8', '#E76F51', '#5C7CFA'], + metaThemeColor: '#F7F1E4', + }, { id: 'cyberpunk', name: 'Cyberpunk', swatches: ['#07080A', '#0D1112', '#00FF41', '#141E17', '#FAFF00', '#FF2E6C'], metaThemeColor: '#07080A', }, - { - id: 'high-contrast', - name: 'High Contrast', - swatches: ['#000000', '#141414', '#3B9EFF', '#1E1E1E', '#FFB800', '#FF4757'], - metaThemeColor: '#000000', - }, { id: 'obsidian-glass', name: 'Obsidian Glass', @@ -59,10 +59,16 @@ export const THEMES: Theme[] = [ metaThemeColor: '#140F24', }, { - id: 'paper-grove', - name: 'Paper Grove', - swatches: ['#F7F1E4', '#FFF9EE', '#2F9E74', '#E7DEC8', '#E76F51', '#5C7CFA'], - metaThemeColor: '#F7F1E4', + id: 'high-contrast', + name: 'High Contrast', + swatches: ['#000000', '#141414', '#3B9EFF', '#1E1E1E', '#FFB800', '#FF4757'], + metaThemeColor: '#000000', + }, + { + id: 'monochrome', + name: 'Monochrome', + swatches: ['#FAFAFA', '#FFFFFF', '#111111', '#EAEAEA', '#8A8A8A', '#4A4A4A'], + metaThemeColor: '#FAFAFA', }, ];