Update semantic color tokens (#6253)

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

1 files changed, 29 insertions, 8 deletions

diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx
index 16ecfc8f..c26dfa96 100644
--- a/packages/cli/src/ui/components/ThemeDialog.tsx
+++ b/packages/cli/src/ui/components/ThemeDialog.tsx
@@ -6,7 +6,7 @@
 
 import React, { useCallback, useState } from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { themeManager, DEFAULT_THEME } from '../themes/theme-manager.js';
 import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
 import { DiffRenderer } from './messages/DiffRenderer.js';
@@ -207,7 +207,7 @@ export function ThemeDialog({
   return (
     <Box
       borderStyle="round"
-      borderColor={Colors.Gray}
+      borderColor={theme.border.default}
       flexDirection="column"
       paddingTop={includePadding ? 1 : 0}
       paddingBottom={includePadding ? 1 : 0}
@@ -218,9 +218,19 @@ export function ThemeDialog({
       <Box flexDirection="row">
         {/* Left Column: Selection */}
         <Box flexDirection="column" width="45%" paddingRight={2}>
-          <Text bold={currentFocusedSection === 'theme'} wrap="truncate">
+          <Text
+            bold={currentFocusedSection === 'theme'}
+            wrap="truncate"
+            color={
+              currentFocusedSection === 'theme'
+                ? theme.text.primary
+                : theme.text.secondary
+            }
+          >
             {currentFocusedSection === 'theme' ? '> ' : '  '}Select Theme{' '}
-            <Text color={Colors.Gray}>{otherScopeModifiedMessage}</Text>
+            <Text color={theme.text.secondary}>
+              {otherScopeModifiedMessage}
+            </Text>
           </Text>
           <RadioButtonSelect
             key={selectInputKey}
@@ -237,7 +247,15 @@ export function ThemeDialog({
           {/* Scope Selection */}
           {showScopeSelection && (
             <Box marginTop={1} flexDirection="column">
-              <Text bold={currentFocusedSection === 'scope'} wrap="truncate">
+              <Text
+                bold={currentFocusedSection === 'scope'}
+                wrap="truncate"
+                color={
+                  currentFocusedSection === 'scope'
+                    ? theme.text.primary
+                    : theme.text.secondary
+                }
+              >
                 {currentFocusedSection === 'scope' ? '> ' : '  '}Apply To
               </Text>
               <RadioButtonSelect
@@ -254,7 +272,9 @@ export function ThemeDialog({
 
         {/* Right Column: Preview */}
         <Box flexDirection="column" width="55%" paddingLeft={2}>
-          <Text bold>Preview</Text>
+          <Text bold color={theme.text.primary}>
+            Preview
+          </Text>
           {/* Get the Theme object for the highlighted theme, fall back to default if not found */}
           {(() => {
             const previewTheme =
@@ -264,7 +284,7 @@ export function ThemeDialog({
             return (
               <Box
                 borderStyle="single"
-                borderColor={Colors.Gray}
+                borderColor={theme.border.default}
                 paddingTop={includePadding ? 1 : 0}
                 paddingBottom={includePadding ? 1 : 0}
                 paddingLeft={1}
@@ -281,6 +301,7 @@ def fibonacci(n):
                   'python',
                   codeBlockHeight,
                   colorizeCodeWidth,
+                  previewTheme,
                 )}
                 <Box marginTop={1} />
                 <DiffRenderer
@@ -300,7 +321,7 @@ def fibonacci(n):
         </Box>
       </Box>
       <Box marginTop={1}>
-        <Text color={Colors.Gray} wrap="truncate">
+        <Text color={theme.text.secondary} wrap="truncate">
           (Use Enter to select
           {showScopeSelection ? ', Tab to change focus' : ''})
         </Text>