2 files changed, 16 insertions, 23 deletions
diff --git a/packages/cli/src/ui/components/shared/MaxSizedBox.tsx b/packages/cli/src/ui/components/shared/MaxSizedBox.tsx
index 4c8b0862..346472bf 100644
--- a/packages/cli/src/ui/components/shared/MaxSizedBox.tsx
+++ b/packages/cli/src/ui/components/shared/MaxSizedBox.tsx
@@ -7,7 +7,7 @@
 import React, { Fragment, useEffect, useId } from 'react';
 import { Box, Text } from 'ink';
 import stringWidth from 'string-width';
-import { theme } from '../../semantic-colors.js';
+import { Colors } from '../../colors.js';
 import { toCodePoints } from '../../utils/textUtils.js';
 import { useOverflowActions } from '../../contexts/OverflowContext.js';
 
@@ -173,7 +173,6 @@ export const MaxSizedBox: React.FC<MaxSizedBoxProps> = ({
     <Box key={index}>
       {line.length > 0 ? (
         line.map((segment, segIndex) => (
-          // Avoid adding color styles to this <Text> element, breaks code colorization
           <Text key={segIndex} {...segment.props}>
             {segment.text}
           </Text>
@@ -187,14 +186,14 @@ export const MaxSizedBox: React.FC<MaxSizedBoxProps> = ({
   return (
     <Box flexDirection="column" width={maxWidth} flexShrink={0}>
       {totalHiddenLines > 0 && overflowDirection === 'top' && (
-        <Text color={theme.text.secondary} wrap="truncate">
+        <Text color={Colors.Gray} wrap="truncate">
           ... first {totalHiddenLines} line{totalHiddenLines === 1 ? '' : 's'}{' '}
           hidden ...
         </Text>
       )}
       {visibleLines}
       {totalHiddenLines > 0 && overflowDirection === 'bottom' && (
-        <Text color={theme.text.secondary} wrap="truncate">
+        <Text color={Colors.Gray} wrap="truncate">
           ... last {totalHiddenLines} line{totalHiddenLines === 1 ? '' : 's'}{' '}
           hidden ...
         </Text>
diff --git a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
index b6c78feb..746744e5 100644
--- a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
+++ b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
@@ -6,7 +6,7 @@
 
 import React, { useEffect, useState, useRef } from 'react';
 import { Text, Box } from 'ink';
-import { theme } from '../../semantic-colors.js';
+import { Colors } from '../../colors.js';
 import { useKeypress } from '../../hooks/useKeypress.js';
 
 /**
@@ -164,9 +164,7 @@ export function RadioButtonSelect<T>({
   return (
     <Box flexDirection="column">
       {showScrollArrows && (
-        <Text
-          color={scrollOffset > 0 ? theme.text.primary : theme.text.secondary}
-        >
+        <Text color={scrollOffset > 0 ? Colors.Foreground : Colors.Gray}>
           ▲
         </Text>
       )}
@@ -174,18 +172,18 @@ export function RadioButtonSelect<T>({
         const itemIndex = scrollOffset + index;
         const isSelected = activeIndex === itemIndex;
 
-        let textColor = theme.text.primary;
-        let numberColor = theme.text.primary;
+        let textColor = Colors.Foreground;
+        let numberColor = Colors.Foreground;
         if (isSelected) {
-          textColor = theme.status.success;
-          numberColor = theme.status.success;
+          textColor = Colors.AccentGreen;
+          numberColor = Colors.AccentGreen;
         } else if (item.disabled) {
-          textColor = theme.text.secondary;
-          numberColor = theme.text.secondary;
+          textColor = Colors.Gray;
+          numberColor = Colors.Gray;
         }
 
         if (!showNumbers) {
-          numberColor = theme.text.secondary;
+          numberColor = Colors.Gray;
         }
 
         const numberColumnWidth = String(items.length).length;
@@ -196,9 +194,7 @@ export function RadioButtonSelect<T>({
         return (
           <Box key={item.label} alignItems="center">
             <Box minWidth={2} flexShrink={0}>
-              <Text
-                color={isSelected ? theme.status.success : theme.text.primary}
-              >
+              <Text color={isSelected ? Colors.AccentGreen : Colors.Foreground}>
                 {isSelected ? '●' : ' '}
               </Text>
             </Box>
@@ -212,9 +208,7 @@ export function RadioButtonSelect<T>({
             {item.themeNameDisplay && item.themeTypeDisplay ? (
               <Text color={textColor} wrap="truncate">
                 {item.themeNameDisplay}{' '}
-                <Text color={theme.text.secondary}>
-                  {item.themeTypeDisplay}
-                </Text>
+                <Text color={Colors.Gray}>{item.themeTypeDisplay}</Text>
               </Text>
             ) : (
               <Text color={textColor} wrap="truncate">
@@ -228,8 +222,8 @@ export function RadioButtonSelect<T>({
         <Text
           color={
             scrollOffset + maxItemsToShow < items.length
-              ? theme.text.primary
-              : theme.text.secondary
+              ? Colors.Foreground
+              : Colors.Gray
           }
         >
           ▼