Update semantic color tokens (#6253)

Co-authored-by: jacob314 <[email protected]>

1 files changed, 18 insertions, 12 deletions

diff --git a/packages/cli/src/ui/components/ModelStatsDisplay.tsx b/packages/cli/src/ui/components/ModelStatsDisplay.tsx
index 1911e757..c3b109a3 100644
--- a/packages/cli/src/ui/components/ModelStatsDisplay.tsx
+++ b/packages/cli/src/ui/components/ModelStatsDisplay.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 { formatDuration } from '../utils/formatters.js';
 import {
   calculateAverageLatency,
@@ -33,13 +33,13 @@ const StatRow: React.FC<StatRowProps> = ({
 }) => (
   <Box>
     <Box width={METRIC_COL_WIDTH}>
-      <Text bold={isSection} color={isSection ? undefined : Colors.LightBlue}>
+      <Text bold color={isSection ? theme.text.primary : theme.text.link}>
         {isSubtle ? `  ↳ ${title}` : title}
       </Text>
     </Box>
     {values.map((value, index) => (
       <Box width={MODEL_COL_WIDTH} key={index}>
-        <Text>{value}</Text>
+        <Text color={theme.text.primary}>{value}</Text>
       </Box>
     ))}
   </Box>
@@ -56,11 +56,13 @@ export const ModelStatsDisplay: React.FC = () => {
     return (
       <Box
         borderStyle="round"
-        borderColor={Colors.Gray}
+        borderColor={theme.border.default}
         paddingY={1}
         paddingX={2}
       >
-        <Text>No API calls have been made in this session.</Text>
+        <Text color={theme.text.primary}>
+          No API calls have been made in this session.
+        </Text>
       </Box>
     );
   }
@@ -82,12 +84,12 @@ export const ModelStatsDisplay: React.FC = () => {
   return (
     <Box
       borderStyle="round"
-      borderColor={Colors.Gray}
+      borderColor={theme.border.default}
       flexDirection="column"
       paddingY={1}
       paddingX={2}
     >
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         Model Stats For Nerds
       </Text>
       <Box height={1} />
@@ -95,11 +97,15 @@ export const ModelStatsDisplay: React.FC = () => {
       {/* Header */}
       <Box>
         <Box width={METRIC_COL_WIDTH}>
-          <Text bold>Metric</Text>
+          <Text bold color={theme.text.primary}>
+            Metric
+          </Text>
         </Box>
         {modelNames.map((name) => (
           <Box width={MODEL_COL_WIDTH} key={name}>
-            <Text bold>{name}</Text>
+            <Text bold color={theme.text.primary}>
+              {name}
+            </Text>
           </Box>
         ))}
       </Box>
@@ -126,7 +132,7 @@ export const ModelStatsDisplay: React.FC = () => {
           return (
             <Text
               color={
-                m.api.totalErrors > 0 ? Colors.AccentRed : Colors.Foreground
+                m.api.totalErrors > 0 ? theme.status.error : theme.text.primary
               }
             >
               {m.api.totalErrors.toLocaleString()} ({errorRate.toFixed(1)}%)
@@ -149,7 +155,7 @@ export const ModelStatsDisplay: React.FC = () => {
       <StatRow
         title="Total"
         values={getModelValues((m) => (
-          <Text color={Colors.AccentYellow}>
+          <Text color={theme.status.warning}>
             {m.tokens.total.toLocaleString()}
           </Text>
         ))}
@@ -166,7 +172,7 @@ export const ModelStatsDisplay: React.FC = () => {
           values={getModelValues((m) => {
             const cacheHitRate = calculateCacheHitRate(m);
             return (
-              <Text color={Colors.AccentGreen}>
+              <Text color={theme.status.success}>
                 {m.tokens.cached.toLocaleString()} ({cacheHitRate.toFixed(1)}%)
               </Text>
             );