fix(ui): removed background color for input (#25339)

packages/cli/src/ui/components/InputPrompt.tsx

@@ -73,8 +73,6 @@ import {
 import { parseSlashCommand } from '../../utils/commands.js';
 import * as path from 'node:path';
 import { SCREEN_READER_USER_PREFIX } from '../textConstants.js';
-import { getSafeLowColorBackground } from '../themes/color-utils.js';
-import { isLowColorDepth } from '../utils/terminalUtils.js';
 import { useShellFocusState } from '../contexts/ShellFocusContext.js';
 import { useUIState } from '../contexts/UIStateContext.js';
 import { useInputState } from '../contexts/InputContext.js';
@@ -1645,21 +1643,6 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
   );
 
   const useBackgroundColor = config.getUseBackgroundColor();
-  const isLowColor = isLowColorDepth();
-  const terminalBg = theme.background.primary || 'black';
-
-  // We should fallback to lines if the background color is disabled OR if it is
-  // enabled but we are in a low color depth terminal where we don't have a safe
-  // background color to use.
-  const useLineFallback = useMemo(() => {
-    if (!useBackgroundColor) {
-      return true;
-    }
-    if (isLowColor) {
-      return !getSafeLowColorBackground(terminalBg);
-    }
-    return false;
-  }, [useBackgroundColor, isLowColor, terminalBg]);
 
   const prevCursorRef = useRef(buffer.visualCursor);
   const prevTextRef = useRef(buffer.text);
@@ -1698,8 +1681,11 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
     }
   }, [buffer.visualCursor, buffer.text, focus]);
 
-  const listBackgroundColor =
-    useLineFallback || !useBackgroundColor ? undefined : theme.background.input;
+  const listBackgroundColor = !useBackgroundColor
+    ? undefined
+    : theme.background.input;
+
+  const useLineFallback = !!process.env['NO_COLOR'];
 
   useEffect(() => {
     if (onSuggestionsVisibilityChange) {
@@ -1762,7 +1748,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
   return (
     <>
       {suggestionsPosition === 'above' && suggestionsNode}
-      {useLineFallback ? (
+      {useLineFallback || !useBackgroundColor ? (
         <Box
           borderStyle="round"
           borderTop={true}
@@ -1781,17 +1767,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
         backgroundOpacity={1}
         useBackgroundColor={useBackgroundColor}
       >
-        <Box
-          flexGrow={1}
-          flexDirection="row"
-          paddingX={1}
-          borderColor={borderColor}
-          borderStyle={useLineFallback ? 'round' : undefined}
-          borderTop={false}
-          borderBottom={false}
-          borderLeft={!useBackgroundColor}
-          borderRight={!useBackgroundColor}
-        >
+        <Box flexGrow={1} flexDirection="row" paddingX={1}>
           <Text
             color={statusColor ?? theme.text.accent}
             aria-label={statusText || undefined}
@@ -1880,7 +1856,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
           </Box>
         </Box>
       </HalfLinePaddedBox>
-      {useLineFallback ? (
+      {useLineFallback || !useBackgroundColor ? (
         <Box
           borderStyle="round"
           borderTop={false}