From 6c1373c33212e26521701acf73c0398721b3a881 Mon Sep 17 00:00:00 2001
From: Jacob Richman <jacob314@gmail.com>
Date: Fri, 15 Aug 2025 20:18:31 -0700
Subject: Revert "Update semantic color tokens" (#6365)

---
 .../ui/components/messages/CompressionMessage.tsx  |  6 +--
 .../src/ui/components/messages/DiffRenderer.tsx    | 47 ++++++++--------------
 .../src/ui/components/messages/ErrorMessage.tsx    |  6 +--
 .../src/ui/components/messages/GeminiMessage.tsx   |  4 +-
 .../cli/src/ui/components/messages/InfoMessage.tsx |  6 +--
 .../messages/ToolConfirmationMessage.tsx           | 27 +++++--------
 .../ui/components/messages/ToolGroupMessage.tsx    |  4 +-
 .../cli/src/ui/components/messages/ToolMessage.tsx | 27 ++++++-------
 .../cli/src/ui/components/messages/UserMessage.tsx |  6 +--
 .../ui/components/messages/UserShellMessage.tsx    |  6 +--
 10 files changed, 58 insertions(+), 81 deletions(-)

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

diff --git a/packages/cli/src/ui/components/messages/CompressionMessage.tsx b/packages/cli/src/ui/components/messages/CompressionMessage.tsx
index 8f46a361..c7ef122b 100644
--- a/packages/cli/src/ui/components/messages/CompressionMessage.tsx
+++ b/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 { theme } from '../../semantic-colors.js';
+import { Colors } from '../../colors.js';
 
 export interface CompressionDisplayProps {
   compression: CompressionProps;
@@ -32,13 +32,13 @@ export const CompressionMessage: React.FC<CompressionDisplayProps> = ({
         {compression.isPending ? (
           <Spinner type="dots" />
         ) : (
-          <Text color={theme.text.accent}>✦</Text>
+          <Text color={Colors.AccentPurple}>✦</Text>
         )}
       </Box>
       <Box>
         <Text
           color={
-            compression.isPending ? theme.text.accent : theme.status.success
+            compression.isPending ? Colors.AccentPurple : Colors.AccentGreen
           }
         >
           {text}
diff --git a/packages/cli/src/ui/components/messages/DiffRenderer.tsx b/packages/cli/src/ui/components/messages/DiffRenderer.tsx
index edea9939..fda5f1d4 100644
--- a/packages/cli/src/ui/components/messages/DiffRenderer.tsx
+++ b/packages/cli/src/ui/components/messages/DiffRenderer.tsx
@@ -6,9 +6,11 @@
 
 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';
@@ -106,20 +108,14 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
   theme,
 }) => {
   if (!diffContent || typeof diffContent !== 'string') {
-    return (
-      <Text color={theme?.semanticColors.status.warning}>No diff content.</Text>
-    );
+    return <Text color={Colors.AccentYellow}>No diff content.</Text>;
   }
 
   const parsedLines = parseDiffWithLineNumbers(diffContent);
 
   if (parsedLines.length === 0) {
     return (
-      <Box
-        borderStyle="round"
-        borderColor={theme?.semanticColors.border.default}
-        padding={1}
-      >
+      <Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
         <Text dimColor>No changes detected.</Text>
       </Box>
     );
@@ -162,7 +158,6 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
       tabWidth,
       availableTerminalHeight,
       terminalWidth,
-      theme,
     );
   }
 
@@ -175,7 +170,6 @@ 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) => ({
@@ -190,11 +184,7 @@ const renderDiffContent = (
 
   if (displayableLines.length === 0) {
     return (
-      <Box
-        borderStyle="round"
-        borderColor={theme?.semanticColors.border.default}
-        padding={1}
-      >
+      <Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
         <Text dimColor>No changes detected.</Text>
       </Box>
     );
@@ -258,10 +248,7 @@ const renderDiffContent = (
         ) {
           acc.push(
             <Box key={`gap-${index}`}>
-              <Text
-                wrap="truncate"
-                color={theme?.semanticColors.border.default}
-              >
+              <Text wrap="truncate" color={Colors.Gray}>
                 {'═'.repeat(terminalWidth)}
               </Text>
             </Box>,
@@ -302,12 +289,12 @@ const renderDiffContent = (
         acc.push(
           <Box key={lineKey} flexDirection="row">
             <Text
-              color={theme?.semanticColors.text.secondary}
+              color={theme.text.secondary}
               backgroundColor={
                 line.type === 'add'
-                  ? theme?.semanticColors.background.diff.added
+                  ? theme.background.diff.added
                   : line.type === 'del'
-                    ? theme?.semanticColors.background.diff.removed
+                    ? theme.background.diff.removed
                     : undefined
               }
             >
@@ -315,32 +302,30 @@ const renderDiffContent = (
             </Text>
             {line.type === 'context' ? (
               <>
-                <Text color={theme?.semanticColors.text.primary}>
-                  {prefixSymbol}{' '}
-                </Text>
+                <Text>{prefixSymbol} </Text>
                 <Text wrap="wrap">
-                  {colorizeLine(displayContent, language, theme)}
+                  {colorizeLine(displayContent, language)}
                 </Text>
               </>
             ) : (
               <Text
                 backgroundColor={
                   line.type === 'add'
-                    ? theme?.semanticColors.background.diff.added
-                    : theme?.semanticColors.background.diff.removed
+                    ? theme.background.diff.added
+                    : theme.background.diff.removed
                 }
                 wrap="wrap"
               >
                 <Text
                   color={
                     line.type === 'add'
-                      ? theme?.semanticColors.status.success
-                      : theme?.semanticColors.status.error
+                      ? theme.status.success
+                      : theme.status.error
                   }
                 >
                   {prefixSymbol}
                 </Text>{' '}
-                {colorizeLine(displayContent, language, theme)}
+                {colorizeLine(displayContent, language)}
               </Text>
             )}
           </Box>,
diff --git a/packages/cli/src/ui/components/messages/ErrorMessage.tsx b/packages/cli/src/ui/components/messages/ErrorMessage.tsx
index bc249acf..edbea435 100644
--- a/packages/cli/src/ui/components/messages/ErrorMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ErrorMessage.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { Text, Box } from 'ink';
-import { theme } from '../../semantic-colors.js';
+import { Colors } from '../../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={theme.status.error}>{prefix}</Text>
+        <Text color={Colors.AccentRed}>{prefix}</Text>
       </Box>
       <Box flexGrow={1}>
-        <Text wrap="wrap" color={theme.status.error}>
+        <Text wrap="wrap" color={Colors.AccentRed}>
           {text}
         </Text>
       </Box>
diff --git a/packages/cli/src/ui/components/messages/GeminiMessage.tsx b/packages/cli/src/ui/components/messages/GeminiMessage.tsx
index 21c2f77d..9863acd6 100644
--- a/packages/cli/src/ui/components/messages/GeminiMessage.tsx
+++ b/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 { theme } from '../../semantic-colors.js';
+import { Colors } from '../../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={theme.text.accent}>{prefix}</Text>
+        <Text color={Colors.AccentPurple}>{prefix}</Text>
       </Box>
       <Box flexGrow={1} flexDirection="column">
         <MarkdownDisplay
diff --git a/packages/cli/src/ui/components/messages/InfoMessage.tsx b/packages/cli/src/ui/components/messages/InfoMessage.tsx
index 5b69216d..c9129999 100644
--- a/packages/cli/src/ui/components/messages/InfoMessage.tsx
+++ b/packages/cli/src/ui/components/messages/InfoMessage.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { Text, Box } from 'ink';
-import { theme } from '../../semantic-colors.js';
+import { Colors } from '../../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={theme.status.warning}>{prefix}</Text>
+        <Text color={Colors.AccentYellow}>{prefix}</Text>
       </Box>
       <Box flexGrow={1}>
-        <Text wrap="wrap" color={theme.status.warning}>
+        <Text wrap="wrap" color={Colors.AccentYellow}>
           {text}
         </Text>
       </Box>
diff --git a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
index 599b5445..2f93609e 100644
--- a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
+++ b/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 { theme } from '../../semantic-colors.js';
+import { Colors } from '../../colors.js';
 import {
   ToolCallConfirmationDetails,
   ToolConfirmationOutcome,
@@ -112,13 +112,13 @@ export const ToolConfirmationMessage: React.FC<
         <Box
           minWidth="90%"
           borderStyle="round"
-          borderColor={theme.border.default}
+          borderColor={Colors.Gray}
           justifyContent="space-around"
           padding={1}
           overflow="hidden"
         >
-          <Text color={theme.text.primary}>Modify in progress: </Text>
-          <Text color={theme.status.success}>
+          <Text>Modify in progress: </Text>
+          <Text color={Colors.AccentGreen}>
             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={theme.text.accent}>{executionProps.command}</Text>
+              <Text color={Colors.AccentCyan}>{executionProps.command}</Text>
             </Box>
           </MaxSizedBox>
         </Box>
@@ -222,15 +222,12 @@ export const ToolConfirmationMessage: React.FC<
 
     bodyContent = (
       <Box flexDirection="column" paddingX={1} marginLeft={1}>
-        <Text color={theme.text.accent}>{infoProps.prompt}</Text>
+        <Text color={Colors.AccentCyan}>{infoProps.prompt}</Text>
         {displayUrls && infoProps.urls && infoProps.urls.length > 0 && (
           <Box flexDirection="column" marginTop={1}>
-            <Text color={theme.text.primary}>URLs to fetch:</Text>
+            <Text>URLs to fetch:</Text>
             {infoProps.urls.map((url) => (
-              <Text key={url} color={theme.text.primary}>
-                {' '}
-                - {url}
-              </Text>
+              <Text key={url}> - {url}</Text>
             ))}
           </Box>
         )}
@@ -242,8 +239,8 @@ export const ToolConfirmationMessage: React.FC<
 
     bodyContent = (
       <Box flexDirection="column" paddingX={1} marginLeft={1}>
-        <Text color={theme.text.accent}>MCP Server: {mcpProps.serverName}</Text>
-        <Text color={theme.text.accent}>Tool: {mcpProps.toolName}</Text>
+        <Text color={Colors.AccentCyan}>MCP Server: {mcpProps.serverName}</Text>
+        <Text color={Colors.AccentCyan}>Tool: {mcpProps.toolName}</Text>
       </Box>
     );
 
@@ -278,9 +275,7 @@ export const ToolConfirmationMessage: React.FC<
 
       {/* Confirmation Question */}
       <Box marginBottom={1} flexShrink={0}>
-        <Text wrap="truncate" color={theme.text.primary}>
-          {question}
-        </Text>
+        <Text wrap="truncate">{question}</Text>
       </Box>
 
       {/* Select Input for Options */}
diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
index 3e7a317c..e2df3d9c 100644
--- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
+++ b/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 { theme } from '../../semantic-colors.js';
+import { Colors } from '../../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 ? theme.status.warning : theme.border.default;
+    hasPending || isShellCommand ? Colors.AccentYellow : Colors.Gray;
 
   const staticHeight = /* border */ 2 + /* marginBottom */ 1;
   // This is a bit of a magic number, but it accounts for the border and
diff --git a/packages/cli/src/ui/components/messages/ToolMessage.tsx b/packages/cli/src/ui/components/messages/ToolMessage.tsx
index bf82c400..e1eb75b8 100644
--- a/packages/cli/src/ui/components/messages/ToolMessage.tsx
+++ b/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 { theme } from '../../semantic-colors.js';
+import { Colors } from '../../colors.js';
 import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
 import { GeminiRespondingSpinner } from '../GeminiRespondingSpinner.js';
 import { MaxSizedBox } from '../shared/MaxSizedBox.js';
@@ -90,9 +90,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
             {typeof resultDisplay === 'string' && !renderOutputAsMarkdown && (
               <MaxSizedBox maxHeight={availableHeight} maxWidth={childWidth}>
                 <Box>
-                  <Text wrap="wrap" color={theme.text.primary}>
-                    {resultDisplay}
-                  </Text>
+                  <Text wrap="wrap">{resultDisplay}</Text>
                 </Box>
               </MaxSizedBox>
             )}
@@ -120,7 +118,7 @@ const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({
 }) => (
   <Box minWidth={STATUS_INDICATOR_WIDTH}>
     {status === ToolCallStatus.Pending && (
-      <Text color={theme.status.success}>o</Text>
+      <Text color={Colors.AccentGreen}>o</Text>
     )}
     {status === ToolCallStatus.Executing && (
       <GeminiRespondingSpinner
@@ -129,18 +127,18 @@ const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({
       />
     )}
     {status === ToolCallStatus.Success && (
-      <Text color={theme.status.success}>✔</Text>
+      <Text color={Colors.AccentGreen}>✔</Text>
     )}
     {status === ToolCallStatus.Confirming && (
-      <Text color={theme.status.warning}>?</Text>
+      <Text color={Colors.AccentYellow}>?</Text>
     )}
     {status === ToolCallStatus.Canceled && (
-      <Text color={theme.status.warning} bold>
+      <Text color={Colors.AccentYellow} bold>
         -
       </Text>
     )}
     {status === ToolCallStatus.Error && (
-      <Text color={theme.status.error} bold>
+      <Text color={Colors.AccentRed} bold>
         x
       </Text>
     )}
@@ -162,11 +160,11 @@ const ToolInfo: React.FC<ToolInfo> = ({
   const nameColor = React.useMemo<string>(() => {
     switch (emphasis) {
       case 'high':
-        return theme.text.primary;
+        return Colors.Foreground;
       case 'medium':
-        return theme.text.primary;
+        return Colors.Foreground;
       case 'low':
-        return theme.text.secondary;
+        return Colors.Gray;
       default: {
         const exhaustiveCheck: never = emphasis;
         return exhaustiveCheck;
@@ -178,19 +176,18 @@ 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={theme.text.secondary}>{description}</Text>
+        <Text color={Colors.Gray}>{description}</Text>
       </Text>
     </Box>
   );
 };
 
 const TrailingIndicator: React.FC = () => (
-  <Text color={theme.text.primary} wrap="truncate">
+  <Text color={Colors.Foreground} wrap="truncate">
     {' '}
     ←
   </Text>
diff --git a/packages/cli/src/ui/components/messages/UserMessage.tsx b/packages/cli/src/ui/components/messages/UserMessage.tsx
index f9a6f7a5..332cb0f4 100644
--- a/packages/cli/src/ui/components/messages/UserMessage.tsx
+++ b/packages/cli/src/ui/components/messages/UserMessage.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { Text, Box } from 'ink';
-import { theme } from '../../semantic-colors.js';
+import { Colors } from '../../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 ? theme.text.accent : theme.text.secondary;
-  const borderColor = isSlashCommand ? theme.text.accent : theme.border.default;
+  const textColor = isSlashCommand ? Colors.AccentPurple : Colors.Gray;
+  const borderColor = isSlashCommand ? Colors.AccentPurple : Colors.Gray;
 
   return (
     <Box
diff --git a/packages/cli/src/ui/components/messages/UserShellMessage.tsx b/packages/cli/src/ui/components/messages/UserShellMessage.tsx
index 57b917d0..946ca7e7 100644
--- a/packages/cli/src/ui/components/messages/UserShellMessage.tsx
+++ b/packages/cli/src/ui/components/messages/UserShellMessage.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { Box, Text } from 'ink';
-import { theme } from '../../semantic-colors.js';
+import { Colors } from '../../colors.js';
 
 interface UserShellMessageProps {
   text: string;
@@ -18,8 +18,8 @@ export const UserShellMessage: React.FC<UserShellMessageProps> = ({ text }) => {
 
   return (
     <Box>
-      <Text color={theme.text.accent}>$ </Text>
-      <Text color={theme.text.primary}>{commandToDisplay}</Text>
+      <Text color={Colors.AccentCyan}>$ </Text>
+      <Text>{commandToDisplay}</Text>
     </Box>
   );
 };
-- 
cgit v1.2.3