Merge pull request #1476 from afarber/1461-yolo-color-change

tanzhenxin · web-flow · commit 3ece0e3c3cb6 · 2026-01-21T18:06:52.000+08:00
feat(cli): use dim colors for YOLO/auto-accept mode borders
diff --git a/packages/cli/src/ui/colors.ts b/packages/cli/src/ui/colors.ts
@@ -38,6 +38,12 @@ export const Colors: ColorsTheme = {
   get AccentRed() {
     return themeManager.getActiveTheme().colors.AccentRed;
   },
+  get AccentYellowDim() {
+    return themeManager.getActiveTheme().colors.AccentYellowDim;
+  },
+  get AccentRedDim() {
+    return themeManager.getActiveTheme().colors.AccentRedDim;
+  },
   get DiffAdded() {
     return themeManager.getActiveTheme().colors.DiffAdded;
   },
diff --git a/packages/cli/src/ui/components/InputPrompt.tsx b/packages/cli/src/ui/components/InputPrompt.tsx
@@ -714,10 +714,10 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
     statusColor = theme.ui.symbol;
     statusText = t('Shell mode');
   } else if (showYoloStyling) {
-    statusColor = theme.status.error;
+    statusColor = theme.status.errorDim;
     statusText = t('YOLO mode');
   } else if (showAutoAcceptStyling) {
-    statusColor = theme.status.warning;
+    statusColor = theme.status.warningDim;
     statusText = t('Accepting edits');
   }
 
diff --git a/packages/cli/src/ui/themes/ansi-light.ts b/packages/cli/src/ui/themes/ansi-light.ts
@@ -18,6 +18,8 @@ const ansiLightColors: ColorsTheme = {
   AccentGreen: 'green',
   AccentYellow: 'orange',
   AccentRed: 'red',
+  AccentYellowDim: 'orange',
+  AccentRedDim: 'red',
   DiffAdded: '#E5F2E5',
   DiffRemoved: '#FFE5E5',
   Comment: 'gray',
diff --git a/packages/cli/src/ui/themes/ansi.ts b/packages/cli/src/ui/themes/ansi.ts
@@ -18,6 +18,8 @@ const ansiColors: ColorsTheme = {
   AccentGreen: 'green',
   AccentYellow: 'yellow',
   AccentRed: 'red',
+  AccentYellowDim: 'yellow',
+  AccentRedDim: 'red',
   DiffAdded: '#003300',
   DiffRemoved: '#4D0000',
   Comment: 'gray',
diff --git a/packages/cli/src/ui/themes/atom-one-dark.ts b/packages/cli/src/ui/themes/atom-one-dark.ts
@@ -17,6 +17,8 @@ const atomOneDarkColors: ColorsTheme = {
   AccentGreen: '#98c379',
   AccentYellow: '#e6c07b',
   AccentRed: '#e06c75',
+  AccentYellowDim: '#8B7530',
+  AccentRedDim: '#8B3A4A',
   DiffAdded: '#39544E',
   DiffRemoved: '#562B2F',
   Comment: '#5c6370',
diff --git a/packages/cli/src/ui/themes/ayu-light.ts b/packages/cli/src/ui/themes/ayu-light.ts
@@ -17,6 +17,8 @@ const ayuLightColors: ColorsTheme = {
   AccentGreen: '#86b300',
   AccentYellow: '#f2ae49',
   AccentRed: '#f07171',
+  AccentYellowDim: '#8B7000',
+  AccentRedDim: '#993333',
   DiffAdded: '#C6EAD8',
   DiffRemoved: '#FFCCCC',
   Comment: '#ABADB1',
diff --git a/packages/cli/src/ui/themes/ayu.ts b/packages/cli/src/ui/themes/ayu.ts
@@ -17,6 +17,8 @@ const ayuDarkColors: ColorsTheme = {
   AccentGreen: '#AAD94C',
   AccentYellow: '#FFB454',
   AccentRed: '#F26D78',
+  AccentYellowDim: '#8B7530',
+  AccentRedDim: '#8B3A4A',
   DiffAdded: '#293022',
   DiffRemoved: '#3D1215',
   Comment: '#646A71',
diff --git a/packages/cli/src/ui/themes/dracula.ts b/packages/cli/src/ui/themes/dracula.ts
@@ -17,6 +17,8 @@ const draculaColors: ColorsTheme = {
   AccentGreen: '#50fa7b',
   AccentYellow: '#fff783',
   AccentRed: '#ff5555',
+  AccentYellowDim: '#8B7530',
+  AccentRedDim: '#8B3A4A',
   DiffAdded: '#11431d',
   DiffRemoved: '#6e1818',
   Comment: '#6272a4',
diff --git a/packages/cli/src/ui/themes/github-dark.ts b/packages/cli/src/ui/themes/github-dark.ts
@@ -17,6 +17,8 @@ const githubDarkColors: ColorsTheme = {
   AccentGreen: '#85E89D',
   AccentYellow: '#FFAB70',
   AccentRed: '#F97583',
+  AccentYellowDim: '#8B7530',
+  AccentRedDim: '#8B3A4A',
   DiffAdded: '#3C4636',
   DiffRemoved: '#502125',
   Comment: '#6A737D',
diff --git a/packages/cli/src/ui/themes/github-light.ts b/packages/cli/src/ui/themes/github-light.ts
@@ -17,6 +17,8 @@ const githubLightColors: ColorsTheme = {
   AccentGreen: '#008080',
   AccentYellow: '#990073',
   AccentRed: '#d14',
+  AccentYellowDim: '#8B7000',
+  AccentRedDim: '#993333',
   DiffAdded: '#C6EAD8',
   DiffRemoved: '#FFCCCC',
   Comment: '#998',
diff --git a/packages/cli/src/ui/themes/googlecode.ts b/packages/cli/src/ui/themes/googlecode.ts
@@ -17,6 +17,8 @@ const googleCodeColors: ColorsTheme = {
   AccentGreen: '#080',
   AccentYellow: '#660',
   AccentRed: '#800',
+  AccentYellowDim: '#8B7000',
+  AccentRedDim: '#993333',
   DiffAdded: '#C6EAD8',
   DiffRemoved: '#FEDEDE',
   Comment: '#5f6368',
diff --git a/packages/cli/src/ui/themes/no-color.ts b/packages/cli/src/ui/themes/no-color.ts
@@ -19,6 +19,8 @@ const noColorColorsTheme: ColorsTheme = {
   AccentGreen: '',
   AccentYellow: '',
   AccentRed: '',
+  AccentYellowDim: '',
+  AccentRedDim: '',
   DiffAdded: '',
   DiffRemoved: '',
   Comment: '',
@@ -52,6 +54,8 @@ const noColorSemanticColors: SemanticColors = {
     error: '',
     success: '',
     warning: '',
+    errorDim: '',
+    warningDim: '',
   },
 };
 
diff --git a/packages/cli/src/ui/themes/qwen-dark.ts b/packages/cli/src/ui/themes/qwen-dark.ts
@@ -18,6 +18,8 @@ const qwenDarkColors: ColorsTheme = {
   AccentGreen: '#AAD94C',
   AccentYellow: '#FFD700',
   AccentRed: '#F26D78',
+  AccentYellowDim: '#8B7530',
+  AccentRedDim: '#8B3A4A',
   DiffAdded: '#AAD94C',
   DiffRemoved: '#F26D78',
   Comment: '#646A71',
diff --git a/packages/cli/src/ui/themes/qwen-light.ts b/packages/cli/src/ui/themes/qwen-light.ts
@@ -18,6 +18,8 @@ const qwenLightColors: ColorsTheme = {
   AccentGreen: '#86b300',
   AccentYellow: '#f2ae49',
   AccentRed: '#f07171',
+  AccentYellowDim: '#8B7000',
+  AccentRedDim: '#993333',
   DiffAdded: '#86b300',
   DiffRemoved: '#f07171',
   Comment: '#ABADB1',
diff --git a/packages/cli/src/ui/themes/semantic-tokens.ts b/packages/cli/src/ui/themes/semantic-tokens.ts
@@ -33,6 +33,9 @@ export interface SemanticColors {
     error: string;
     success: string;
     warning: string;
+    // Dim variants for less intense UI elements
+    errorDim: string;
+    warningDim: string;
   };
 }
 
@@ -63,6 +66,8 @@ export const lightSemanticColors: SemanticColors = {
     error: lightTheme.AccentRed,
     success: lightTheme.AccentGreen,
     warning: lightTheme.AccentYellow,
+    errorDim: lightTheme.AccentRedDim,
+    warningDim: lightTheme.AccentYellowDim,
   },
 };
 
@@ -93,6 +98,8 @@ export const darkSemanticColors: SemanticColors = {
     error: darkTheme.AccentRed,
     success: darkTheme.AccentGreen,
     warning: darkTheme.AccentYellow,
+    errorDim: darkTheme.AccentRedDim,
+    warningDim: darkTheme.AccentYellowDim,
   },
 };
 
@@ -123,5 +130,7 @@ export const ansiSemanticColors: SemanticColors = {
     error: ansiTheme.AccentRed,
     success: ansiTheme.AccentGreen,
     warning: ansiTheme.AccentYellow,
+    errorDim: ansiTheme.AccentRedDim,
+    warningDim: ansiTheme.AccentYellowDim,
   },
 };
diff --git a/packages/cli/src/ui/themes/shades-of-purple.ts b/packages/cli/src/ui/themes/shades-of-purple.ts
@@ -22,6 +22,8 @@ const shadesOfPurpleColors: ColorsTheme = {
   AccentGreen: '#A5FF90', // Strings and many others
   AccentYellow: '#fad000', // Title, main yellow
   AccentRed: '#ff628c', // Error/deletion accent
+  AccentYellowDim: '#8B7530',
+  AccentRedDim: '#8B3A4A',
   DiffAdded: '#383E45',
   DiffRemoved: '#572244',
   Comment: '#B362FF', // Comment color (same as AccentPurple)
diff --git a/packages/cli/src/ui/themes/theme.ts b/packages/cli/src/ui/themes/theme.ts
@@ -21,6 +21,9 @@ export interface ColorsTheme {
   AccentGreen: string;
   AccentYellow: string;
   AccentRed: string;
+  // Dim variants for less intense UI elements
+  AccentYellowDim: string;
+  AccentRedDim: string;
   DiffAdded: string;
   DiffRemoved: string;
   Comment: string;
@@ -58,6 +61,8 @@ export interface CustomTheme {
     error?: string;
     success?: string;
     warning?: string;
+    errorDim?: string;
+    warningDim?: string;
   };
 
   // Legacy properties (all optional)
@@ -70,6 +75,8 @@ export interface CustomTheme {
   AccentGreen?: string;
   AccentYellow?: string;
   AccentRed?: string;
+  AccentYellowDim?: string;
+  AccentRedDim?: string;
   DiffAdded?: string;
   DiffRemoved?: string;
   Comment?: string;
@@ -88,6 +95,8 @@ export const lightTheme: ColorsTheme = {
   AccentGreen: '#3CA84B',
   AccentYellow: '#D5A40A',
   AccentRed: '#DD4C4C',
+  AccentYellowDim: '#8B7000',
+  AccentRedDim: '#993333',
   DiffAdded: '#C6EAD8',
   DiffRemoved: '#FFCCCC',
   Comment: '#008000',
@@ -106,6 +115,8 @@ export const darkTheme: ColorsTheme = {
   AccentGreen: '#A6E3A1',
   AccentYellow: '#F9E2AF',
   AccentRed: '#F38BA8',
+  AccentYellowDim: '#8B7530',
+  AccentRedDim: '#8B3A4A',
   DiffAdded: '#28350B',
   DiffRemoved: '#430000',
   Comment: '#6C7086',
@@ -124,6 +135,8 @@ export const ansiTheme: ColorsTheme = {
   AccentGreen: 'green',
   AccentYellow: 'yellow',
   AccentRed: 'red',
+  AccentYellowDim: 'yellow',
+  AccentRedDim: 'red',
   DiffAdded: 'green',
   DiffRemoved: 'red',
   Comment: 'gray',
@@ -182,6 +195,8 @@ export class Theme {
         error: this.colors.AccentRed,
         success: this.colors.AccentGreen,
         warning: this.colors.AccentYellow,
+        errorDim: this.colors.AccentRedDim,
+        warningDim: this.colors.AccentYellowDim,
       },
     };
     this._colorMap = Object.freeze(this._buildColorMap(rawMappings)); // Build and freeze the map
@@ -261,6 +276,10 @@ export function createCustomTheme(customTheme: CustomTheme): Theme {
     AccentGreen: customTheme.status?.success ?? customTheme.AccentGreen ?? '',
     AccentYellow: customTheme.status?.warning ?? customTheme.AccentYellow ?? '',
     AccentRed: customTheme.status?.error ?? customTheme.AccentRed ?? '',
+    AccentYellowDim:
+      customTheme.status?.warningDim ?? customTheme.AccentYellowDim ?? '',
+    AccentRedDim:
+      customTheme.status?.errorDim ?? customTheme.AccentRedDim ?? '',
     DiffAdded:
       customTheme.background?.diff?.added ?? customTheme.DiffAdded ?? '',
     DiffRemoved:
@@ -435,6 +454,8 @@ export function createCustomTheme(customTheme: CustomTheme): Theme {
       error: customTheme.status?.error ?? colors.AccentRed,
       success: customTheme.status?.success ?? colors.AccentGreen,
       warning: customTheme.status?.warning ?? colors.AccentYellow,
+      errorDim: customTheme.status?.errorDim ?? colors.AccentRedDim,
+      warningDim: customTheme.status?.warningDim ?? colors.AccentYellowDim,
     },
   };
 
diff --git a/packages/cli/src/ui/themes/xcode.ts b/packages/cli/src/ui/themes/xcode.ts
@@ -17,6 +17,8 @@ const xcodeColors: ColorsTheme = {
   AccentGreen: '#007400',
   AccentYellow: '#836C28',
   AccentRed: '#c41a16',
+  AccentYellowDim: '#8B7000',
+  AccentRedDim: '#993333',
   DiffAdded: '#C6EAD8',
   DiffRemoved: '#FEDEDE',
   Comment: '#007400',
