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>
---
 packages/cli/src/ui/components/Help.tsx | 84 ++++++++++++++++-----------------
 1 file changed, 42 insertions(+), 42 deletions(-)

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

diff --git a/packages/cli/src/ui/components/Help.tsx b/packages/cli/src/ui/components/Help.tsx
index d9f7b4a8..9b6709ac 100644
--- a/packages/cli/src/ui/components/Help.tsx
+++ b/packages/cli/src/ui/components/Help.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';
 import { SlashCommand } from '../commands/types.js';
 
 interface Help {
@@ -17,42 +17,42 @@ export const Help: React.FC<Help> = ({ commands }) => (
   <Box
     flexDirection="column"
     marginBottom={1}
-    borderColor={Colors.Gray}
+    borderColor={theme.border.default}
     borderStyle="round"
     padding={1}
   >
     {/* Basics */}
-    <Text bold color={Colors.Foreground}>
+    <Text bold color={theme.text.primary}>
       Basics:
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Add context
       </Text>
       : Use{' '}
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         @
       </Text>{' '}
       to specify files for context (e.g.,{' '}
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         @src/myFile.ts
       </Text>
       ) to target specific files or folders.
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Shell mode
       </Text>
       : Execute shell commands via{' '}
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         !
       </Text>{' '}
       (e.g.,{' '}
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         !npm run start
       </Text>
       ) or use natural language (e.g.{' '}
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         start server
       </Text>
       ).
@@ -61,15 +61,15 @@ export const Help: React.FC<Help> = ({ commands }) => (
     <Box height={1} />
 
     {/* Commands */}
-    <Text bold color={Colors.Foreground}>
+    <Text bold color={theme.text.primary}>
       Commands:
     </Text>
     {commands
       .filter((command) => command.description)
       .map((command: SlashCommand) => (
         <Box key={command.name} flexDirection="column">
-          <Text color={Colors.Foreground}>
-            <Text bold color={Colors.AccentPurple}>
+          <Text color={theme.text.primary}>
+            <Text bold color={theme.text.accent}>
               {' '}
               /{command.name}
             </Text>
@@ -77,8 +77,8 @@ export const Help: React.FC<Help> = ({ commands }) => (
           </Text>
           {command.subCommands &&
             command.subCommands.map((subCommand) => (
-              <Text key={subCommand.name} color={Colors.Foreground}>
-                <Text bold color={Colors.AccentPurple}>
+              <Text key={subCommand.name} color={theme.text.primary}>
+                <Text bold color={theme.text.accent}>
                   {'   '}
                   {subCommand.name}
                 </Text>
@@ -87,8 +87,8 @@ export const Help: React.FC<Help> = ({ commands }) => (
             ))}
         </Box>
       ))}
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         {' '}
         !{' '}
       </Text>
@@ -98,75 +98,75 @@ export const Help: React.FC<Help> = ({ commands }) => (
     <Box height={1} />
 
     {/* Shortcuts */}
-    <Text bold color={Colors.Foreground}>
+    <Text bold color={theme.text.primary}>
       Keyboard Shortcuts:
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Alt+Left/Right
       </Text>{' '}
       - Jump through words in the input
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Ctrl+C
       </Text>{' '}
       - Quit application
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         {process.platform === 'win32' ? 'Ctrl+Enter' : 'Ctrl+J'}
       </Text>{' '}
       {process.platform === 'linux'
         ? '- New line (Alt+Enter works for certain linux distros)'
         : '- New line'}
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Ctrl+L
       </Text>{' '}
       - Clear the screen
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         {process.platform === 'darwin' ? 'Ctrl+X / Meta+Enter' : 'Ctrl+X'}
       </Text>{' '}
       - Open input in external editor
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Ctrl+Y
       </Text>{' '}
       - Toggle YOLO mode
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Enter
       </Text>{' '}
       - Send message
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Esc
       </Text>{' '}
       - Cancel operation
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Shift+Tab
       </Text>{' '}
       - Toggle auto-accepting edits
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Up/Down
       </Text>{' '}
       - Cycle through your prompt history
     </Text>
     <Box height={1} />
-    <Text color={Colors.Foreground}>
+    <Text color={theme.text.primary}>
       For a full list of shortcuts, see{' '}
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         docs/keyboard-shortcuts.md
       </Text>
     </Text>
-- 
cgit v1.2.3