fix: complete theme token system with WCAG-compliant color tokens

src/__tests__/renderer/components/AgentSessionsModal.test.tsx

@@ -1455,7 +1455,7 @@ describe('AgentSessionsModal', () => {
 			await waitFor(() => {
 				const messageBubble = screen.getByText('Dark mode message').closest('.rounded-lg');
 				expect(messageBubble).toHaveStyle({ backgroundColor: mockTheme.colors.accent });
-				expect(messageBubble).toHaveStyle({ color: '#000' }); // Dark mode uses black text
+				expect(messageBubble).toHaveStyle({ color: mockTheme.colors.accentForeground });
 			});
 		});
 
@@ -1488,7 +1488,7 @@ describe('AgentSessionsModal', () => {
 
 			await waitFor(() => {
 				const messageBubble = screen.getByText('Light mode message').closest('.rounded-lg');
-				expect(messageBubble).toHaveStyle({ color: '#fff' }); // Light mode uses white text
+				expect(messageBubble).toHaveStyle({ color: lightTheme.colors.accentForeground });
 			});
 		});
 	});

src/__tests__/renderer/components/AutoRunExpandedModal.test.tsx

@@ -127,6 +127,7 @@ const createMockTheme = (): Theme => ({
 		success: '#00aa00',
 		warning: '#ffaa00',
 		error: '#ff0000',
+		overlayHeavy: 'rgba(0, 0, 0, 0.8)',
 	},
 });
 
@@ -701,7 +702,7 @@ describe('AutoRunExpandedModal', () => {
 			const { container } = renderWithProvider(<AutoRunExpandedModal {...props} />);
 
 			const overlay = container.querySelector('.fixed.inset-0');
-			expect(overlay).toHaveStyle({ backgroundColor: 'rgba(0,0,0,0.7)' });
+			expect(overlay).toHaveStyle({ backgroundColor: props.theme.colors.overlayHeavy });
 		});
 
 		it('should have 90vw width and 80vh height', () => {

src/__tests__/renderer/components/CustomThemeBuilder.test.tsx

@@ -29,6 +29,23 @@ const mockThemeColors: ThemeColors = {
 	success: '#10b981',
 	warning: '#f59e0b',
 	error: '#ef4444',
+	info: '#3b82f6',
+	successForeground: '#1a1a2e',
+	warningForeground: '#1a1a2e',
+	errorForeground: '#1a1a2e',
+	successDim: 'rgba(16, 185, 129, 0.15)',
+	warningDim: 'rgba(245, 158, 11, 0.15)',
+	errorDim: 'rgba(239, 68, 68, 0.15)',
+	infoDim: 'rgba(59, 130, 246, 0.15)',
+	diffAddition: '#10b981',
+	diffAdditionBg: 'rgba(16, 185, 129, 0.15)',
+	diffDeletion: '#ef4444',
+	diffDeletionBg: 'rgba(239, 68, 68, 0.15)',
+	overlay: 'rgba(0, 0, 0, 0.6)',
+	overlayHeavy: 'rgba(0, 0, 0, 0.8)',
+	hoverBg: 'rgba(255, 255, 255, 0.06)',
+	activeBg: 'rgba(255, 255, 255, 0.15)',
+	shadow: 'rgba(0, 0, 0, 0.3)',
 };
 
 const mockTheme: Theme = {

src/__tests__/renderer/components/DocumentGraph/DocumentNode.test.tsx

@@ -31,6 +31,7 @@ const mockTheme: Theme = {
 		success: '#50fa7b',
 		warning: '#ffb86c',
 		error: '#ff5555',
+		info: '#8be9fd',
 	},
 };
 
@@ -835,7 +836,7 @@ describe('DocumentNode', () => {
 
 			const indicator = screen.getByTestId('large-file-indicator');
 			expect(indicator).toHaveStyle({
-				color: '#3b82f6',
+				color: mockTheme.colors.info,
 			});
 		});
 

src/__tests__/renderer/components/GitDiffViewer.test.tsx

@@ -138,6 +138,10 @@ const mockTheme = {
 		vibe: '#8855ff',
 		statusBar: '#0d0d1a',
 		scrollbarThumb: '#444466',
+		diffAddition: '#50fa7b',
+		diffAdditionBg: 'rgba(80, 250, 123, 0.15)',
+		diffDeletion: '#ff5555',
+		diffDeletionBg: 'rgba(255, 85, 85, 0.15)',
 	},
 };
 
@@ -830,7 +834,7 @@ describe('GitDiffViewer', () => {
 			const onClose = vi.fn();
 			mockParseGitDiff.mockReturnValue([createMockParsedFile()]);
 
-			render(
+			const { container } = render(
 				<GitDiffViewer
 					diffText="mock diff"
 					cwd="/test/project"
@@ -839,9 +843,15 @@ describe('GitDiffViewer', () => {
 				/>
 			);
 
-			// The Plus icon from lucide-react should be present with green color
-			const greenSpans = document.querySelectorAll('.text-green-500');
-			expect(greenSpans.length).toBeGreaterThan(0);
+			// The additions span uses inline style with diffAddition theme color
+			const allSpans = Array.from(container.querySelectorAll('span'));
+			const additionSpan = allSpans.find(
+				(span) =>
+					span.style.color &&
+					(span.style.color === mockTheme.colors.diffAddition ||
+						span.style.color.includes('80, 250, 123'))
+			);
+			expect(additionSpan).toBeTruthy();
 		});
 
 		it('shows deletions in tab for text files with deletions', () => {
@@ -882,7 +892,7 @@ describe('GitDiffViewer', () => {
 				}),
 			]);
 
-			render(
+			const { container } = render(
 				<GitDiffViewer
 					diffText="mock diff"
 					cwd="/test/project"
@@ -891,9 +901,15 @@ describe('GitDiffViewer', () => {
 				/>
 			);
 
-			// There should be red minus sign for deletions
-			const redSpans = document.querySelectorAll('.text-red-500');
-			expect(redSpans.length).toBeGreaterThan(0);
+			// The deletions span uses inline style with diffDeletion theme color
+			const allSpans = Array.from(container.querySelectorAll('span'));
+			const deletionSpan = allSpans.find(
+				(span) =>
+					span.style.color &&
+					(span.style.color === mockTheme.colors.diffDeletion ||
+						span.style.color.includes('255, 85, 85'))
+			);
+			expect(deletionSpan).toBeTruthy();
 		});
 
 		it('shows additions and deletions in footer', () => {

src/__tests__/renderer/components/HistoryHelpModal.test.tsx

@@ -474,10 +474,10 @@ describe('HistoryHelpModal', () => {
 				'font-medium',
 				'transition-colors'
 			);
-			// Check for accent background - the exact RGB value
+			// Check for accent background and theme-based foreground color
 			const style = gotItButton.getAttribute('style');
 			expect(style).toContain('background-color');
-			expect(style).toContain('color: white');
+			expect(style).toContain('color');
 		});
 
 		it('calls onClose when "Got it" button is clicked', () => {

src/__tests__/renderer/components/LogViewer.test.tsx

@@ -34,6 +34,7 @@ const mockTheme: Theme = {
 		error: '#ff5555',
 		warning: '#ffb86c',
 		success: '#50fa7b',
+		info: '#8be9fd',
 		syntaxComment: '#6272a4',
 		syntaxKeyword: '#ff79c6',
 	},
@@ -936,7 +937,7 @@ describe('LogViewer', () => {
 
 			await waitFor(() => {
 				const levelPill = screen.getByText('info');
-				expect(levelPill).toHaveStyle({ color: '#3b82f6' });
+				expect(levelPill).toHaveStyle({ color: mockTheme.colors.info });
 			});
 		});
 
@@ -947,7 +948,7 @@ describe('LogViewer', () => {
 
 			await waitFor(() => {
 				const levelPill = screen.getByText('warn');
-				expect(levelPill).toHaveStyle({ color: '#f59e0b' });
+				expect(levelPill).toHaveStyle({ color: mockTheme.colors.warning });
 			});
 		});
 
@@ -958,7 +959,7 @@ describe('LogViewer', () => {
 
 			await waitFor(() => {
 				const levelPill = screen.getByText('error');
-				expect(levelPill).toHaveStyle({ color: '#ef4444' });
+				expect(levelPill).toHaveStyle({ color: mockTheme.colors.error });
 			});
 		});
 

src/__tests__/renderer/components/PromptComposerModal.test.tsx

@@ -50,6 +50,7 @@ const mockTheme: Theme = {
 		headerBg: '#202020',
 		scrollbarTrack: '#1a1a1a',
 		scrollbarThumb: '#444444',
+		overlayHeavy: 'rgba(0, 0, 0, 0.8)',
 	},
 };
 
@@ -1003,7 +1004,7 @@ describe('PromptComposerModal', () => {
 			);
 
 			const overlay = container.querySelector('.fixed.inset-0');
-			expect(overlay).toHaveStyle({ backgroundColor: 'rgba(0,0,0,0.7)' });
+			expect(overlay).toHaveStyle({ backgroundColor: mockTheme.colors.overlayHeavy });
 		});
 
 		it('should have modal content with rounded corners and border', () => {

src/__tests__/renderer/components/TabBar.test.tsx

@@ -131,6 +131,7 @@ const mockTheme: Theme = {
 		warning: '#ffaa00',
 		vibe: '#ff00ff',
 		agentStatus: '#00ff00',
+		hoverBg: 'rgba(255, 255, 255, 0.06)',
 	},
 };
 
@@ -1688,11 +1689,11 @@ describe('TabBar', () => {
 
 			// Before hover - check inline style is not hover state
 			const initialBgColor = inactiveTab.style.backgroundColor;
-			expect(initialBgColor).not.toBe('rgba(255, 255, 255, 0.08)');
+			expect(initialBgColor).not.toBe(mockTheme.colors.hoverBg);
 
 			// Hover
 			fireEvent.mouseEnter(inactiveTab);
-			expect(inactiveTab.style.backgroundColor).toBe('rgba(255, 255, 255, 0.08)');
+			expect(inactiveTab.style.backgroundColor).toBe(mockTheme.colors.hoverBg);
 
 			// Leave
 			fireEvent.mouseLeave(inactiveTab);
@@ -1703,7 +1704,7 @@ describe('TabBar', () => {
 			});
 
 			// Background color should no longer be hover state
-			expect(inactiveTab.style.backgroundColor).not.toBe('rgba(255, 255, 255, 0.08)');
+			expect(inactiveTab.style.backgroundColor).not.toBe(mockTheme.colors.hoverBg);
 		});
 
 		it('does not set title attribute on tabs (removed for cleaner UX)', () => {