From 3c0af3654ac5491e79c6f9b55de5debf0e1e13c1 Mon Sep 17 00:00:00 2001
From: Miguel Solorio <miguelsolorio@google.com>
Date: Fri, 15 Aug 2025 15:39:54 -0700
Subject: Update semantic color tokens (#6253)

Co-authored-by: jacob314 <jacob314@gmail.com>
---
 .../src/ui/components/messages/DiffRenderer.tsx    | 47 ++++++++++++++--------
 1 file changed, 31 insertions(+), 16 deletions(-)

(limited to 'packages/cli/src/ui/components/messages/DiffRenderer.tsx')

diff --git a/packages/cli/src/ui/components/messages/DiffRenderer.tsx b/packages/cli/src/ui/components/messages/DiffRenderer.tsx
index fda5f1d4..edea9939 100644
--- a/packages/cli/src/ui/components/messages/DiffRenderer.tsx
+++ b/packages/cli/src/ui/components/messages/DiffRenderer.tsx
@@ -6,11 +6,9 @@
 
 import React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../../colors.js';
 import crypto from 'crypto';
 import { colorizeCode, colorizeLine } from '../../utils/CodeColorizer.js';
 import { MaxSizedBox } from '../shared/MaxSizedBox.js';
-import { theme } from '../../semantic-colors.js';
 
 interface DiffLine {
   type: 'add' | 'del' | 'context' | 'hunk' | 'other';
@@ -108,14 +106,20 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
   theme,
 }) => {
   if (!diffContent || typeof diffContent !== 'string') {
-    return <Text color={Colors.AccentYellow}>No diff content.</Text>;
+    return (
+      <Text color={theme?.semanticColors.status.warning}>No diff content.</Text>
+    );
   }
 
   const parsedLines = parseDiffWithLineNumbers(diffContent);
 
   if (parsedLines.length === 0) {
     return (
-      <Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
+      <Box
+        borderStyle="round"
+        borderColor={theme?.semanticColors.border.default}
+        padding={1}
+      >
         <Text dimColor>No changes detected.</Text>
       </Box>
     );
@@ -158,6 +162,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
       tabWidth,
       availableTerminalHeight,
       terminalWidth,
+      theme,
     );
   }
 
@@ -170,6 +175,7 @@ const renderDiffContent = (
   tabWidth = DEFAULT_TAB_WIDTH,
   availableTerminalHeight: number | undefined,
   terminalWidth: number,
+  theme: import('../../themes/theme.js').Theme | undefined,
 ) => {
   // 1. Normalize whitespace (replace tabs with spaces) *before* further processing
   const normalizedLines = parsedLines.map((line) => ({
@@ -184,7 +190,11 @@ const renderDiffContent = (
 
   if (displayableLines.length === 0) {
     return (
-      <Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
+      <Box
+        borderStyle="round"
+        borderColor={theme?.semanticColors.border.default}
+        padding={1}
+      >
         <Text dimColor>No changes detected.</Text>
       </Box>
     );
@@ -248,7 +258,10 @@ const renderDiffContent = (
         ) {
           acc.push(
             <Box key={`gap-${index}`}>
-              <Text wrap="truncate" color={Colors.Gray}>
+              <Text
+                wrap="truncate"
+                color={theme?.semanticColors.border.default}
+              >
                 {'═'.repeat(terminalWidth)}
               </Text>
             </Box>,
@@ -289,12 +302,12 @@ const renderDiffContent = (
         acc.push(
           <Box key={lineKey} flexDirection="row">
             <Text
-              color={theme.text.secondary}
+              color={theme?.semanticColors.text.secondary}
               backgroundColor={
                 line.type === 'add'
-                  ? theme.background.diff.added
+                  ? theme?.semanticColors.background.diff.added
                   : line.type === 'del'
-                    ? theme.background.diff.removed
+                    ? theme?.semanticColors.background.diff.removed
                     : undefined
               }
             >
@@ -302,30 +315,32 @@ const renderDiffContent = (
             </Text>
             {line.type === 'context' ? (
               <>
-                <Text>{prefixSymbol} </Text>
+                <Text color={theme?.semanticColors.text.primary}>
+                  {prefixSymbol}{' '}
+                </Text>
                 <Text wrap="wrap">
-                  {colorizeLine(displayContent, language)}
+                  {colorizeLine(displayContent, language, theme)}
                 </Text>
               </>
             ) : (
               <Text
                 backgroundColor={
                   line.type === 'add'
-                    ? theme.background.diff.added
-                    : theme.background.diff.removed
+                    ? theme?.semanticColors.background.diff.added
+                    : theme?.semanticColors.background.diff.removed
                 }
                 wrap="wrap"
               >
                 <Text
                   color={
                     line.type === 'add'
-                      ? theme.status.success
-                      : theme.status.error
+                      ? theme?.semanticColors.status.success
+                      : theme?.semanticColors.status.error
                   }
                 >
                   {prefixSymbol}
                 </Text>{' '}
-                {colorizeLine(displayContent, language)}
+                {colorizeLine(displayContent, language, theme)}
               </Text>
             )}
           </Box>,
-- 
cgit v1.2.3