Update semantic color tokens (#6253)

Co-authored-by: jacob314 <jacob314@gmail.com>

packages/cli/src/ui/components/messages/CompressionMessage.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { Box, Text } from 'ink';
 import { CompressionProps } from '../../types.js';
 import Spinner from 'ink-spinner';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 
 export interface CompressionDisplayProps {
   compression: CompressionProps;
@@ -32,13 +32,13 @@ export const CompressionMessage: React.FC<CompressionDisplayProps> = ({
         {compression.isPending ? (
           <Spinner type="dots" />
         ) : (
-          <Text color={Colors.AccentPurple}>✦</Text>
+          <Text color={theme.text.accent}>✦</Text>
         )}
       </Box>
       <Box>
         <Text
           color={
-            compression.isPending ? Colors.AccentPurple : Colors.AccentGreen
+            compression.isPending ? theme.text.accent : theme.status.success
           }
         >
           {text}

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>,

packages/cli/src/ui/components/messages/ErrorMessage.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { Text, Box } from 'ink';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 
 interface ErrorMessageProps {
   text: string;
@@ -19,10 +19,10 @@ export const ErrorMessage: React.FC<ErrorMessageProps> = ({ text }) => {
   return (
     <Box flexDirection="row" marginBottom={1}>
       <Box width={prefixWidth}>
-        <Text color={Colors.AccentRed}>{prefix}</Text>
+        <Text color={theme.status.error}>{prefix}</Text>
       </Box>
       <Box flexGrow={1}>
-        <Text wrap="wrap" color={Colors.AccentRed}>
+        <Text wrap="wrap" color={theme.status.error}>
           {text}
         </Text>
       </Box>

packages/cli/src/ui/components/messages/GeminiMessage.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import { Text, Box } from 'ink';
 import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 
 interface GeminiMessageProps {
   text: string;
@@ -28,7 +28,7 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({
   return (
     <Box flexDirection="row">
       <Box width={prefixWidth}>
-        <Text color={Colors.AccentPurple}>{prefix}</Text>
+        <Text color={theme.text.accent}>{prefix}</Text>
       </Box>
       <Box flexGrow={1} flexDirection="column">
         <MarkdownDisplay

packages/cli/src/ui/components/messages/InfoMessage.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { Text, Box } from 'ink';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 
 interface InfoMessageProps {
   text: string;
@@ -19,10 +19,10 @@ export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => {
   return (
     <Box flexDirection="row" marginTop={1}>
       <Box width={prefixWidth}>
-        <Text color={Colors.AccentYellow}>{prefix}</Text>
+        <Text color={theme.status.warning}>{prefix}</Text>
       </Box>
       <Box flexGrow={1}>
-        <Text wrap="wrap" color={Colors.AccentYellow}>
+        <Text wrap="wrap" color={theme.status.warning}>
           {text}
         </Text>
       </Box>

packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import { Box, Text } from 'ink';
 import { DiffRenderer } from './DiffRenderer.js';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 import {
   ToolCallConfirmationDetails,
   ToolConfirmationOutcome,
@@ -112,13 +112,13 @@ export const ToolConfirmationMessage: React.FC<
         <Box
           minWidth="90%"
           borderStyle="round"
-          borderColor={Colors.Gray}
+          borderColor={theme.border.default}
           justifyContent="space-around"
           padding={1}
           overflow="hidden"
         >
-          <Text>Modify in progress: </Text>
-          <Text color={Colors.AccentGreen}>
+          <Text color={theme.text.primary}>Modify in progress: </Text>
+          <Text color={theme.status.success}>
             Save and close external editor to continue
           </Text>
         </Box>
@@ -192,7 +192,7 @@ export const ToolConfirmationMessage: React.FC<
             maxWidth={Math.max(childWidth - 4, 1)}
           >
             <Box>
-              <Text color={Colors.AccentCyan}>{executionProps.command}</Text>
+              <Text color={theme.text.accent}>{executionProps.command}</Text>
             </Box>
           </MaxSizedBox>
         </Box>
@@ -222,12 +222,15 @@ export const ToolConfirmationMessage: React.FC<
 
     bodyContent = (
       <Box flexDirection="column" paddingX={1} marginLeft={1}>
-        <Text color={Colors.AccentCyan}>{infoProps.prompt}</Text>
+        <Text color={theme.text.accent}>{infoProps.prompt}</Text>
         {displayUrls && infoProps.urls && infoProps.urls.length > 0 && (
           <Box flexDirection="column" marginTop={1}>
-            <Text>URLs to fetch:</Text>
+            <Text color={theme.text.primary}>URLs to fetch:</Text>
             {infoProps.urls.map((url) => (
-              <Text key={url}> - {url}</Text>
+              <Text key={url} color={theme.text.primary}>
+                {' '}
+                - {url}
+              </Text>
             ))}
           </Box>
         )}
@@ -239,8 +242,8 @@ export const ToolConfirmationMessage: React.FC<
 
     bodyContent = (
       <Box flexDirection="column" paddingX={1} marginLeft={1}>
-        <Text color={Colors.AccentCyan}>MCP Server: {mcpProps.serverName}</Text>
-        <Text color={Colors.AccentCyan}>Tool: {mcpProps.toolName}</Text>
+        <Text color={theme.text.accent}>MCP Server: {mcpProps.serverName}</Text>
+        <Text color={theme.text.accent}>Tool: {mcpProps.toolName}</Text>
       </Box>
     );
 
@@ -275,7 +278,9 @@ export const ToolConfirmationMessage: React.FC<
 
       {/* Confirmation Question */}
       <Box marginBottom={1} flexShrink={0}>
-        <Text wrap="truncate">{question}</Text>
+        <Text wrap="truncate" color={theme.text.primary}>
+          {question}
+        </Text>
       </Box>
 
       {/* Select Input for Options */}

packages/cli/src/ui/components/messages/ToolGroupMessage.tsx

@@ -9,7 +9,7 @@ import { Box } from 'ink';
 import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js';
 import { ToolMessage } from './ToolMessage.js';
 import { ToolConfirmationMessage } from './ToolConfirmationMessage.js';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 import { Config } from '@google/gemini-cli-core';
 import { SHELL_COMMAND_NAME } from '../../constants.js';
 
@@ -35,7 +35,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
   );
   const isShellCommand = toolCalls.some((t) => t.name === SHELL_COMMAND_NAME);
   const borderColor =
-    hasPending || isShellCommand ? Colors.AccentYellow : Colors.Gray;
+    hasPending || isShellCommand ? theme.status.warning : theme.border.default;
 
   const staticHeight = /* border */ 2 + /* marginBottom */ 1;
   // This is a bit of a magic number, but it accounts for the border and

packages/cli/src/ui/components/messages/ToolMessage.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { Box, Text } from 'ink';
 import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js';
 import { DiffRenderer } from './DiffRenderer.js';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
 import { GeminiRespondingSpinner } from '../GeminiRespondingSpinner.js';
 import { MaxSizedBox } from '../shared/MaxSizedBox.js';
@@ -90,7 +90,9 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
             {typeof resultDisplay === 'string' && !renderOutputAsMarkdown && (
               <MaxSizedBox maxHeight={availableHeight} maxWidth={childWidth}>
                 <Box>
-                  <Text wrap="wrap">{resultDisplay}</Text>
+                  <Text wrap="wrap" color={theme.text.primary}>
+                    {resultDisplay}
+                  </Text>
                 </Box>
               </MaxSizedBox>
             )}
@@ -118,7 +120,7 @@ const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({
 }) => (
   <Box minWidth={STATUS_INDICATOR_WIDTH}>
     {status === ToolCallStatus.Pending && (
-      <Text color={Colors.AccentGreen}>o</Text>
+      <Text color={theme.status.success}>o</Text>
     )}
     {status === ToolCallStatus.Executing && (
       <GeminiRespondingSpinner
@@ -127,18 +129,18 @@ const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({
       />
     )}
     {status === ToolCallStatus.Success && (
-      <Text color={Colors.AccentGreen}>✔</Text>
+      <Text color={theme.status.success}>✔</Text>
     )}
     {status === ToolCallStatus.Confirming && (
-      <Text color={Colors.AccentYellow}>?</Text>
+      <Text color={theme.status.warning}>?</Text>
     )}
     {status === ToolCallStatus.Canceled && (
-      <Text color={Colors.AccentYellow} bold>
+      <Text color={theme.status.warning} bold>
         -
       </Text>
     )}
     {status === ToolCallStatus.Error && (
-      <Text color={Colors.AccentRed} bold>
+      <Text color={theme.status.error} bold>
         x
       </Text>
     )}
@@ -160,11 +162,11 @@ const ToolInfo: React.FC<ToolInfo> = ({
   const nameColor = React.useMemo<string>(() => {
     switch (emphasis) {
       case 'high':
-        return Colors.Foreground;
+        return theme.text.primary;
       case 'medium':
-        return Colors.Foreground;
+        return theme.text.primary;
       case 'low':
-        return Colors.Gray;
+        return theme.text.secondary;
       default: {
         const exhaustiveCheck: never = emphasis;
         return exhaustiveCheck;
@@ -176,18 +178,19 @@ const ToolInfo: React.FC<ToolInfo> = ({
       <Text
         wrap="truncate-end"
         strikethrough={status === ToolCallStatus.Canceled}
+        color={theme.text.primary}
       >
         <Text color={nameColor} bold>
           {name}
         </Text>{' '}
-        <Text color={Colors.Gray}>{description}</Text>
+        <Text color={theme.text.secondary}>{description}</Text>
       </Text>
     </Box>
   );
 };
 
 const TrailingIndicator: React.FC = () => (
-  <Text color={Colors.Foreground} wrap="truncate">
+  <Text color={theme.text.primary} wrap="truncate">
     {' '}
     ←
   </Text>

packages/cli/src/ui/components/messages/UserMessage.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { Text, Box } from 'ink';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 
 interface UserMessageProps {
   text: string;
@@ -17,8 +17,8 @@ export const UserMessage: React.FC<UserMessageProps> = ({ text }) => {
   const prefixWidth = prefix.length;
   const isSlashCommand = text.startsWith('/');
 
-  const textColor = isSlashCommand ? Colors.AccentPurple : Colors.Gray;
-  const borderColor = isSlashCommand ? Colors.AccentPurple : Colors.Gray;
+  const textColor = isSlashCommand ? theme.text.accent : theme.text.secondary;
+  const borderColor = isSlashCommand ? theme.text.accent : theme.border.default;
 
   return (
     <Box

packages/cli/src/ui/components/messages/UserShellMessage.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 
 interface UserShellMessageProps {
   text: string;
@@ -18,8 +18,8 @@ export const UserShellMessage: React.FC<UserShellMessageProps> = ({ text }) => {
 
   return (
     <Box>
-      <Text color={Colors.AccentCyan}>$ </Text>
-      <Text>{commandToDisplay}</Text>
+      <Text color={theme.text.accent}>$ </Text>
+      <Text color={theme.text.primary}>{commandToDisplay}</Text>
     </Box>
   );
 };