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/AboutBox.tsx | 36 ++++++++++++++---------------
 1 file changed, 18 insertions(+), 18 deletions(-)

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

diff --git a/packages/cli/src/ui/components/AboutBox.tsx b/packages/cli/src/ui/components/AboutBox.tsx
index a0954576..54bcbc3c 100644
--- a/packages/cli/src/ui/components/AboutBox.tsx
+++ b/packages/cli/src/ui/components/AboutBox.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 { GIT_COMMIT_INFO } from '../../generated/git-commit.js';
 
 interface AboutBoxProps {
@@ -30,77 +30,77 @@ export const AboutBox: React.FC<AboutBoxProps> = ({
 }) => (
   <Box
     borderStyle="round"
-    borderColor={Colors.Gray}
+    borderColor={theme.border.default}
     flexDirection="column"
     padding={1}
     marginY={1}
     width="100%"
   >
     <Box marginBottom={1}>
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         About Gemini CLI
       </Text>
     </Box>
     <Box flexDirection="row">
       <Box width="35%">
-        <Text bold color={Colors.LightBlue}>
+        <Text bold color={theme.text.link}>
           CLI Version
         </Text>
       </Box>
       <Box>
-        <Text>{cliVersion}</Text>
+        <Text color={theme.text.primary}>{cliVersion}</Text>
       </Box>
     </Box>
     {GIT_COMMIT_INFO && !['N/A'].includes(GIT_COMMIT_INFO) && (
       <Box flexDirection="row">
         <Box width="35%">
-          <Text bold color={Colors.LightBlue}>
+          <Text bold color={theme.text.link}>
             Git Commit
           </Text>
         </Box>
         <Box>
-          <Text>{GIT_COMMIT_INFO}</Text>
+          <Text color={theme.text.primary}>{GIT_COMMIT_INFO}</Text>
         </Box>
       </Box>
     )}
     <Box flexDirection="row">
       <Box width="35%">
-        <Text bold color={Colors.LightBlue}>
+        <Text bold color={theme.text.link}>
           Model
         </Text>
       </Box>
       <Box>
-        <Text>{modelVersion}</Text>
+        <Text color={theme.text.primary}>{modelVersion}</Text>
       </Box>
     </Box>
     <Box flexDirection="row">
       <Box width="35%">
-        <Text bold color={Colors.LightBlue}>
+        <Text bold color={theme.text.link}>
           Sandbox
         </Text>
       </Box>
       <Box>
-        <Text>{sandboxEnv}</Text>
+        <Text color={theme.text.primary}>{sandboxEnv}</Text>
       </Box>
     </Box>
     <Box flexDirection="row">
       <Box width="35%">
-        <Text bold color={Colors.LightBlue}>
+        <Text bold color={theme.text.link}>
           OS
         </Text>
       </Box>
       <Box>
-        <Text>{osVersion}</Text>
+        <Text color={theme.text.primary}>{osVersion}</Text>
       </Box>
     </Box>
     <Box flexDirection="row">
       <Box width="35%">
-        <Text bold color={Colors.LightBlue}>
+        <Text bold color={theme.text.link}>
           Auth Method
         </Text>
       </Box>
       <Box>
-        <Text>
+        <Text color={theme.text.primary}>
           {selectedAuthType.startsWith('oauth') ? 'OAuth' : selectedAuthType}
         </Text>
       </Box>
@@ -108,19 +108,19 @@ export const AboutBox: React.FC<AboutBoxProps> = ({
     {gcpProject && (
       <Box flexDirection="row">
         <Box width="35%">
-          <Text bold color={Colors.LightBlue}>
+          <Text bold color={theme.text.link}>
             GCP Project
           </Text>
         </Box>
         <Box>
-          <Text>{gcpProject}</Text>
+          <Text color={theme.text.primary}>{gcpProject}</Text>
         </Box>
       </Box>
     )}
     {ideClient && (
       <Box flexDirection="row">
         <Box width="35%">
-          <Text bold color={Colors.LightBlue}>
+          <Text bold color={theme.text.link}>
             IDE Client
           </Text>
         </Box>
-- 
cgit v1.2.3