Give Gemini Code a face lift.

- This utilizes `ink-gradient` to render GEMINI CODE in amazing colors.
- Added a shared color configuration for UX (should this be in config?). It's very possible that we shouldn't be talking about the specific colors and instead be mentioning "foreground"/"background"/inlineCode etc. type colors.
- Updated existing color usages to utilize `Colors.*`

Fixes https://b.corp.google.com/issues/411385593

1 files changed, 5 insertions, 2 deletions

diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx
index 45167ab3..3b4e197b 100644
--- a/packages/cli/src/ui/components/Footer.tsx
+++ b/packages/cli/src/ui/components/Footer.tsx
@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { Box, Text } from 'ink';
+import { Colors } from '../colors.js';
 
 interface FooterProps {
   queryLength: number;
@@ -14,8 +15,10 @@ interface FooterProps {
 export const Footer: React.FC<FooterProps> = ({ queryLength }) => (
   <Box marginTop={1} justifyContent="space-between">
     <Box minWidth={15}>
-      <Text color="gray">{queryLength === 0 ? '? for shortcuts' : ''}</Text>
+      <Text color={Colors.SubtleComment}>
+        {queryLength === 0 ? '? for shortcuts' : ''}
+      </Text>
     </Box>
-    <Text color="blue">Gemini</Text>
+    <Text color={Colors.AccentBlue}>Gemini</Text>
   </Box>
 );